Clever Geek Handbook

Why use lists for navigation menus?

Wondering why everyone uses unordered lists when creating menus? Elements can be blocks with display property inline-block

(for horizontal menus). Is there any reason to use tags ul

and li

menu?

+3


source to share


3 answers


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.

+3


source


No, it is not necessary to use lists for this purpose. But when you're developing a dynamic website where the items in your menu keep growing and shrinking, this convention makes your work much more manageable.



So this is good programming practice.

0


source


There is a W3Schools article on this exact topic. ( https://www.w3schools.com/css/css_navbar.asp )

Their reasoning is the same as what I believe most people. A menu is literally a "list of links", so it makes sense from an abstract point of view to use a list of links.

Plus it makes it easier for you (or someone else) to find and understand this code later.

-1


source






More articles:


All Articles