Skip to main content

HTML

Syntax​

  • Don’t capitalize tags, including the doctype.
  • Use soft tabs with four spaces
  • Nested elements should be indented once (two spaces).
  • Always use double quotes, never single quotes, on attributes.
  • Include a trailing slash in self-closing elements (View self-closing elements)
  • 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>

Language attribute​

From the HTML5 spec:

Authors are encouraged to specify a lang attribute on the root html element, giving the document’s language. This aids speech synthesis tools to determine what pronunciations to use, translation tools to determine what rules to use, and so forth.

Read more about the lang attribute in the spec.

<html lang="en">
  <!-- ... -->
</html>

IE compatibility mode​

There’s no need to include the Internet Explorer document compatibility <meta> tag these days, unless you need support for IE10 and older. The tag was dropped in IE11 and isn’t used in Microsoft Edge (legacy or otherwise).

For more information, read this awesome Stack Overflow article.

However, we still provide compatibility to the latest 3 versions. (View browserslistrc)

<!-- IE10 and below only -->
<meta http-equiv="x-ua-compatible" content="ie=edge" />

Character encoding​

Ensure proper content rendering by declaring an explicit character encoding. This also allows you to use regular characters instead of their HTML entities, like — instead of &emdash;, provided their encoding matches that of the document. For some reserved XML characters—like ampersand, non-breaking spaces, less/greater than, and quotes—you may still need to use the HTML character entities.

UTF-8 is the recommended encoding.

<head>
  <meta charset="utf-8" />
</head>
<body>
  <p>Use an em dash like so—no HTML entity required.</p>
</body>

Attribute order​

HTML attributes should come in this particular order for easier reading of code.

  • class
  • id, name
  • data-*
  • src, for, type, href, value
  • title, alt
  • role, aria-*
  • tabindex
  • style

Attributes that are most commonly used for identifying elements should come first—class, id, name, and data attributes. Miscellaneous attributes unique to specific elements come second, followed by accessibility and style related attributes.

<a class="..." id="..." data-toggle="modal" href="#">
  Example link
</a>

<input class="form-control" type="text" />

<img src="..." alt="..." />

Class name order​

Custom classes like o-*, c-*, u-* should come in first position, when using CSS frameworks like Bootstrap and naming methodologies like BEM.

<div class="c-main-navbar row row-cols-3">...</div>

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.

For further reading, consult the WhatWG section on boolean attributes

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

If you must include the attribute’s value, and you don’t need to, follow this WhatWG guideline:

If the attribute is present, its value must either be the empty string or […] the attribute’s canonical name, with no leading or trailing whitespace.

In short, don’t add a value.

<input type="text" disabled />

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

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

Reduce markup​

Whenever possible, avoid superfluous parent elements when writing HTML. Many times this requires iteration and refactoring, but produces less HTML.

<!-- Not so great -->
<span class="avatar">
  <img src="..." />
</span>

<!-- Better -->
<img class="avatar" src="..." />

Self-closing elements​

The HTML5 spec says that trailing slashes in self-closing elements are optional but templating files like in Fluid and React might require it. Therefore, we include trailing slashes with a space inserted before.

<!-- Don't -->
<img src="...">

<!-- Do -->
<img src="..." />