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

Question

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

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

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

但我应该只将实际的导航元素包装在 a 中吗<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 元素应仅包含与 element\xe2\x80\x99s 定义匹配的内容（或与 element\xe2\x80\x99s 用途相关）。

\n\n

该nav元素用于“链接到其他页面或页面内的部分”，因此不应包含徽标，除非它\xe2\x80\x99是到主页的链接，或者\xe2\x80\x99s需要context（例如，请参阅 HTML5 规范中的最后一个示例，该示例表明nav还可以包含用作链接上下文的文本）。

\n\n

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

\n\n

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

\n\n

不过，这一决定并不总是明确的。它可能有助于思考可想象的用例（例如，消费者可以对特定元素的内容做什么），并确定所讨论的内容通常是否用于该目的（主要基于中的定义和示例）。规格）。

\n