HTML

Syntax

Use soft tabs with 2 spaces.
Nested elements should be indented once (2 spaces).
Always use double quotes, never single quotes, on attributes.
Don’t include a trailing slash in self-closing elements—the HTML5 spec says they’re optional.
Don’t omit optional closing tags (e.g. </li> or </body>).

<!DOCTYPE html>
<html>
  <head>
    <title>Page title</title>
  </head>
  <body>
    <img src="images/company-logo.png" alt="Company">
    <h1 class="hello-world">Hello, world!</h1>
  </body>
</html>

Includes

Per HTML5 spec, typically there is no need to specify a type when including CSS and JavaScript files as text/css and text/javascript are their respective defaults.

<!-- External CSS -->
<link rel="stylesheet" href="code-guide.css">

<!-- In-document CSS -->
<style>
  /* ... */
</style>

<!-- JavaScript -->
<script src="code-guide.js"></script>

Boolean attributes

A boolean attribute is one that needs no declared value. XHTML required you to declare a value, but HTML5 has no such requirement.

The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.

<input type="text" disabled>

<input type="checkbox" value="1" checked>

<select>
  <option value="1" selected>1</option>
</select>

Reducing markup

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 good

<span class="avatar">
  <img src="...">
</span>

Better

<img class="avatar" src="...">