多个<nav>标签

Question

在HTML5中，我们可以在同一页上使用多个<nav>标签吗？

我读了这篇文章，但对我来说并不是完全清晰的

例如：

<header><nav>links here</nav></header>

<footer><nav>links here</nav></footer>

- stephenmurdoch

---

Role='main' 用于标识您网站的主要内容 http://www.w3.org/TR/wai-aria/roles#main ，而没有博客列表的角色。我认为您想使用微数据 - http://schema.org/ 。 - Andrew Luhring

Answer 1

是的，完全可以。你可以有多个

、

和

标签而不会受到惩罚。

只要确保你在语义上使用了这些标签，并且没有将它们放在非法位置（它们是块级元素，所以不能将它们放在内联元素中，例如），那么你就不必太担心这些挑剔者说些什么。很容易陷入争论细节而无法在项目上前进。

- coreyward

---

同一个页脚中有多个导航怎么样？ - igasparetto

完全有效，尤其是如果你使用它来代表“内容”的结构，而不仅仅是为了方便样式。 - coreyward

有没有关于导航类型应该使用什么标准标签的指导？具体来说：主导航、子导航、实用导航（例如快速链接）和页脚导航？此外，如果<nav>已经在<footer>标签内部，那么再应用aria-label="footer navigation"是否多余？ - patricknelson

@chunk_split 我认为你最好提出一个新问题，虽然我不确定StackOverflow是否是正确的社区。至于ARIA属性，即使它们似乎多余，添加它们也是安全的。 - coreyward

Answer 2

是的，拥有多个<nav>元素完全没问题。

您只需要确保为使用屏幕阅读器的人们使它们可区分。您可以通过为每个<nav>元素使用aria-label进行标记来实现这一点。

<nav aria-label=’primary’>
  <ul>
    ...List on links here...
  </ul>
</nav>
<nav aria-label=’secondary’>
  <ul>
    ...List on links here...
  </ul>
</nav>

或者，如果其中一个<nav>作为可识别为标签元素的屏幕上可见文本，则可以使用aria-labelledby，如下所示：

<nav aria-label="Site Menu">
  <ul>
    ...List on links here...
  </ul>
</nav>
<article>
  <h1>Title</h1>
  ...
  <nav aria-labelledby="id-1">
    <h2 id="id-1">
      Related Content
    </h2>
    <ul>
      ...List on links here...
    </ul>
  </nav>
</article>

您可以阅读有关使用多个导航区域的更多信息。

- lucalanca

Answer 3

答案是肯定的。您可以在页脚中使用<nav>标签，更多信息请查看mdn<nav>文档。

- harold ramos

---

做得好，提供了权威的链接。链接页面在其使用说明中明确指出，“一个文档可能有多个<nav>元素”。 - Ed Gibbs