多个<nav>标签

97

我们可以在html5的同一页面上使用多个标签吗？

我已经在Zeldman.com上阅读了这篇文章，但对我来说还不是很清楚

即

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

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

html

— 斯蒂芬·默多克
source

1

Role ='main'是用于标识您的网站w3.org/TR/wai-aria/roles#main的主要内容，而Blogroll没有任何作用。我想你的意思是要使用微数据- schema.org。

— 安德鲁·卢林

142

是的，一点没错。您可以有多个header，nav和footer标签，但无罚款。

只要确保您在语义上使用标签，并且不会将其放置在无效的位置（例如，它们是块级元素，那么就不能将它们放置在内联元素中），那么您应该不用太担心棍子人在说什么。被争吵的微小细节很容易，而不是继续进行您的项目。

— 科里沃德
source

2

同一页脚中的多个导航如何？

— igasparetto

4

@igasparetto完全有效，尤其是如果您以表示内容结构的方式使用它，而不仅仅是为了样式方便。

— coreyward 2015年

关于导航类型应使用哪些标准标签，是否有任何指南？特别是：主导航，子导航，实用程序导航（例如快速链接）和页脚导航？另外，如果标签<nav>已经在<footer>标签内，则应用aria-label="footer navigation"是否多余？

— chunk_split

1

@chunk_split我认为您最好问一个新问题，尽管我不确定StackOverflow是否是正确的社区。至于ARIA属性，即使它们看起来很多余，也可以安全地添加它们。

— coreyward

3

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

— 哈罗德·拉莫斯
source

做得好，提供权威的联系。链接的页面在其使用说明中特别指出“一个文档可能包含多个<nav>元素”。

— Ed Gibbs

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>

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

— 卢卡兰卡
source