The following document outlines a style guide for HTML pages and templates.
- Always include a trailing slash in self-closing elements (e.g.
<br/>, not<br>). - Don't omit optional closing tags (e.g.
</li>or</body>).
- Use double quotes.
- Don't omit quotes.
- 4 spaces for indentation.
- Strip trailing whitespace.
HTML attributes can be indented 4 spaces OR aligned.
4-space indentation:
<marquee
behavior="alternate"
bgcolor="yellow"
scrollamount="15">
Hello World!
</marquee>Aligned:
<div href="http://www.example.com/"
class="link">
Link Text
</a>- Prefer
classfor identifying elements that need to be selected for styling or queried via JavaScript.
Whenever possible, avoid superfluous parent elements when writing HTML. Many times this requires iteration and refactoring, but produces less HTML. Take the following example:
<!-- Not so great -->
<span class="avatar">
<img src="...">
</span>
<!-- Better -->
<img class="avatar" src="..."><!DOCTYPE html>
<html>
...
</html>The HTML lang attribute should be included and its value should conform to
W3C standards and
RFC 1766.
The IE Document Mode selector (<meta http-equiv="X-UA-Compatible" content="IE=edge" />) is now deprecated and should not be used
(Source). Per
Microsoft's recommendation, use the IE11 Standards selector, <!DOCTYPE html>
instead.
<head>
<meta charset="utf-8">
</head>