Choose ordered, unordered, and description lists

Learning objectives

Choose a list by meaning; nest a sublist inside an item; associate terms with descriptions.

Prerequisites

Know how to nest elements and write paragraphs.

Understand the markup

Use ul when the items form a set and their order does not change the meaning. A shopping list is usually unordered. Use ol when sequence or rank matters, such as a recipe or a set of installation steps. Use dl for terms and their descriptions, including a glossary or a compact set of product specifications.

Each direct content item of ul or ol is an li element. A list item can contain paragraphs and a nested list. Put the nested list inside the relevant li rather than between two list items. This preserves the parent-child relationship when a screen reader announces the list structure.

An ordered list can start at an integer other than one using start. The reversed boolean attribute reverses its numbering direction. Use these when the numbering carries actual meaning, not just to create a visual effect. CSS can change marker appearance without changing the list's semantic type.

In a description list, dt introduces a term and dd provides its description. More than one term can share a description, and a term can have more than one description. Do not use a description list merely to indent arbitrary paragraphs. Choose structure first, then apply layout through CSS.

Try a working example

<h1>Make a cup of tea</h1>
<ol>
  <li>Heat fresh water.</li>
  <li>Steep the leaves.</li>
  <li>Pour into a cup.</li>
</ol>

Expected output

The three steps appear in a numbered sequence. Removing the CSS does not remove the order represented by the markup.

Another example

<dl>
  <dt>Loan period</dt><dd>Three weeks</dd>
  <dt>Renewals</dt><dd>Two renewals per item</dd>
</dl>

Common mistakes

Typing bullet characters into separate paragraphs loses list relationships. A sublist outside its parent li also gives an incorrect structure.

Accessibility and browser notes

Native list semantics communicate grouping and item count. Test custom list styling with assistive technology if it removes markers.

Check your work

Read the list aloud and ask whether changing the item order would change its meaning. If the answer is yes, an ordered list is usually appropriate. For a glossary, ask whether each description explains a named term rather than representing another peer item. Inspect nested lists in developer tools to confirm that they remain children of the intended list item.

Practice

Create an unordered packing list. Add two nested items under a list item called Documents.

<ul>
  <li>Water bottle</li>
  <li>Documents
    <ul><li>Travel ticket</li><li>Identity document</li></ul>
  </li>
</ul>

Related lesson

Build an accessible data table

Specifications and further reading

WHATWG HTML Living Standard

Structure should survive sorting and styling

If an interface lets someone reorder steps, ask whether the new sequence changes the instructions. For a recipe or installation guide it usually does; the stored content order must then reflect the selected sequence, not just a visual CSS rearrangement. Assistive technology and copied text generally follow the source rather than your visual arrangement.

List items can contain rich content. A procedure step might include a heading, two paragraphs, and a nested caution list, all inside one li. The marker numbers the whole step, not merely its first sentence. This is often clearer than creating a fresh ordered list for every paragraph and manually setting start values to simulate continuity.

For a definition list, keep the pairing meaningful when the content changes. A term can have multiple descriptions, and several terms can share a description, but the source still needs a sensible sequence. Do not use dt for arbitrary left-column text simply because a CSS grid makes it look like a form. Actual form labels and their controls need their own relationships.