3. Indented Elements

There isn’t a total protocol for indent depth, although the standard procedure is to indent one tab (or two spaces) for each new element that is a child of the one above it.

Indentation doesn’t affect how the page renders but makes a huge difference in the code’s readability.

HTML
<!DOCTYPE html>
<html>
  <body>

    <!-- This is a mess, and considered in poor taste: -->
    <menu id="hot-mess">
            <ul>
    <li><a href="#">Home</a>
      </li><li><a href="/about">About</a></li><li>
                    <a href="/contact">Contact Me</a></li></ul>
    </menu>

    <!-- Rather, this is considered best practice: -->
    <menu id="class-act">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact Me</a></li>
      </ul>
    </menu>

  </body>
</html>

Here’s an example with nested lists:


development best-practice code elements indent