HTML5 导航和其他语义元素的嵌套
Nesting of the HTML5 nav and other semantic elements
在 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) 和可访问性。
编辑：徽标只是一个示例。通常会有更多内容，为了简洁起见，我只是以徽标为例。
<nav> 包装器用于指定导航的主要块link。它将接受属于 "flow content" 类别的任何标签。
规范中没有明确禁止在其中放置图标的任何内容，但除非徽标是可点击的 link（通常如此），否则我建议将其留在导航标签之外。
我个人认为保持与导航元素相关的导航内容对 SEO 和可访问性更好，即 html 标签的期望和用法，即使它不是无效的 html 里面有其他标记。
为了向您提供该方法可能导致某些问题的实际示例，某些网站为无法使用鼠标的用户提供了使用 Tab 键直接跳至网页某些部分的可能性，谢谢"Skip Navigation" 隐藏在页面顶部的链接，http://webaim.org/techniques/skipnav/。在这种情况下，用户的期望是直接导航菜单项，但是如果在它之前有额外的标记，则可能会卡住在到达链接之前通过所有其他元素进行制表。
希望对您有所帮助
一个 HTML 元素应该只包含与元素的定义相匹配的内容（或者与元素的目的相关的内容）。
nav element 用于 "links to other pages or to parts within the page"，因此不应包括徽标，除非它是主页的 link，或者上下文需要它（例如，参见HTML5 规范中的最后一个示例，它表明 nav 也可以包含用作 link 的上下文的文本。
如果徽标（或任何其他内容）"tangentially related" 到 nav 中的内容，you could 使用 aside 元素。
time element 用于 "dates, times, time-zone offsets, and durations"，因此不应包含标签 "Article posted"。使用 time，您可以标记日期，而不是任何其他内容。
不过，决定并不总是明确的。考虑可能的用例（例如，消费者可以对特定元素的内容做什么），并确定所讨论的内容是否通常用于该目的（主要基于定义和示例中的示例）可能会有所帮助规格）。
正如其他人所提到的，'nav' 元素内的项目应该是导航 links。徽标可以单击主页，因此可以将其视为导航 link（尽管这可能并不少见），而其他元素（例如 non-link 页面标题、段落文本、日期或一些其他 non-navigational 内容）将无效。
正确使用语义 html 对于读取代码的机器技术非常重要。这适用于屏幕阅读器、SEO 爬虫甚至浏览器。正如其他人所提到的，时间元素旨在包括机器可读格式的内容——这样它可以通过简单的点击（在某些 devices/browsers 中）添加到用户日历中，并被宣布为屏幕阅读器和其他可能利用它的技术的时间元素。将 non-date/time 内容放入该块将禁止该功能。在其他示例中，打破语义最佳实践将导致您的应用变得更难访问 and/or SEO 友好性降低。
这是 WCAG（Web 内容可访问性指南）涵盖的成功标准：WCAG - Using semantic elements to mark up structure
在 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) 和可访问性。
编辑：徽标只是一个示例。通常会有更多内容，为了简洁起见，我只是以徽标为例。
<nav> 包装器用于指定导航的主要块link。它将接受属于 "flow content" 类别的任何标签。
规范中没有明确禁止在其中放置图标的任何内容，但除非徽标是可点击的 link（通常如此），否则我建议将其留在导航标签之外。
我个人认为保持与导航元素相关的导航内容对 SEO 和可访问性更好，即 html 标签的期望和用法，即使它不是无效的 html 里面有其他标记。
为了向您提供该方法可能导致某些问题的实际示例，某些网站为无法使用鼠标的用户提供了使用 Tab 键直接跳至网页某些部分的可能性，谢谢"Skip Navigation" 隐藏在页面顶部的链接，http://webaim.org/techniques/skipnav/。在这种情况下，用户的期望是直接导航菜单项，但是如果在它之前有额外的标记，则可能会卡住在到达链接之前通过所有其他元素进行制表。
希望对您有所帮助
一个 HTML 元素应该只包含与元素的定义相匹配的内容（或者与元素的目的相关的内容）。
nav element 用于 "links to other pages or to parts within the page"，因此不应包括徽标，除非它是主页的 link，或者上下文需要它（例如，参见HTML5 规范中的最后一个示例，它表明 nav 也可以包含用作 link 的上下文的文本。
如果徽标（或任何其他内容）"tangentially related" 到 nav 中的内容，you could 使用 aside 元素。
time element 用于 "dates, times, time-zone offsets, and durations"，因此不应包含标签 "Article posted"。使用 time，您可以标记日期，而不是任何其他内容。
不过，决定并不总是明确的。考虑可能的用例（例如，消费者可以对特定元素的内容做什么），并确定所讨论的内容是否通常用于该目的（主要基于定义和示例中的示例）可能会有所帮助规格）。
正如其他人所提到的，'nav' 元素内的项目应该是导航 links。徽标可以单击主页，因此可以将其视为导航 link（尽管这可能并不少见），而其他元素（例如 non-link 页面标题、段落文本、日期或一些其他 non-navigational 内容）将无效。
正确使用语义 html 对于读取代码的机器技术非常重要。这适用于屏幕阅读器、SEO 爬虫甚至浏览器。正如其他人所提到的，时间元素旨在包括机器可读格式的内容——这样它可以通过简单的点击（在某些 devices/browsers 中）添加到用户日历中，并被宣布为屏幕阅读器和其他可能利用它的技术的时间元素。将 non-date/time 内容放入该块将禁止该功能。在其他示例中，打破语义最佳实践将导致您的应用变得更难访问 and/or SEO 友好性降低。
这是 WCAG（Web 内容可访问性指南）涵盖的成功标准：WCAG - Using semantic elements to mark up structure