Nested Lists

A nested list belongs inside a list item. It is not a sibling of the parent list’s items.

<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Backend
    <ul>
      <li>HTTP APIs</li>
      <li>Databases</li>
    </ul>
  </li>
</ul>

The nested ul is a child of the relevant li. This relationship tells the browser and assistive technologies that those items are subordinate to the parent item.

Deeply nested lists can become difficult to scan. If the content has several levels, consider whether it would be clearer as a set of headings and separate lists. A course syllabus, for example, might use a heading for each module and a list of its lessons rather than one huge nested list.

Use indentation in the source so the relationship is visible to the next person who edits it. The browser does not care about indentation, but maintainers do.