HTML Lists Ordered, Unordered, Nested Lists

Unordered and Ordered Lists

HTML lists express grouped items and their relationships. Use ul for unordered groups, ol for meaningful sequence or rank, and dl for name-value or term-description pairs. Choose list semantics before visual styling.

A ul contains li elements where sequence does not change meaning, such as features or navigation links. An ol is correct for procedures, rankings, and references where position matters. The start, reversed, and li value attributes can represent numbering semantics without hardcoding numbers into text.

Direct children of ul and ol should be li elements. Put headings, paragraphs, links, or nested lists inside each li rather than placing arbitrary siblings directly under the list.

Nested Lists

A nested list belongs inside the li that introduces its subgroup. Closing the parent li before the nested list breaks the semantic parent-child relationship even if CSS makes the result appear indented.

Keep nesting shallow enough to scan. For large hierarchies, provide headings, disclosure controls, or navigation landmarks instead of an unbroken wall of nested bullets.

Description Lists

A dl groups one or more dt names with one or more dd descriptions. It suits metadata, glossaries, questions and answers, or key-value summaries. It is not restricted to dictionary definitions and should not be used merely to obtain indentation.

Accessibility and Styling

Screen readers announce list structure and item counts, which helps users predict content. Removing markers with list-style: none can reduce visible affordance; navigation lists may intentionally do so, but spacing and focus styles must still communicate grouping.

Use CSS counters only when generated numbering adds presentational detail. Preserve the actual ol semantics when order matters. Avoid placing interactive controls in invalid structures, and ensure every linked list item has a clear accessible name.

Nested Procedure

<ol>
        <li>Prepare the project
          <ul>
            <li>Install dependencies</li>
            <li>Set environment variables</li>
          </ul>
        </li>
        <li>Run the test suite</li>
        <li>Build the release artifact</li>
      </ol>

Metadata Description List

<dl>
        <dt>Status</dt><dd>Ready for review</dd>
        <dt>Owner</dt><dd>Platform team</dd>
        <dt>Updated</dt><dd><time datetime="2026-07-13">13 July 2026</time></dd>
      </dl>

Before you move on