Lists for steps, items and definitions

Introduction

Look at any website and you will find lists everywhere: menus, search results, the steps of a recipe. Often they do not even look like lists, because CSS has removed the bullets. Marking a group as a list tells the browser, and anyone using a screen reader, that these items belong together and how many of them there are.

How it works

There are three kinds of list.

Unordered lists (ul) are for items whose order does not matter, such as ingredients. Browsers show bullets. Ordered lists (ol) are for items whose order does matter, such as steps or a top ten. Browsers number them, and they renumber automatically when you add an item, which is much better than typing the numbers yourself.

Both contain li (list item) elements. Only li may be a direct child of ul or ol. Anything else, including a heading, must go inside an li.

ol has useful attributes: start="5" starts the numbering at 5, reversed counts down, and type="a" uses letters.

Nesting. To place a list within a list, put the inner list inside an li. The structure says "this item has sub-items". A beginner's mistake is to place the inner ul directly inside the outer one, which breaks the rule that only li may be a child.

Description lists (dl) are for pairs: a term in dt, and its description in dd. They suit glossaries, FAQs and "Label: value" details on a product.

Why use a list when a few lines with br look the same? Because a screen reader announces "list, 5 items" before reading, so the listener knows what is coming and how long it will take. Also, with a real list, CSS can restyle every item at once.

Syntax

<ul>
  <li>Milk</li>
  <li>Eggs</li>
</ul>
<ol>
  <li>Mix</li>
  <li>Bake</li>
</ol>

Example

Line by line

1. The first ul lists ingredients, in no particular order.
2. The inner ul sits inside the li for "Spices", so it belongs to that item.
3. The ol holds the steps, and the numbers appear by themselves.
4. In the dl, dt is the term and dd is its meaning.

Expected result

A bulleted list with two sub-items indented under Spices, a list numbered 1 and 2, and a term with its description indented below it.

In the real world

Most navigation menus are ul elements containing links, styled with CSS into a horizontal bar. Search results and product grids are often lists too. Checkout flows, installation guides and documentation use ol for their steps.

Common mistakes

• Putting something other than li directly inside ul, such as a p or another ul.
• Typing numbers by hand in a ul rather than using ol.
• Using a list only to indent text. Indentation is the job of CSS.

Best practices

• Pick ol only if changing the order would change the meaning.
• Keep items parallel: start them all in the same grammatical way.
• Keep nesting shallow; more than two levels is hard to follow.

Summary

ul is for groups, ol is for sequences, and dl is for terms and descriptions. Only li belongs directly inside ul and ol, and a nested list goes inside an item. Marking a list as a list gives every reader, including the ones who cannot see it, a sense of its shape.

Mark lesson complete