3. Indented Elements

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

Indentation doesn’t effect how the page renders, but makes a huge difference in the readability of the code.

<!DOCTYPE html>

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

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


Here’s an example with nested lists:

development best-practice code elements indent