HTML5导航标签内容

与html5中的<nav>标记有关的文档中似乎存在冲突的示例。我见过的大多数示例都使用此方法:

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

但是我想知道这是否仅是因为人们习惯了使用div。我已经看到了一些可以简单地做到这一点的例子

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

第二种方法对我来说似乎更干净，更语义化。是否有“官方”正确版本？是否有充分的理由仍然需要在nav标签内使用<ul>而不是直接使用 anchor 元素？

最佳答案

这两个例子都是语义的。

在第一个示例中， anchor 列表明确是无序列表。在第二个示例中，链接列表只是 anchor 元素的集合。

如果您只是想要一维链接集合，建议您坚持使用

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

但是，使用ul元素可以使用明确的分层菜单(例如下拉菜单或树形列表):

<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>

关于HTML5导航标签内容，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/7277175/