Lists in earnest

You have used <ul> since lesson 4 of html-basics. This lesson is the part nobody told you: lists are louder in the accessibility tree than they look on the page. A screen reader announces "list of 8 items" before reading the contents, then announces "list end" at the close. That announcement is help — it tells the user how much is coming. But it is also noise, and only useful when the contents really are a list.

That is the through-line of this lesson: pick a list when the items are a list (an enumeration of things at the same level), and pick something else when they are not.

Three kinds of list

HTML has three list elements, and each has a precise meaning.

• <ul> — an unordered list. Items belong together but the order does not matter. A list of ingredients, a navigation menu, a set of tags.
• <ol> — an ordered list. Order matters. Steps in a recipe, ranked search results, a numbered checklist.
• <dl> — a description list. Terms paired with their definitions. A glossary, a metadata table, a name → value mapping.

<!-- order doesn't matter -->
<ul>
<li>flour</li>
<li>water</li>
<li>salt</li>
</ul>

<!-- order matters -->
<ol>
<li>Mix the flour and water</li>
<li>Rest the dough for 30 minutes</li>
<li>Add the salt and knead</li>
</ol>

The two examples render almost identically — bullets on the first, numbers on the second. The difference is the meaning. A screen reader announces "list of 3 items" for the unordered list and "ordered list of 3 items" for the ordered one. The user knows the order matters before they hear a single ingredient.

Picking the wrong one rarely breaks the page. It just lies a little. A <ul> of recipe steps tells a screen-reader user that order is not important — when in fact you cannot add the salt before the dough exists.

Nesting and the start attribute

Lists can nest. A <li> can contain another <ul> or <ol>, and the inner list inherits the right depth in the outline. The browser's default styles indent each level and switch the bullet style for unordered lists.

<ul>
<li>Bread
  <ul>
    <li>Sourdough</li>
    <li>Rye</li>
  </ul>
</li>
<li>Pastry
  <ul>
    <li>Croissant</li>
    <li>Danish</li>
  </ul>
</li>
</ul>

The inner <ul> lives inside the <li> for "Bread", not as its sibling. That is what makes the nesting count: the inner items are children of the outer item.

For ordered lists, three attributes shape the numbering:

• start — start at a value other than 1: <ol start="5">.
• reversed — count down instead of up: <ol reversed>.
• type — switch numerals to letters or Roman: <ol type="A">, <ol type="i">.

<!-- A continuation list, picking up at 11 -->
<ol start="11">
<li>Eleventh item</li>
<li>Twelfth item</li>
</ol>

<!-- A countdown -->
<ol reversed>
<li>Three</li>
<li>Two</li>
<li>One</li>
</ol>

start is more useful than it sounds — when a long list is split across two pages or two <ol>s for layout reasons, it lets the second one pick up where the first ended. reversed is rarer but earns its place in countdowns and "newest first" rankings.

Description lists

The third list, <dl>, is the one most developers never reach for. It pairs terms with their descriptions — <dt> for the term, <dd> for the description. The semantic message is "these terms each have a value attached".

<dl>
<dt>flour</dt>
<dd>The ground grain that makes the dough.</dd>

<dt>starter</dt>
<dd>A live mix of flour, water, and wild yeast.</dd>

<dt>banneton</dt>
<dd>The basket the dough rests in to hold its shape.</dd>
</dl>

Use <dl> for a glossary, a list of metadata fields ("Author: ...", "Published: ...", "Edition: ..."), or a key → value mapping where the keys are short and the values are short.

You can pair multiple terms with one description (synonyms) or one term with multiple descriptions:

<dl>
<dt>boule</dt>
<dt>round loaf</dt>
<dd>A spherical loaf, the most traditional sourdough shape.</dd>
</dl>

Both "boule" and "round loaf" are terms; the same description applies. Browsers render the two <dt>s on separate lines, and a screen reader announces them both before the description.

When it's not a list

The hardest call: knowing when something looks like a list on the page but should not be marked up as one.

A few examples that are not lists:

• A row of social-media icons in the footer. Each is independent; they are not "members of a group of social icons". A few <a> tags, no <ul>.
• The breadcrumb at the top of a page (Home › Products › Sourdough). This is often marked as an ordered list (the order is the path), but the items are linked by › characters, not by their list-ness. Either form is acceptable; the convention is <ol> inside <nav aria-label="breadcrumb">.
• A series of related paragraphs in an article. Just because they could be bulleted doesn't mean they should be — flowing prose is prose, not a list.
• A grid of product cards. Each card is an <article>. Wrapping them in <ul> adds the announcement "list of 24 items" before the user gets a chance to skim — sometimes welcome, sometimes noise. Pick deliberately.

<!-- broken: not really a list -->
<ul>
<li>Welcome to the bakery.</li>
<li>We open at 7 every morning.</li>
<li>Try the sourdough on Friday.</li>
</ul>

A screen reader will announce "list of 3 items" before reading what is plainly a paragraph. Three <p>s carry the same content with no false promise of structure.

The test: if you read the items aloud, would they sound like an enumeration, or like flowing thought? If flowing, drop the list.