Lists
- Kim Collins (Unlicensed)
Using the correct semantic list elements for your content is important. It helps different users (e.g. screen reader users) to understand and navigate your page.
While each type of list has a default visual style provided by the browser, each can be styled in many ways. Even if you are styling your list to not “look like” a list (e.g. in a navigation), use the correct semantic list markup to convey the relationships of the content to all users.
Screen reader interaction and information
Keyboard shortcuts allow screen reader users to navigate a page by lists, and to navigate between list items within a list.
With default screen reader settings, users are told how many list items are in a list. This helps users to decide whether they want to read the content.
Types of lists
Unordered List
The unordered list (<ul>) is for a list of content where the order of list items is not important. An example might be a grocery list.
Each list item is marked up as an <li> element.
The default visual style for unordered lists is a bulleted list.
<ul> <li>kale</li> <li>lemons</li> <li>apples</li> </ul>
Unordered list display
kale
lemons
ice cream
Ordered List
The ordered list (<ol>) is for a list of content where the order of list items is important. An example might be a set of instructions.
Each list item is marked up as an <li> element.
The default visual style for ordered lists is a numbered list.
<ol> <li>Open ice cream tub</li> <li>Scoop ice cream into bowl</li> <li>Eat ice cream</li> </ol>
Ordered list display
Open ice cream tub
Scoop ice cream into bowl
Eat ice cream
Description List
A description list (<dl>) presents a list of terms (<dt>) and their descriptions (<dd>).
Examples of appropriate uses of description lists include:
a glossary
list of microdata
list of people’s names with a brief bio for each person
The default visual style for description lists places each <dt> and <dd> on its own line. <dd> elements are indented beneath the preceding <dt>.
Note that each term-description grouping can include multiple terms with a single description, a single term with multiple descriptions, or multiple terms for multiple descriptions.
<dl> <dt>kale</dt> <dd>a leafy green vegetable</dd> <dt>lemon</dt> <dd>citrus fruit with yellow skin and acidic juice</dd> <dd>a colour of yellow</dd> <dt>ice cream</dt> <dt>frozen yogurt</dt> <dd>soft frozen foods made from dairy products</dd> </dl>
Description list display
kale
a leafy green vegetable
lemon
citrus fruit with yellow skin and acidic juice
a colour of yellow
ice cream
frozen yogurt
soft frozen foods made from dairy products
Resources:
HTML Standard: