HTML 💊

Hero image for HTML 💊

Formatting

  • Use soft-tabs with a two space indent.

  • Prefer double quotes for attributes. Even though quotes around attributes is optional, always put quotes.

    <form method='post' class='form-inline'>
    
    <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.

    &
    ©
    
    &amp;
    &copy;
    

Naming

Files

  • Use snake casing for file names.

    contactUs.html
    contact-us.html
    
    contact_us.html
    

IDs and class names

  • Use camel case for IDs to differentiate it from class names.

    <div id="app-container">
    <div id="AppContainer">
    
    <div id="appContainer">
    
  • Use kebab case for class names.

    <div class="appContainer">
    <div class="AppContainer">
    
    <div class="app-container">
    

Semantics & Markup

Principles

  • 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="..." />
    
  • Pick wisely the right HTML tag. Each tag has a semantics purpose and value so respect it.

    <div class="navigation-app"></div>
    <div class="main-content"></div>
    <span>&copy; 2019 Nimble</span>
    
    <nav role="" class="navigation-app"></nav>
    <main></main>
    <small>&copy; 2019 Nimble</small>
    
  • Do NOT use empty tags for UI effect rendering. Use CSS (especially pseudo-selectors before and after) to render those effects.

    <div class="card-product">
      <img src="..." />
      <div class="shadow"></div>
    </div>
    
    <ul class="list-feature">
      <li class="list-feature__item"></li>
      <li class="list-feature__divider"></li>
      <li class="list-feature__item"></li>
    </ul>
    
    <div class="card-product card-product--has-shadow">
      <img src="..." />
    </div>
    
    <ul class="list-feature">
      <li class="list-feature__item list-feature__item--has-divider"></li>
      <li class="list-feature__item"></li>
    </ul>
    

Text and Lists

  • Paragraphs of text must always be placed in a <p> tag. Never use multiple <br> tags.

  • Items in list form must always be in <ul>, <ol>, or <dl>. Never use a set of <div> or <p>.

  • Use links <a> solely when redirecting 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, toggler.

    <a href="#">Show navigation</a>
    <a href="javascript:void">Show navigation</a>
    
    <button type="button">Show navigation</button>
    
  • Always add the appropriate attribute type to buttons:

    <button>Show navigation</button>
    
    <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 to let the browser to load the footer before a table full of data.