Question

There seems to be conflicting examples in documents relating to the <nav> tag in html5. Most examples I’ve seen use this:

<nav>
  <ul>
    <li><a href='#'>Link</a></li>
    <li><a href='#'>Link</a></li>
    <li><a href='#'>Link</a></li>
  </ul>
</nav>

But I’m wondering if that’s only because people are used to using divs. There are examples that I’ve seen that simply do this

<nav>
  <a href='#'>Link</a>
  <a href='#'>Link</a>
  <a href='#'>Link</a>
</nav>

The second way seems cleaner and more semantic to me. Is there an “official” correct version? Is there a good reason to still use a <ul> inside the nav tag rather than just use anchor elements directly?

Answer 1

Both examples are semantic.

In the first example, the list of anchors is explicitly an unordered list. In the second example, the list of links is just a collection of anchor elements.

If you simply want a one-dimensional collection of links, I recommend sticking with

<nav>
  <a href='#'>Link</a>
  <a href='#'>Link</a>
  <a href='#'>Link</a>
</nav>

however, using ul elements allows for explicit hierarchical menus (such as drop-downs or tree-lists):

<nav>
  <ul>
    <li>
      <a href="#">Link</a>
    </li>
    <li>
      <a href="#">Link</a>
      <ul>
        <li>
          <a href="#">Sub link</a>
        </li>
        <li>
          <a href="#">Sub link</a>
        </li>
        <li>
          <a href="#">Sub link</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">Link</a>
    </li>
    <li>
      <a href="#">Link</a>
      <ul>
        <li>
          <a href="#">Sub link</a>
        </li>
        <li>
          <a href="#">Sub link</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>