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.

Find out more

Comments

Add a comment

Required fields are marked *.

Back to top