Ordered and Unordered Lists

Concept

HTML has two general purpose list elements, and choosing between them is a single question: would reordering the items change the meaning?

• ul - an unordered list. The items belong together but the sequence carries no meaning. Ingredients, features, tags, links.
• ol - an ordered list. The sequence is part of the content. Steps, rankings, chapters, instructions.

Both contain li elements and nothing else. The bullets and the numbers are the browser default stylesheet, not the point of the element.

Syntax

<ul>
  <li>Cardamom</li>
  <li>Cinnamon</li>
  <li>Cloves</li>
</ul>

<ol>
  <li>Boil the water</li>
  <li>Add the tea leaves</li>
  <li>Simmer for three minutes</li>
</ol>

Why a list rather than paragraphs

A screen reader announces list, three items before reading the first one, then numbers each as it goes: item one of three. That gives the listener a shape before they commit to listening. It also lets them jump out of the list entirely, or skip to the next one.

Three paragraphs each starting with a dash character give none of that. The dash is read out as a punctuation mark or silently ignored, and the reader has no idea how many items are coming.

Attributes on ol

<!-- continuing after an interruption -->
<ol start="7">
  <li>Attach the bracket</li>
  <li>Tighten both bolts</li>
</ol>

<!-- a countdown -->
<ol reversed>
  <li>Best film of the year</li>
  <li>Runner up</li>
  <li>Third place</li>
</ol>

<!-- lettered clauses -->
<ol type="a">
  <li>The applicant must be over eighteen</li>
  <li>The applicant must reside in the district</li>
</ol>

type is a rare survivor: it is presentational, and yet it is still the right tool, because in legal and academic writing the letter or numeral is content. Clause (b) is referred to as (b). The CSS equivalent, list-style-type, would be lost if the stylesheet failed and cannot be copied as text.

An individual item can also override the count:

<ol>
  <li>First</li>
  <li value="10">Jumps to ten</li>
  <li>Eleven</li>
</ol>

Example

<section>
  <h2>Applying for a duplicate marksheet</h2>

  <h3>What you need</h3>
  <ul>
    <li>A photocopy of your identity card</li>
    <li>The original receipt, if you still have it</li>
    <li>Two passport photographs</li>
  </ul>

  <h3>The procedure</h3>
  <ol>
    <li>Fill in form D-2 at the examination office.</li>
    <li>Pay the fee at counter three and keep the receipt.</li>
    <li>Submit the form with the receipt attached.</li>
    <li>Collect the marksheet after ten working days.</li>
  </ol>
</section>

Explanation

The documents can be gathered in any order, so they are unordered. The procedure cannot - you cannot submit before you pay - so it is ordered. Getting this right is not pedantry: a reader listening to the page needs to know whether they are hearing a checklist or a sequence.

What may go inside an li

An li can contain anything, including block content. This surprises people who assume a list item holds a single line of text.

<ol>
  <li>
    <h3>Prepare the surface</h3>
    <p>Remove any loose paint with a wire brush, then wash and let dry.</p>
    <img src="/images/brush.jpg" alt="A wire brush against a flaking wall" width="600" height="400">
  </li>
  <li>
    <h3>Apply the primer</h3>
    <p>One thin coat. Two thin coats beat one thick coat every time.</p>
  </li>
</ol>

Styling notes

/* strip the default look for a navigation list */
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* keep it announced as a list in Safari with VoiceOver */
nav ul {
  list-style: none;
}
nav li::before {
  content: "";
}

One quirk worth knowing: Safari with VoiceOver stops announcing a list as a list when list-style: none is applied. Adding role="list" back onto the element restores it.

<ul role="list" class="unstyled">
  <li>...</li>
</ul>

Important rules

• Only li may be a direct child of ul or ol. Also permitted are script and template, which is rarely relevant.
• A nested list goes inside an li, never directly inside the parent ul.
• li outside a list container is invalid.
• The closing </li> is optional but should always be written.
• A list with one item is valid and often correct - a menu that will grow, for instance.

Common mistakes

• Using ul for steps that must happen in order.
• Faking a list with paragraphs and dash characters or bullet symbols.
• Using br between lines instead of list items, losing the count and the navigation.
• Putting a div directly inside a ul to group items. Group inside an li, or use two lists.
• Using nested lists to indent text that is not a list.
• Choosing ol because the design shows numbers, when the order is genuinely irrelevant. Numbered styling is available on a ul through CSS counters.

Best practices

• Ask the reorder question every time. It answers itself in a second.
• Keep items grammatically parallel - all fragments, or all full sentences.
• Use start rather than typing numbers into the text when a list continues after an interruption.
• Add role="list" when you remove list styling.
• Keep lists short. Beyond about nine items, consider grouping under subheadings.

Practice

1. Mark up a recipe: the ingredients and the method, choosing the right element for each and saying why.
2. Write an ordered list of clauses lettered a, b, c, and explain why type beats CSS here.
3. Build a list where each item contains a heading, a paragraph and an image.
4. Remove the bullets from a list with CSS, then confirm with a screen reader whether it is still announced as a list.