Question

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

第二种方式对我来说似乎更清晰，更具语义性。是否有“官方”正确版本？是否有充分的理由仍然在导航标记内使用<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>

Answer 2

唯一真正的区别可能是搜索引擎如何查看链接。在无序列表中，Google可能会例如了解该列表中的所有项目都是相关的。在第二个例子中，谷歌也可能认为没有任何链接是相关的。 Google可以使用该信息进行索引并更准确地显示您的信息。

它们可能会显示相同的内容，但实际上很多标记都是关于如果页面上没有附加任何样式或者机器人在您的网站上搜索相关信息时应该如何呈现信息。

Answer 3

您可以使用其中之一。

列表往往只是用作链接列表，通常就是列表。但是，这取决于你。

Answer 4

他们之间没有真正的区别。不过像Caimen所说，搜索引擎使用页面标记将数据分组以获得更好的网络搜索结果。如果链接在主题上非常相似（例如对于博客），我建议你使用第一个链接;如果链接不是那么相似，我建议使用第二个（用于浏览网站搜索的结果）。

HTML5导航标签内容

4 个答案: