Lists and tables
The three kinds of list and when to use each, menus built from lists, and tables that a blind visitor can actually read.
By the end you can
- Pick the right list for the job
- Build a menu with items inside items
- Build a table a screen reader can read out properly
- Know when a table is the wrong answer
Easier if you did first
step 1 of 3
Three kinds of list
There are three lists in HTML, and you pick by asking one question: does the order matter?
A shopping list has no order. Bread, rice, oil. You can buy them in any order you like. That is <ul>, an unordered list. It shows with bullet points.
A recipe has an order. Boil the water first. Then add the rice. Doing it backwards ruins the food. That is <ol>, an ordered list. The browser numbers it for you.
Because the browser numbers it, never type the numbers yourself. If you do, and later add a step in the middle, every number after it is wrong.
The third one is for pairs: a word and its meaning, a label and a value. Like a dictionary. That is <dl>, a description list. The word goes in <dt> and the meaning goes in <dd>.
In a ul and an ol, every item goes inside <li>. Nothing else is allowed to sit directly inside the list.
Build one of each on the right.
<ul>
<li>Jollof rice</li>
<li>Waakye</li>
</ul>
<ol>
<li>Choose your menu</li>
<li>Confirm the date</li>
</ol>
<dl>
<dt>Minimum order</dt>
<dd>20 plates</dd>
</dl>What these words mean
- ul
- Unordered list: the order does not matter. Shows bullet points.
- ol
- Ordered list: the order matters. The browser adds the numbers.
- li
- One item in a list. Short for list item.
- dl, dt, dd
- A list of pairs. dt is the word, dd is its meaning.
- nesting
- Putting a list inside an item of another list, to make sub-items.
Easy to get wrong
<ol><li>1. Choose your menu</li></ol>
<ol><li>Choose your menu</li></ol>
The list already numbers itself, so this shows '1. 1. Choose your menu'. And when you add a step later, your typed numbers are all wrong.
<ul><p>Some text</p></ul>
<ul><li><p>Some text</p></li></ul>
Only <li> is allowed directly inside a list. The browser will move anything else somewhere you did not expect.
What we check
- The unordered list has three items
- There is an ordered list with three steps
- The description list has two terms
- Each term has a description
- You did not type the numbers by hand