Lists

Lists

Prerequisites: Formatting text

HTML has three kinds of lists.

Unordered lists

When order doesn't matter — shown with bullets:

<ul>
  <li>Milk</li>
  <li>Eggs</li>
  <li>Bread</li>
</ul>

Ordered lists

When order matters — steps, rankings — shown with numbers:

<ol>
  <li>Preheat the oven to 200 °C.</li>
  <li>Mix the dry ingredients.</li>
  <li>Bake for 25 minutes.</li>
</ol>

<ol start="10" reversed>
  <li>Tenth place</li>
  <li>Ninth place</li>
</ol>

<ol type="a">
  <li>First option</li>
  <li>Second option</li>
</ol>

start sets the first number; reversed counts down (10, 9).
type can be 1, a, A, i, or I — use it when the numbering style is part of the meaning (like a legal document); otherwise style markers with CSS.
<li value="5"> sets one item's number.

Nested lists

A nested list goes inside an li, not directly inside ul:

<ul>
  <li>Fruit
    <ul>
      <li>Apples</li>
      <li>Pears</li>
    </ul>
  </li>
  <li>Vegetables</li>
</ul>

Description lists

For name–value groups: glossaries, metadata, FAQs:

<dl>
  <dt>HTML</dt>
  <dd>The structure of a web page.</dd>
  <dt>CSS</dt>
  <dd>The presentation of a web page.</dd>
  <dt>Author</dt>
  <dt>Editor</dt>
  <dd>Grace Hopper</dd>
</dl>

A term (dt) can have several descriptions (dd), and several terms can share one description.

Lists are for more than bullets

Navigation menus, image galleries, search results, and card grids are all lists of things. Marking them up as lists tells screen-reader users "list, 5 items" — useful information. CSS can remove the bullets and lay items out in a row or grid.

Common mistakes

<!-- Wrong: a list may only contain li elements directly -->
<ul>
  <li>Apples</li>
  <ul>
    <li>Granny Smith</li>
  </ul>
</ul>

error: Element 'ul' not allowed as child of element 'ul' in this context. (Suppressing further errors from this subtree.)

Practice

Mark up a to-do list with three items where the second item has two sub-tasks, then a description list of two keyboard shortcuts.

Show solution

<ul>
  <li>Buy groceries</li>
  <li>Clean the house
    <ul>
      <li>Kitchen</li>
      <li>Bathroom</li>
    </ul>
  </li>
  <li>Call Grandma</li>
</ul>
<dl>
  <dt><kbd>Ctrl</kbd> + <kbd>C</kbd></dt>
  <dd>Copy</dd>
  <dt><kbd>Ctrl</kbd> + <kbd>V</kbd></dt>
  <dd>Paste</dd>
</dl>