HTML Style Guide
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

HTML Style Guide


  • Use UTF-8.

  • Use 2 space indent, no tabs.

  • Keep lines fewer than 80 characters.

  • Avoid trailing whitespace.

  • When a single tag takes more than one line, align the first letter of each attribute to the first letter of the first attribute. Leave a blank line after the tag end.


* Encode HTML special characters with the `&` notation.

## Syntax

* Use double quotes on all attributes.

* Don't omit optional closing tags.

* Use `<!DOCTYPE html>` at the beggining of the page.

* Use the language attribute on the `html` tag, like so: `<html lang="en-us">`.

* Use the `X-UA-Compatible` meta tag [for IE compatibility](

* Use the `charset` meta tag with `UTF-8` as its value.

* Don't specify a `type` for stylesheet `link` tags and javascript `script`

* Write the HTML attributes in this particular order:
1. `class`
2. `id`, `name`
3. `data-*`
4. `src`, `for`, `type`, `href`, `value`
5. `title`, `alt`
6. `aria-*`, `role`

Classes make for great reusable components, so they come first. IDs are more
specific and should be used sparingly (e.g., for in-page bookmarks), so they
come second.

* Use a value for all attributes, including `checked` and `selected`.

* Never use `<br>` tags.

* Every form input that has text attached should utilize a `<label>` tag. When
the tag wraps the input (usually with checkboxes/radiobuttons), there's no
need for a `for` attribute.

* Use trailing slashes in self-closing tags, like `<img>` and `<input>`.

* Don't set `tabindex` manually, rely on the browser.

* For tables, use the `<caption>`, `<thead>`, `<tfoot>` (optional), `<tbody>`
and `<th>` tags.

* Use the `scope` attribute on `<th>` tags to specify the scope.

* Try to avoid using `colspan` and `rowspan` on tables.

* Use the `alt` attribute with a meaningful text for all `<img>`.

* Don't use `<img>` tags for presentational purposes.

* Use `<em>` tags to emphasize text, avoid using `<strong>`.

* Try to avoid using the `<iframe>` tag, but if you do, add a meaningful `title`
attribute to it.

* Don't use HTML5 deprecated tags like `<i>`, `<b>` and `<font>`.

* Put stylesheets at the bottom of the `<head>` and scripts at the bottom of the
`<body>`, unless you can't avoid it.

* Include a single `<h1>` tag on every page.

* Don't leave empty `<a>` tags, add text and hide it with CSS.

* `<div>` and `<span>` have no semantic meaning, don't use them to separate
semantic content.

## General

* Avoid using comments.

* HTML documents should be readable without a stylesheet.

* Always take accessibility into account.

* Use links to convey navigational actions and buttons to convey modifying
server-side actions.

* Write as little HTML as possible.

* Keep the code simple.

* Be consistent.

* Use common sense.

## Sample
<!DOCTYPE html>
<html lang="en-us">
  <title>Organization | Overview</title>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=Edge" />

  <link href="/stylesheets/application.css" media="screen" rel="stylesheet" />
  <link href="/assets/images/favicon.png" rel="shortcut icon" type="image/png" />
  <header class="mainHeader">
    <a href="/"><img src="logo.png" alt="Company Logo" /></a>
      <h2>We code</h2>
    <nav class="navMenu">
          <a class="navMenu-item" href="/">Home</a>
          <a class="navMenu-item is-active" href="/overview">Overview</a>
  <section class="veryVeryLongClassName"

    <p>This is the explanation...</p>

  <script src="/javascripts/application.js"></script>