Skip to content

Commit ba25e70

Browse files
docs: fix formatting in html coding standards
1 parent e1ddb9a commit ba25e70

File tree

1 file changed

+15
-8
lines changed

1 file changed

+15
-8
lines changed

coding-standards/html.md

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@ Following are additional guidelines to be followed.
77
**Note**: The following rules will override the ones provided in google style guide.
88

99
## General
10-
**HTML is a Markup Language**:
10+
**HTML is a Markup Language**:
1111
HTML is used to markup your document and not style it. We have CSS for styling. This means it is not advisable to use h1, h2 to size your content.
1212

13-
**Always Specify a DOCTYPE**:
13+
**Always Specify a DOCTYPE**:
1414
Always specify the doctype at the top of the page. Ideally, this should be:
1515

1616
```html
@@ -109,6 +109,7 @@ Do NOT use `<br>` tags to add margin or padding. Instead, use CSS. If you find y
109109
**Do Not Omit Closing Tags**: Although HTML5 allows you to omit closing tags, always close your tags.
110110

111111
### Write One List Item per Line
112+
112113
**Bad**
113114
```html
114115
<ul>
@@ -128,11 +129,13 @@ Do NOT use `<br>` tags to add margin or padding. Instead, use CSS. If you find y
128129

129130
### Avoid Ending `/` for Empty Elements
130131
For empty elements, avoid ending the tag with a `/`.
132+
131133
**Bad**
132134
```html
133135
<img alt="HTML Best Practices" src="/img/logo.png" />
134136
<br />
135137
```
138+
136139
**Good**
137140
```html
138141
<img alt="HTML Best Practices" src="/img/logo.png">
@@ -141,12 +144,14 @@ For empty elements, avoid ending the tag with a `/`.
141144

142145
### Proper Progression of Heading Tags
143146
A page should always have an `h1` tag that describes what that page is about. Ideally, a page should have only a single `h1` tag. The page should then progressively go from `h1` to `h2` and then to `h3` and so on.
147+
144148
**Bad**
145149
```html
146150
<h1>My Page</h1>
147151
<h3>Joe Black</h3>
148152
<h4>Jon Doe</h4>
149153
```
154+
150155
**Good**
151156
```html
152157
<h1>My Page</h1>
@@ -174,6 +179,7 @@ This will ensure that the resource is downloaded rather than opened. This works
174179
```
175180

176181
### Omit Boolean Attribute Value
182+
177183
**Bad**
178184
```html
179185
<audio autoplay="autoplay" src="/audio/theme.mp3">
@@ -191,6 +197,7 @@ Unless needed avoid giving ID attributes to every element that you create.
191197

192198
### Boolean Attributes
193199
A boolean attribute is one that needs no declared value. XHTML required you to declare a value, but HTML5 has no such requirement. In short, don't add a value.
200+
194201
**Bad**
195202
```html
196203
<input type="text" disabled="true">
@@ -237,14 +244,14 @@ Ensure that you specify a `maxlength` for every textbox control that you use.
237244

238245
### Use Proper Input Type
239246
If the field takes a number, please use `type="number"`, if it takes email use `type="email"`. This is especially useful in mobile devices as the type of keyboard that appears due to this will change.
240-
247+
241248
## Naming guideline
242249

243250
### General
244251

245252
- Always specify a <span style="color: #ff9900;">`DOCTYPE`</span>, in our case it will almost always be <span style="color: #ff9900;">``</span>, if you think anything else is more appropriate please contact your mentor.
246253
- The document character set is to be specified as UTF-8. Example : <span style="color: #ff9900;">`<meta charset="utf-8">`</span>
247-
- HTML should not be mixed with presentation logic.
254+
- HTML should not be mixed with presentation logic.
248255
- Do not use <span style="color: #ff9900;">`<center>`</span> and <span style="color: #ff9900;">`<marquee>`</span> tags or other tags or attributes that are associated with presentation.
249256
- Do not use <span style="color: #ff9900;">`align`, `width`, `height`</span> attributes in HTML. Use CSS attributes instead.
250257

@@ -276,8 +283,8 @@ If the field takes a number, please use `type="number"`, if it takes email use `
276283
- **Class** attributes should be in all **LOWER** case, with each word separated by a hyphen.
277284
- Image tags should always be accompanied by an <span style="color: #ff9900;">`alt`</span> attribute.
278285
- For input controls **ID** should be prefixed with the type of control.
279-
- Following prefix should be used when using element of given type -
280-
286+
- Following prefix should be used when using element of given type -
287+
281288
<table>
282289
<thead>
283290
<tr>
@@ -329,7 +336,7 @@ If the field takes a number, please use `type="number"`, if it takes email use `
329336
</tbody>
330337
</table>
331338

332-
339+
333340

334341
**Example**
335342

@@ -344,4 +351,4 @@ If the field takes a number, please use `type="number"`, if it takes email use `
344351
# Enforcing Tool and Config
345352

346353
- [W3C Validator](https://validator.w3.org/): Validate your HTML here.
347-
- Use ESLint for linting. https://github.com/BenoitZugmeyer/eslint-plugin-html
354+
- Use ESLint for linting. https://github.com/BenoitZugmeyer/eslint-plugin-html

0 commit comments

Comments
 (0)