Nesting Lists

Dealing with nested lists in HTML gave me pause for thought recently as though simple the markup is not immediately obvious. Intuitively I’d go for placing the markup for the nested list as a direct child of the parent list, like so,

<ul>
    <li>List item one</li>
    <li>List item two</li>
    <ul>
        <li>Subitem 1</li>
        <li>Subitem 2</li>
    </ul>
    <li>List item three</li>
</ul>

However, ul elements may only contain list item elements. Direct from the W3C wiki, “the nested list should relate to one specific list item.” Hence the markup should be,

<ul>
    <li>List item one</li>
    <li>List item two
      <ul>
          <li>Subitem 1</li>
          <li>Subitem 2</li>
      </ul>
    </li>
    <li>List item three</li>
</ul>

Minor point perhaps, but good markup is better for your users and makes your life easier in the long run.

All the best,

Tom