Should I use <ul>s and <li>s inside my <nav>s?

html html-lists nav

kikito · Apr 5, 2011 · Viewed 40k times · Source

The title pretty much explains it.

Now that we have a dedicated <nav> tag,

Is this:

<nav>
  <ul>
    <li><a href="#foo">foo</a></li>
    <li><a href="#bar">bar</a></li>
    <li><a href="#baz">baz</a></li>
  </ul>
</nav>

any better than the following?

<nav>
  <a href="#foo">foo</a>
  <a href="#bar">bar</a>
  <a href="#baz">baz</a>
</nav>

I mean, assuming that I don't need an extra DOM level for some CSS positioning/padding, what is the preferred way, and why?

Answer

the nav element and the list provide different semantical information:

The nav element communicates that we're dealing with a major navigation block
The list communicates that the links inside this navigation block form a list of items

At http://w3c.github.io/html/sections.html#the-nav-element you can see that a nav element could also contain prose.

So yes, having a list inside a nav element does add meaning.