HTML5 导航和其他语义元素的嵌套

Question

在 HTML 中使用<nav> 元素时，应如何处理包含链接以及其他内容（例如下例中的徽标）的导航元素？

我发现自己在 <nav> 元素中包含所有内容：

<nav>      
  <div class="logo"></div>
  <div class="links">
    <a href>One</a>
    <a href>Two</a>
    <a href>Three</a>
  </div>
</nav>

但我应该只将 实际 导航元素包装在 <nav> 中吗？ （本案例中的链接）

<div class="nav">      
  <div class="logo"></div>
  <nav>
    <a href>One</a>
    <a href>Two</a>
    <a href>Three</a>
  </nav>
</div>

---

这同样适用于其他一些标签，例如 <time>，如果它包含额外的数据：

<div class="time">
  Article posted: <time>2016-09-16</time>
</div>

对

<time>
  Article posted: <span>2016-09-16</span>
</time>

---

我不是在谈论代码的可读性，而是关于优化标记结构以利于爬虫 (SEO) 和可访问性。

编辑：徽标只是一个示例。经常有更多的内容，为了简洁，我只是以徽标为例。

Answer 1

一个 HTML 元素应该只包含与元素的定义相匹配的内容（或与元素的目的相关的内容）。

nav element 用于“指向其他页面或页面内部分的链接”，因此不应包含徽标，除非它是指向主页的链接，或者上下文需要它（例如，参见最后一个HTML5 规范中的示例，它表明 nav 还可以包含用作链接上下文的文本。

如果徽标（或任何其他内容）与 nav、you could 中的内容“有密切关系”，请使用 aside 元素。

time element 用于“日期、时间、时区偏移量和持续时间”，因此不应包含“已发布文章”标签。使用time，您可以标记日期，而不是任何其他内容。

不过，这个决定并不总是一个明确的决定。考虑可能的用例（例如，消费者可以对特定元素的内容做什么）可能会有所帮助，并确定所讨论的内容是否通常用于该目的（主要基于规范）。

Answer 2

正如其他人所提到的，“nav”元素内的项目应该是导航链接。徽标可以点击主页，因此它可以被视为导航链接（尽管这可能有点不寻常），而其他元素（例如非链接页面标题、段落文本、日期或其他一些非导航内容) 将是无效的。

正确使用语义 html 对于读取代码的机器技术非常重要。这适用于屏幕阅读器、SEO 爬虫甚至浏览器。正如其他人所提到的，时间元素旨在包含机器可读格式的内容 - 这样可以通过简单的点击（在某些设备/浏览器中）将其添加到用户日历中，以及作为时间宣布屏幕阅读器和其他可能利用它的技术的元素。将非日期/时间内容放在该块中将禁止该功能。在其他示例中，违反语义最佳实践将导致您的应用变得更难访问和/或对 SEO 不友好。

这是 WCAG（Web 内容可访问性指南）涵盖的成功标准：WCAG - Using semantic elements to mark up structure

Answer 3

我个人认为，对于 SEO 和可访问性来说，保持与导航元素相关的导航内容会更好，这是该 html 标记的期望和使用，即使不是无效的 html 内部还有其他标记。

为了向您提供该方法可能导致某些问题的实际示例，某些网站为无法使用鼠标的用户提供了使用 Tab 键直接跳到网页某些部分的可能性，这要感谢“跳过导航”隐藏在页面顶部的链接，http://webaim.org/techniques/skipnav/。在这种情况下，用户的期望是直接导航菜单项，但是如果在到达链接之前有额外的标记，则可能会卡住所有其他元素。

希望对你有帮助

Answer 4

<nav> 包装器用于指定导航链接的主要块。它将接受属于“流内容”类别的任何标签。

规范中没有明确禁止在其中放置图标，但除非徽标是可点击的链接（通常是这样），否则我建议将其留在导航标签之外。