HTML5 导航标签内容答案

【问题标题】：HTML5 nav tag contentHTML5 导航标签内容
【发布时间】：2011-09-01 22:13:46
【问题描述】：

在与 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> 而不仅仅是直接使用锚元素？

【问题讨论】：

标签： html

【解决方案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>

【讨论】：

第一个版本更适合屏幕阅读器（现在不记得出处了）。
@Teerinker，第一个是列表，第二个是树。对于屏幕阅读器来说，两者都不是更好，因为它们传达的含义完全不同。如果你打算传达一棵树，那么第一个是不可接受的。
争论是屏幕阅读器读取：“导航/列表/第一项/链接到 A/第二项/链接到 B..”与“导航/链接到 A/链接到 B ...”我完全明白你对树的看法。

【解决方案2】：

唯一真正的区别可能是搜索引擎如何看待链接。例如，当在无序列表中时，Google 可能会理解该列表中的所有项目都是相关的。在第二个示例中，Google 也可以假设没有任何链接是相关的。 Google 可以使用这些信息来编制索引并更准确地显示您的信息。

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

【讨论】：

谷歌或任何地方提到的项目实际上是有意义的，并按照你说的解释？
@djlukas777 由于显而易见的原因，Google 确实没有透露很多 googlebot 所做的事情，但很明显 googlebot 关心语义标记。了解什么语义标记才是真正了解googlebot的关键。列表进入列表项标签，然后谷歌知道它正在查看一个列表。如果它是一个段落标签，那么 Google 就知道它是一个段落。在正确的地方使用正确的标签，googlebot 就会喜欢你。对段落以外的内容使用段落标签，那么 googlebot 不会喜欢你。

【解决方案3】：

你可以使用任何一个。

列表仅倾向于用作链接列表，通常就是列表。但是，这取决于你。

【讨论】：

【解决方案4】：

它们之间没有真正的区别。然而，就像 Caimen 所说，搜索引擎使用页面标记来对数据进行分组，以获得更好的网络搜索结果。如果链接在主题上非常相似（例如对于博客），我建议您使用第一个，如果链接不那么相似（用于导航网站搜索的结果），则使用第二个。

【讨论】：