8.1. Tag unordered lists with <ul> and <li>
Use the <ul> and <li> tags to mark up lists of items which can appear in any order (menus, tabs, sharing buttons, site map, etc.).
If required, make sure that lists are properly nested:
<ul>
<li>Health</li>
<li>
Rights and procedures
<ul>
<li>Disability</li>
<li>Family</li>
</ul>
</li>
<li>News</li>
</ul>
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.