Question

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

我发现自己在<nav＆gt;中包含了所有内容。元素：

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

但是我应该只在<{1}}中包装实际导航元素吗？（在这种情况下的链接）

<nav>

如果它包含额外的数据，则同样适用于其他一些标记，例如<div class="nav"> <div class="logo"></div> <nav> <a href>One</a> <a href>Two</a> <a href>Three</a> </nav> </div>：

<time>

VS

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

我不是在谈论代码的可读性，而是为了爬虫（SEO）和可访问性的优势而优化标记结构。

编辑：徽标只是一个例子。通常会有更多内容，我只是将徽标用作简洁的示例。

Answer 1

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

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

如果徽标（或其他任何内容）与nav中的内容“切线相关”，则you could使用aside元素。

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

但是，这个决定并不总是很明确。考虑可以想象的用例（例如，消费者可以对特定元素的内容做什么）可能会有所帮助，并且可以决定是否通常将该内容用于该目的（主要基于该定义和示例中的内容）。规格）。

Answer 2

正如其他人所提到的那样，＆＃39; nav＆＃39;元素应该是导航链接。徽标可以点击回家，因此它可以被视为导航链接（虽然这可能不会有点不寻常），而其他元素（例如非链接页面标题，段落文本，日期或其他一些非导航内容））无效。

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

这是WCAG（网页内容无障碍指南）所涵盖的成功标准：WCAG - Using semantic elements to mark up structure

Answer 3

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

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

Answer 4

就我个人而言，我认为SEO和可访问性更好，以保持与导航元素相关的导航内容，这是html标签的期望和用法，即使不是无效的html内部有其他标记。

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

希望这有帮助

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

4 个答案: