You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: coding-standards/html.md
+15-8Lines changed: 15 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,10 +7,10 @@ Following are additional guidelines to be followed.
7
7
**Note**: The following rules will override the ones provided in google style guide.
8
8
9
9
## General
10
-
**HTML is a Markup Language**:
10
+
**HTML is a Markup Language**:
11
11
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.
12
12
13
-
**Always Specify a DOCTYPE**:
13
+
**Always Specify a DOCTYPE**:
14
14
Always specify the doctype at the top of the page. Ideally, this should be:
15
15
16
16
```html
@@ -109,6 +109,7 @@ Do NOT use `<br>` tags to add margin or padding. Instead, use CSS. If you find y
109
109
**Do Not Omit Closing Tags**: Although HTML5 allows you to omit closing tags, always close your tags.
110
110
111
111
### Write One List Item per Line
112
+
112
113
**Bad**
113
114
```html
114
115
<ul>
@@ -128,11 +129,13 @@ Do NOT use `<br>` tags to add margin or padding. Instead, use CSS. If you find y
128
129
129
130
### Avoid Ending `/` for Empty Elements
130
131
For empty elements, avoid ending the tag with a `/`.
132
+
131
133
**Bad**
132
134
```html
133
135
<imgalt="HTML Best Practices"src="/img/logo.png" />
134
136
<br />
135
137
```
138
+
136
139
**Good**
137
140
```html
138
141
<imgalt="HTML Best Practices"src="/img/logo.png">
@@ -141,12 +144,14 @@ For empty elements, avoid ending the tag with a `/`.
141
144
142
145
### Proper Progression of Heading Tags
143
146
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
+
144
148
**Bad**
145
149
```html
146
150
<h1>My Page</h1>
147
151
<h3>Joe Black</h3>
148
152
<h4>Jon Doe</h4>
149
153
```
154
+
150
155
**Good**
151
156
```html
152
157
<h1>My Page</h1>
@@ -174,6 +179,7 @@ This will ensure that the resource is downloaded rather than opened. This works
174
179
```
175
180
176
181
### Omit Boolean Attribute Value
182
+
177
183
**Bad**
178
184
```html
179
185
<audioautoplay="autoplay"src="/audio/theme.mp3">
@@ -191,6 +197,7 @@ Unless needed avoid giving ID attributes to every element that you create.
191
197
192
198
### Boolean Attributes
193
199
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
+
194
201
**Bad**
195
202
```html
196
203
<inputtype="text"disabled="true">
@@ -237,14 +244,14 @@ Ensure that you specify a `maxlength` for every textbox control that you use.
237
244
238
245
### Use Proper Input Type
239
246
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
+
241
248
## Naming guideline
242
249
243
250
### General
244
251
245
252
- Always specify a <spanstyle="color: #ff9900;">`DOCTYPE`</span>, in our case it will almost always be <spanstyle="color: #ff9900;">``</span>, if you think anything else is more appropriate please contact your mentor.
246
253
- The document character set is to be specified as UTF-8. Example : <spanstyle="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.
248
255
- Do not use <spanstyle="color: #ff9900;">`<center>`</span> and <spanstyle="color: #ff9900;">`<marquee>`</span> tags or other tags or attributes that are associated with presentation.
249
256
- Do not use <spanstyle="color: #ff9900;">`align`, `width`, `height`</span> attributes in HTML. Use CSS attributes instead.
250
257
@@ -276,8 +283,8 @@ If the field takes a number, please use `type="number"`, if it takes email use `
276
283
-**Class** attributes should be in all **LOWER** case, with each word separated by a hyphen.
277
284
- Image tags should always be accompanied by an <spanstyle="color: #ff9900;">`alt`</span> attribute.
278
285
- 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
+
281
288
<table>
282
289
<thead>
283
290
<tr>
@@ -329,7 +336,7 @@ If the field takes a number, please use `type="number"`, if it takes email use `
329
336
</tbody>
330
337
</table>
331
338
332
-
339
+
333
340
334
341
**Example**
335
342
@@ -344,4 +351,4 @@ If the field takes a number, please use `type="number"`, if it takes email use `
344
351
# Enforcing Tool and Config
345
352
346
353
-[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