8.2. Tag ordered lists with <ol>
and <li>
Use the <ol>
and <li>
tags to mark up lists of items that must appear in a specific order (list of steps in a procedure, ranking, etc.). In other words, when the information would not be understood if the items were presented in a different order.
If required, make sure that lists are properly nested:
<ol> <li>First item of first level</li> <li> Second item of first level <ul> <li>First item of second level</li> <li>Second item of second level</li> </ul> </li> <li>Third item of first level</li> </ol>
What are the advantages?
Structuring lists is essential for people using a screen reader (blind or visually impaired). When they come across a structured list, they are able to:
- Navigate from list to list within a page.
- Know from the start the number of elements in the list.
- Navigate more easily through the list:
- Go directly to the end of the list if they are not interested in the content.
- Easily return to the top of the list.