Hero image for HTML 💊


  • 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 />
      <option value="1" selected>1</option>
  • 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.




  • Use snake casing for file names.


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


  • 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="..." />
    # 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>
    <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>
    <ul class="list-feature">
      <li class="list-feature__item"></li>
      <li class="list-feature__divider"></li>
      <li class="list-feature__item"></li>
    <div class="card-product card-product--has-shadow">
      <img src="..." />
    <ul class="list-feature">
      <li class="list-feature__item list-feature__item--has-divider"></li>
      <li class="list-feature__item"></li>

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>


  • 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
      User Name
      <input id="username" type="text" />
      You accept the terms and conditions?
      <input id="username" type="checkbox" />
    # 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.


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

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

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