在HTML5中，我知道<nav>可以在页面的报头<header>元素内部或外部使用。对于同时具有辅助导航和主导航的网站，通常将辅助导航作为<nav>元素包含在报头<header>元素内部，而将主导航作为<nav>元素包含在报头<header>元素外部。然而，如果网站没有二级导航，则通常将主导航包括在刊头<header>元素内的<nav>元素中。
如果我遵循这些例子，我的内容结构将基于包含或排除二级导航，这将在内容和风格之间引入一种感觉不必要和不自然的耦合。
有没有更好的方法，使我不会根据包含或排除次要导航将主导航从masthead <header>元素内部移动到外部？
主导航和辅助导航示例
<header>
<nav>
<!-- Secondary Navigation inside <header> -->
<ul>
<li></li>
</ul>
</nav>
<h1>Website Title</h1>
</header>
<nav>
<!-- Main Navigation outside <header> -->
<ul>
<li></li>
</ul>
</nav>OnlineDegrees.org是遵循上述模式的示例站点。
仅主导航示例
<header>
<h1>Website Title</h1>
<nav>
<!-- Main Navigation inside <header> -->
<ul>
<li></li>
</ul>
</nav>
</header>X1 E1 F1 X是遵循上述模式的示例站点。
摘自 * HTML5简介 * -添加于2011年2月2日上午7：38
布鲁斯·劳森和雷米夏普的Introducing HTML5对这个主题有这样的说法：
页眉还可以包含导航，这对于站点范围的导航非常有用，特别是在模板驱动的站点上，整个<header>元素都可以来自模板文件。
当然，并不要求<nav>必须在<header>中。
If很大程度上取决于您是否认为站点范围的导航属于站点范围的标题，以及有关样式简易性的实用考虑。
基于最后一句话，似乎布鲁斯·劳森--这些摘录所在章节的作者--承认“关于风格易用性的实用主义考虑”产生了内容和风格之间的耦合。
7条答案
按热度按时间ivqmmu1c1#
这完全取决于你，你可以把它们放在标题中，也可以不放在标题中，只要它们里面的元素只是内部导航元素（也就是说，不链接到外部网站，比如twitter或facebook账户），那就没问题。
他们往往会被放置在一个标题，只是因为这是导航经常去，但它不是一成不变的。
您可以在HTML5 Doctor上了解更多信息。
mkshixfv2#
我不喜欢将 * nav * 放在 * header * 中。我的理由是：
我喜欢把菜单放在源代码的末尾而不是开头，我使用CSS把它发送到计算机屏幕的顶部，或者把它放在文本语音浏览器和小屏幕的末尾，这样就不需要跳转链接了。
e0bqpujr3#
不太清楚你是在征求意见，比如“做xxx很常见”还是在征求实际规则，所以我倾向于规则的方向。
你引用的例子看起来是基于nav元素规范中的例子。记住，规范一直在调整，规则有时也很复杂，所以我敢说很多人可能倾向于只做给定的事情，而不是解释。你展示的是两个具有不同行为的 * 独立 * 例子。所以你能理解的就这么多了。这两个站点中的任何一个也有相反的潜艇/导航情况吗？如果有，他们是如何处理的？
不过，最重要的是，规范中并没有说明这两种方法都是正确的方法。HTML5的目标之一就是要非常清楚（这是为了比较）语义、需求等，所以这个省略值得注意。据我所知，这些例子是相互独立的，并且在它们自己的布局需求等上下文中同样有效。
让nav的源位置是有条件的有点傻（另一个危险信号），只要选择一个方法并使用它就行了。
5q4ezhmt4#
@IanDevlin是正确的。MDN's rules say the following：
HTML Header元素“”定义页眉-通常包含徽标和网站名称，还可能包含水平菜单...
“可能”这个词很关键。它接着说，标题不一定是网站标题。例如，你可以在弹出模式或文档的其他模块化部分包含一个“标题”，如果有标题的话，这对屏幕阅读器的用户了解它会很有帮助。
它的条款隐含使用NAV您可以使用它的任何地方有分组网站导航，虽然它通常被省略的“页脚”部分的迷你导航/重要的网站链接。
实际上，这取决于个人/团队的选择。决定你和你的团队觉得什么更语义化，更重要，并努力保持一致。对我来说，如果导航是内联的标志和主网站的“h1”，那么它是有意义的，把它放在“标题”，但如果你有一个不同的设计选择，然后根据具体情况决定。
最重要的是检查文档，并确保如果您选择省略或包括您了解为什么您正在作出这一特定的决定。
eanckbw95#
为了扩展@JoshuaMaddox所说的内容，在MDN学习区的“HTML简介”部分，Document and website structure子部分说（粗体/强调是我写的）：
标题
通常是一个大条横跨顶部与一个大标题和/或标志。这是关于一个网站的主要共同信息通常停留在从一个网页到另一个。
导航栏
网站主要部分的链接;通常由菜单按钮、链接或标签表示。与页眉一样，导航栏的内容通常在不同网页之间保持一致--如果网站的导航不一致，只会让用户感到困惑和沮丧。许多网页设计师认为导航栏是页眉的一部分，而不是一个单独的组件，但这并不是必须的;事实上，有些人还认为，将这两个功能分开更有利于访问，因为屏幕阅读器可以更好地阅读这两个功能，如果它们是分开的。
xzv2uavs6#
我认为最简单的回答方法是查看MDN Web Docs和其他Web标准站点。
gdrx4gfi7#
靶区;DR
没有对错之分，这取决于你建造的是什么。
这是每个网页开发者都会问自己的一个问题。我已经问过自己这个问题好几次了。为了回答这个问题，我看了Stackoverflow的源代码。在header标签里面有nav标签。
这是绝对正确的，因为如果你看看顶部栏的视图结构，很快就会明白这是正确的方法。在这里你可以简单地使用flexbox设计。反过来，如果两个标签都没有嵌套，它只会使用一个上级标签。这将不必要地漂白DOM。比如：
另一方面，也有一些header只是一个大图片，里面有一个logo，或者一整行都有logo，这里nav标签是在header标签的上面还是下面都没有关系。
**结论：**标签仅具有语义意义，并不是模板结构的规范。您可以根据自己的想法或用户的期望构建模板。
两种情况都对！