HTML5导航标签内容

Question

在与<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>导航标签内部而不是直接使用锚元素？

Answer 1

这两个例子都是语义的.

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

如果您只是想要一维链接,我建议坚持使用

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