Why use lists for navigation menus?

If you think about it, a menu is essentially a list of links. So it makes sense to do it. Another advantage of using a structured and semantic tag such as ol

or ul

is that the screen parser will understand it better than using a generic tag such as div

or span

, which only defines a section of the page, but not its meaning.

However, with html5, you probably want to do it with

<nav>
  <a>Home</a>
  <a>Page 1</a>
  <a>Page 2</a>
  <a>Page 3</a>
</nav>

      

        
        
        
      

    

Edit: I found the following at css-tricks.com

Cons of navigation in lists

• At least one screen reader user prefers navigation without lists, which was the source of the original article.
• Simplified markup. nav> a> simpler / less than nav> ul> li> a.
• Divs and gaps can be just as good, especially with ARIA roles.

---

"To navigate through lists

• Declaring the number of items in a list can be helpful
• Benefits for structure in browsers other than CSS (Lynx screenshot)
• Long-term model that hasn't proven to be a widespread problem.
• Lists are a hook for screen readers (for example, press L for lists) and display hierarchy well.
• Safety: Nothing can be in lists other than list items, not for navigation.

---

Draw

• Additional markup can be helpful for styling. I call it a draw because it is true, but achieved. I could wrap each div on a page in a different div and that might be useful someday for styling.
• You cannot use role = navigation anyway ("The allowed values ​​for the role are directory, list, menu, menu, tab, toolbar, tree and presentation.") I call it a draw, since you have to carry navigation to.
• The "verbosity" of screen readers is a choice. The lists are more detailed, but this can be adjusted.
• VoiceOver handles exactly the same
• The spec doesn't care about anything.

_{Remember that the above is only the opinion of the author of the article.}