2. HTML Coding Standards
Indentation
Validation
Doctype
Use of Semantic Elements
Use Practical ID & Class Values
Use Lower Case Markup
Comments
5. Doctype
HTML 5
<!DOCTYPE html>
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
XHTML 1.0 Strict
<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
6. Use of Semantic Elements
Search Engine Friendly
Shorter and download fasts
Accessibility
7. Use Practical ID & Class Values
relating to the content itself, not the style of the content
Bad Code
<p class="red">Error! Please try again.</p>
Good Code
<p class="alert">Error! Please try again.</p>
8. Use Lower Case Markup
Better Readability.
Standard
Common Practise
11. Structure
Use tabs, not spaces for indentation
two blank lines between sections.
one blank line between blocks in a section.
Each selector should be on its own line.
Property-value pairs should be on their own line.
The closing brace should be flush left.
Eg.
#selector-1,
#selector-2,
#selector-3 {
background: #fff;
color: #000;
}
12. Selectors
Use lowercase and separate words with hyphens when naming selectors.
Refrain from using over-qualified selectors.
Attribute selectors should use double quotes around values.
Eg.
#comment-form {
margin: 1em 0;
}
input[type="text"] {
line-height: 1.1;
}
13. Properties
Should be followed by a colon and a space.
Use lowercase, except for font names and vendor-specific properties.
Use shorthand.
16. Values
Space before the value, after the colon.
Always end in a semicolon.
Use double quotes rather than single quotes.
0 values should not have units unless necessary.
Line height should also be unit-less, unless necessary.
17. Media Queries
Keep media queries grouped by media at the bottom of the stylesheet.
Rule sets for media queries should be indented one level in.
Eg:
@media all and (max-width: 699px) and (min-width: 520px) {
/* Your selectors */
}
18. Commenting
For sections and subsections:
/**
* #.# Section title
*
* Description of section, whether or not it has media queries, etc.
*/
.selector {
float: left;
}
19. Commenting
For inline:
/* This is a comment about this selector */
.another-selector {
position: absolute;
top: 0 !important; /* I should explain why this is so !important */
}
