HTML5导航标记内容

与< nav>相关的文档中似乎存在相互矛盾的示例.标记在 html5中.我见过的大多数例子都使用了这个：

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

第二种方式对我来说似乎更清晰,更具语义性.有“官方”正确的版本吗？是否有充分的理由继续使用< ul>在nav标签内,而不是直接使用锚元素？

解决方法

这两个例子都是语义的.

在第一个示例中,锚列表显式为无序列表.在第二个示例中,链接列表只是一个锚元素的集合.

如果你只是想要一个一维的链接集合,我建议你坚持下去

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