HTML5 nav tag content

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>

Answer 2

The only real difference might be how search engines might look at the links. When in an unordered list Google might for example understand that all the items in that list are related. In the second example Google might just as well assume none of the links are related. Google can use that information for indexing and display your information more accurately.

They may display the same, but really a lot of markup is about how information should be presented if there was no style attached to the page at all or if a bot is searching your website for relevant information.