CODEWITHSUNDEEP
html
azrael
azrael

Reputation: 263

Why use lists for navigation menus?

I wonder why everybody uses unordered lists when making menus? Items can be blocks with inline-block display property (for horizontal menus). Is there any reason for using ul and li tags for menus?

Upvotes: 3

Views: 2356

Answers (3)

Chris
Chris

Reputation: 59521

If you think about it a menu is essentially a list of links. So in a way it makes sense to do that. Another benefit of using a structured and semantic tag, such as ol or ul is that a screenreader would understand it better than using a generic tag such as div or span which only define a section of a page, but not its meaning.

However with html5 you would 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 over at css-tricks.com:

"Against" navigation in lists

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

"For" navigation in lists

  • Announcing the number of items in the list can be helpful
  • Benefit to structure in non-CSS browsers (Lynx screenshot)
  • Long standing pattern that hasn't proven widely to be a big problem
  • Lists are a "hook" for screen readers, (e.g. press L for lists) and display heirarchy well
  • Safety: nothing can be in lists but list items, not so for nav

Draw

  • The extra markup can be helpful for styling. I'm calling this a draw because it's true but reaching. I could wrap every div on a page in another div and that might be helpful someday for styling.
  • You can't use role=navigation on a anyway ("Allowed role values are directory, listbox, menu, menubar, tablist, toolbar, tree and presentation."). I'm calling this a draw since in either case you should wrap navigation in a .
  • The "verbosity" of screen readers is a choice. Lists are more verbose, but that can be adjusted.
  • VoiceOver treats exactly the same
  • The spec doesn't care either way.

Remember that the above is only the opinion of the author of the article.

Upvotes: 6

Andrew
Andrew

Reputation: 19

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

Their reasoning is the same as what I assume most people's is. 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.

Upvotes: -2

Anshul
Anshul

Reputation: 103

No, it is not compulsory to use lists for this purpose . But when you are developing a dynamic website where items in your menu keeps on increasing and decreasing this convention makes your work much more managable.

So it's a good programming practice.

Upvotes: -1

Related Questions