2.4 — Lists

HTML provides specialized structural models for organizing sequential or hierarchical data collections into clean block‑level groupings. These models fall into two families: linear itemized lists (unordered and ordered) and associative key‑value pairs (description lists).

Unordered Lists (`<ul>`)

An unordered list is used when the sequence of the items does not change the core meaning of the data. The browser’s default stylesheet prefixes each item with a filled bullet (typically a disc).

The root container is <ul>…</ul>. Inside, each entry is a list item element: <li>…</li>.

<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Cherries</li>
</ul>

Apples
Bananas
Cherries

Figure 2.16: An unordered list – order does not matter.

Ordered Lists (`<ol>`)

An ordered list is used when the exact sequence defines a procedural hierarchy or step‑by‑step logic. The browser automatically numbers the items.

The root container is <ol>…</ol>, and children are again <li> elements.

<ol>
  <li>Preheat oven to 180°C</li>
  <li>Mix ingredients</li>
  <li>Bake for 20 minutes</li>
</ol>

Controlling the Numbering

Three attributes, placed inside the opening <ol> tag, give you precise control over the index sequence:

start – Sets the initial counter value. For example, <ol start="5"> begins at 5.
reversed – A boolean attribute (no value). When present, the list counts downwards.
type – Changes the bullet/numbering style:
- 1 – decimal numbers (default)
- a – lowercase letters
- A – uppercase letters
- i – lowercase Roman numerals
- I – uppercase Roman numerals

<ol start="10" reversed type="I"> … </ol>

Final step
Middle step
First step

Figure 2.17: Ordered list – start="10" reversed type="I".

The Strict Parent‑Child Constraint

A <li> element must be a direct child of a <ul> or <ol>. It cannot stand alone. The DOM expects this exact hierarchy; stray list items outside a list root are invalid.

VALID STRUCTURE

<ul><li>…</li></ul> – correct.
<li>…</li> alone – incorrect.

Description Lists (`<dl>`)

For metadata pairings, glossaries, or specification data, HTML provides an associative model using the description list element: <dl>.

Term: <dt> – the lookup key or name (e.g., a glossary word).
Description: <dd> – the data or definition bound to the term.

Multiple <dd> blocks can belong to a single <dt>, and multiple <dt> entries can share the same <dd>.

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

HTML: HyperText Markup Language
CSS: Cascading Style Sheets

Figure 2.18: Description list – terms and their associated data.

Nesting Lists – Multi‑Tier Hierarchies

To create sub‑steps or nested categories, the inner list must be placed entirely inside an <li>. You cannot place a <ul> directly inside another <ul> – it must be wrapped by a list item.

The correct pattern:

<ol>
  <li>Turn on the computer
    <ul>
      <li>Press the power button</li>
      <li>Wait for the startup sound</li>
    </ul>
  </li>
  <li>Log in</li>
</ol>

Turn on the computer
- Press the power button
- Wait for the startup sound
Log in

Figure 2.19: Proper nested list – the inner list is inside an <li>.

TAKEAWAY

Unordered lists group items where order is irrelevant; ordered lists define sequential procedures; description lists pair terms with data. Every list item must be directly inside a list root. To nest lists, always place the inner list inside a list item. Master these patterns and you build clean, machine‑readable document structures that scale flawlessly.

Unordered Lists (<ul>)

Ordered Lists (<ol>)