HTML 💊

Hero image for HTML 💊

Formatting

  • Use soft-tabs with a two space indent.
  • Paragraphs of text should always be placed in a <p> tag. Never use multiple <br> tags.
  • Items in list form should always be in <ul>, <ol>, or <dl>. Never use a set of <div> or <p>.
  • Prefer double quotes for attributes. Even though quotes around attributes is optional, always put quotes.
# Bad
<form method='post' class='form-inline'>

# Good
<form method="post" class="form-inline">
  • Many attributes don’t require a value to be set, like disabled or checked, so don’t set them.
<input type="text" disabled />

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

<select>
  <option value="1" selected>1</option>
</select>
  • Avoid writing closing tag comments to delimit HTML blocks like <!-- /.element -->. This just adds to page load time. Plus, most editors have indentation guides and open-close tag highlighting.
  • Prefer the HTML Escape version of characters over their symbol
# Bad
&
©

# Good
&amp;
&copy;

Naming

Files

  • Use snake casing for file names:
# Bad
contactUs.html
contact-us.html

# Good
contact_us.html

IDs and class names

  • Use camel case for IDs to differentiate it from class names
# Bad
<div id="app-container">
<div id="AppContainer">

# Good
<div id="appContainer">
  • Use snake case for class names
# Bad
<div class="appContainer">
<div class="AppContainer">

# Good
<div class="app-container">

Semantic & Markup

Keep it simple

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

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

# Better
<img class="user-avatar" src="..." />
  • Use links <a> solely when you need to redirect to another page or section. As a consequence it must contain an href attribute.
  • Use buttons for everything else e.g. form submission, interactive components e.g. dropdown, tabs, toggle.
# Bad
<a href="#">Show navigation</a>
<a href="javascript:void">Show navigation</a>

# Good
<button type="button">Show navigation</button>
  • Always add the appropriate attribute type to buttons:
# Bad
<button>Show navigation</button>

# Good
<button type="button">Show navigation</button>

Forms

  • Form inputs that has text attached must utilize a <label> tag. Prefer the wrapping format for radio and checkbox inputs as clicking the label toggle the state of the input which is a UX win.
# Label wrapping format
<label>
  User Name
  <input id="username" type="text" />
</label>
<label>
  You accept the terms and conditions?
  <input id="username" type="checkbox" />
</label>

# Unwrapped label format
<label for="username">User Name</label>
<input id="username" type="text" />
  • Form buttons must always include an explicit type. Use primary buttons for the type="submit" button and regular buttons for type="button".
  • The primary form button should come first in the DOM, especially for forms with multiple submit buttons. The visual order should be dealt with in CSS.

Tables

Make use of <thead>, <tfoot>, <tbody>, and <th> tags (and scope attribute) when appropriate.

<table summary="This is a chart of invoices for 2011.">
  <thead>
    <tr>
      <th scope="col">Table header 1</th>
      <th scope="col">Table header 2</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Table footer 1</td>
      <td>Table footer 2</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Table data 1</td>
      <td>Table data 2</td>
    </tr>
  </tbody>
</table>

<tfoot> goes above <tbody> for speed reasons. You want the browser to load the footer before a table full of data.