Episode 1 — Fundamentals / 1.5 — Semantic HTML and Browser Rendering

1.5.g — Ordered and Unordered Lists (ul, ol, li)

In one sentence: Lists encode grouped items and ordering in the DOM so browsers and assistive technologies can announce counts, nesting, and positions — using line breaks or dashes instead of lists throws that information away.

Navigation: ← 1.5.f — Headings · 1.5.h — Responsive images →

1. ul vs ol

ElementMeaningTypical use
<ul>Unordered groupNavigation links, feature bullets where sequence is irrelevant
<ol>Ordered groupSteps, rankings, legal clauses where sequence matters

Inside both: only <li> should be direct list item children (HTML will repair mistakes — do not rely on that).

2. Nesting lists

Nested lists express hierarchy:

<ol>
  <li>Boil water
    <ul>
      <li>Kettle</li>
      <li>Pot</li>
    </ul>
  </li>
  <li>Brew tea</li>
</ol>

Accessibility: screen readers announce depth and item counts (“2 of 5”). Deep nesting (>2–3 levels) becomes tedious — flatten when possible.

3. Useful ol attributes

AttributeEffect
startBegin counting at a given number
reversedDescending order for countdowns
typePresentation hint (1, a, A, i, I) — prefer CSS list-style-type for visual styling when possible

4. Navigation lists

A row of links in <nav> is commonly a ul of li > a — not because bullets must show, but because it is a list of destinations. CSS removes bullets with list-style: none while preserving semantics.

4b. Description lists (dl, dt, dd)

When items are term / definition pairs (glossaries, metadata rows), dl is more honest than a bullet list:

<dl>
  <dt>SKU</dt><dd>90210</dd>
  <dt>Weight</dt><dd>1.2 kg</dd>
</dl>

Screen readers expose term and definition relationships — do not misuse dl as a generic layout column unless the content is truly definitional.

4c. Continuing numbering in <ol>

Use the start attribute when a procedure continues across sections (<ol start="4">). For legal or academic outlines, li value="…" can set explicit item numbers — use sparingly and test announcements.

5. role="list" gotcha (awareness)

Some CSS resets set display: flex on <li> directly, which in certain browser/AT combinations historically affected list semantics. Modern guidance: if you must, preserve list role explicitly — but test. Prefer patterns known to preserve announcements in your target browsers.

6. Key takeaways

  1. Use ol when order carries meaning; otherwise ul.
  2. Nest lists to show hierarchy — do not fake with manual numbers.
  3. Nav link groups are legitimate lists even when unstyled.
  4. Test with a screen reader: do you hear list and positions?

Explain-It Challenge

Explain without notes:

  1. When you would pick ol over ul for a recipe.
  2. Why <p>- item one<br>- item two</p> is weaker than a list for accessibility.
  3. What reversed on <ol> is useful for (give one example).

Navigation: ← 1.5.f — Headings · 1.5.h — Responsive images →