Session 3 — Lists

You will structure grouped content with HTML's three list types: ordered (ol, meaning the sequence matters), unordered (ul, sequence does not), and description lists (dl with dt terms and dd details). You will also master nesting — lists inside list items — and apply it to a real café menu. The habit: choose the list type by what the items mean, and keep every nested list inside its parent item.

Plan: ideas → worked lists → bridge → short drills → reveal.

Time: about 50–60 minutes if you trace the nesting tree of every list before reading the reveal.

Session 3 — Lists

The one-paragraph story

Lists turn loose text into structure. HTML offers three kinds: ordered lists (ol, numbered), unordered lists (ul, bulleted), and description lists (dl, term-and-detail pairs). Lists nest — a list item can contain another list — which is how menus with sub-groups, multi-level navigation, and step-by-step instructions are built. A list is a block container holding list items (li), and each item can itself hold headings, paragraphs, or another list. This session builds the Harbor Café's menu as a nested list and learns the discipline of choosing the list type by what the items mean.

---

The three list types

Unordered lists — for items whose order does not matter:

<ul>
  <li>House espresso</li>
  <li>Pour-over</li>
  <li>Cold brew</li>
</ul>

The browser draws a bullet before each item. Use ul when reordering the items would not change the meaning — a shopping list, a set of options, a list of names.

Ordered lists — for items whose sequence is the meaning:

<ol>
  <li>Grind 20 g of beans</li>
  <li>Bloom for 30 seconds</li>
  <li>Pour in three stages</li>
</ol>

The browser numbers the items (1, 2, 3). Use ol when the order is essential — steps in a recipe, ranking, instructions.

Description lists — for term-and-detail pairs:

<dl>
  <dt>Espresso</dt>
  <dd>A 30 ml shot pulled under high pressure.</dd>
  <dt>Flat white</dt>
  <dd>Espresso with a thin layer of steamed milk.</dd>
</dl>

dt is the term, dd the description. Use dl for glossaries, Q&A lists, and any place where each item is really two pieces — a name and its explanation. (This is the modern replacement for the older term "definition list".)

---

Anatomy of a list

Every list is a container element (ul, ol, or dl) that holds items. For ul and ol, the only direct children are li elements:

<ul>
  <li>Coffee</li>
  <li>Tea</li>
</ul>

An li may contain more than text: it can hold a whole paragraph, a heading, or — crucially — another list.

---

Nested lists

Putting a list inside an item creates a sub-list:

<ul>
  <li>Coffee
    <ul>
      <li>Espresso</li>
      <li>Brewed</li>
    </ul>
  </li>
  <li>Pastries</li>
</ul>

The sub-list sits inside the "Coffee" item, indented. Browsers render nested lists with deeper indentation and often a different bullet shape, which is exactly the visual language of menus and outlines. The rule is: the nested ul goes inside the li, not after it — the sub-list is part of that item's content.

<!-- Right: sub-list inside the item -->
<li>Coffee
  <ul>…</ul>
</li>

<!-- Wrong: sub-list floating between items -->
<li>Coffee</li>
<ul>…</ul>
<li>Pastries</li>

---

A real menu from these pieces

The Harbor Café menu combines both ideas — a top-level list whose items hold sub-lists:

<h2>Menu</h2>
<ul>
  <li>
    <strong>Coffee</strong>
    <ul>
      <li>House espresso</li>
      <li>Cappuccino</li>
      <li>Cold brew</li>
    </ul>
  </li>
  <li>
    <strong>Pastries</strong>
    <ul>
      <li>Morning bun</li>
      <li>Cardamom twist</li>
    </ul>
  </li>
</ul>

Read it top to bottom: an h2 heading, then one outer ul; each of its two lis holds a strong label and its own inner ul. The nesting is two levels deep, and every inner list closes before its parent item closes.

---

When lists go wrong

The most common list mistakes:

• Forgetting the li — a ul with text directly inside is invalid; text belongs in items.
• Misplaced nesting — putting the inner list after </li> instead of inside it, which breaks the hierarchy.
• Choosing the wrong type — using ol for a set of options or ul for steps. Both render, but the numbering (or lack of it) silently communicates the wrong meaning.

A quick check: if reordering the items changes the meaning, the list is ordered (ol). If not, it is unordered (ul).

---

Pitfalls to watch for

• ul/ol contain only li items; text must live inside the items.
• Nested lists live inside the parent item, not between items.
• dl pairs dt (term) with dd (detail) — usually one or several dd per dt.
• Choose by meaning, not by looks: order matters → ol; order does not → ul; name-and-explanation → dl.

Session 3 — Worked examples

Example A — An unordered list: today's roasts

<ul>
  <li>Colombia — La Esperanza</li>
  <li>Ethiopia — Yirgacheffe</li>
  <li>Sumatra — Kerinci</li>
</ul>

Three items, order irrelevant — the roaster's chalkboard could list them in any order. Rendered: three bullets, indented under the list.

---

Example B — An ordered list: brew steps

<ol>
  <li>Grind 20 g of beans.</li>
  <li>Bloom with 40 g of water for 30 seconds.</li>
  <li>Pour the rest in three slow stages.</li>
  <li>Serve within two minutes.</li>
</ol>

Order is the meaning — step 2 before step 3 matters. Rendered: numbered 1–4. Swap two items and the instructions become wrong, which is why this list is ol, not ul.

---

Example C — A description list: menu glossary

<dl>
  <dt>Espresso</dt>
  <dd>A 30 ml shot of coffee pulled under nine bars of pressure.</dd>
  <dt>Americano</dt>
  <dd>Espresso lengthened with hot water.</dd>
  <dt>Macchiato</dt>
  <dd>Espresso marked with a spoonful of foam.</dd>
</dl>

Each term (dt) pairs with its detail (dd). A glossary, a menu's "ask us what this is", a product page's specs — all description lists.

---

Example D — Nested list: the full menu

<ul>
  <li>
    <strong>Coffee</strong>
    <ul>
      <li>House espresso</li>
      <li>Cappuccino</li>
      <li>Cold brew</li>
    </ul>
  </li>
  <li>
    <strong>Pastries</strong>
    <ul>
      <li>Morning bun</li>
      <li>Cardamom twist</li>
    </ul>
  </li>
</ul>

Trace the nesting: the outer ul holds two lis. Each li holds a strong label and an inner ul. The inner ul closes (</ul>) before its parent li closes (</li>). Reading the closing tags top to bottom: </ul>, </li>, </ul>, </li>, </ul> — every inner list closes before its item.

---

Example E — Fixing a broken nesting

<!-- Broken -->
<ul>
  <li>Coffee</li>
  <ul>
    <li>Espresso</li>
  </ul>
</ul>

<!-- Fixed -->
<ul>
  <li>Coffee
    <ul>
      <li>Espresso</li>
    </ul>
  </li>
</ul>

In the broken version the inner list floats between items — technically tolerated by browsers but semantically wrong. The fix moves the sub-list inside the "Coffee" item, making the hierarchy explicit.