Html 在 HTML5 中，主导航应该在 <header> 元素内部还是外部？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4870955/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
In HTML5, should the main navigation be inside or outside the <header> element?
提问by Matthew Rankin
In HTML5, I know that <nav>can be used either inside or outside the page's masthead <header>element. For websites having both secondary and main navigation, it seems common to include the secondary navigation as a <nav>element inside the masthead <header>element with the main navigation as a <nav>element outside the masthead <header>element. However, if the website lacks secondary navigation, it appears common to include the main navigation in a <nav>element within the masthead <header>element.
在 HTML5 中，我知道<nav>可以在页面的标头<header>元素内部或外部使用 。对于同时具有辅助导航和主导航的网站，将辅助导航作为<nav>标头<header>元素内的元素包含在主导航中作为<nav>标头<header>元素外的元素似乎很常见。但是，如果网站缺少辅助导航，则<nav>在标头<header>元素中的元素中包含主导航似乎很常见。
If I follow these examples, my content structure will be based on the inclusion or exclusion of secondary navigation. This introduces a coupling between the content and the style that feels unnecessary and unnatural.
如果我遵循这些示例，我的内容结构将基于包含或排除辅助导航。这在内容和风格之间引入了一种不必要和不自然的耦合。
Is there a better way so that I'm not moving the main navigation from inside to outside the masthead <header>element based on the inclusion or exclusion of secondary navigation?
有没有更好的方法，以便我不会<header>根据包含或排除辅助导航将主导航从标头元素的内部移动到外部？
Main and Secondary Navigation Example
主要和次要导航示例
<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.orgis an example site that follows the above pattern.
OnlineDegrees.org是一个遵循上述模式的示例站点。
Main Only Navigation Example
仅主要导航示例
<header>
<h1>Website Title</h1>
<nav>
<!-- Main Navigation inside <header> -->
<ul>
<li></li>
</ul>
</nav>
</header>
Keyzo.co.ukis an example site that follows the above pattern.
Keyzo.co.uk是一个遵循上述模式的示例站点。
Excerpts from Introducing HTML5—?Added on 02-Feb-11, 7:38 AM
摘自HTML5 简介—? 添加于 2011 年 2 月 2 日，上午 7:38
Introducing HTML5by Bruce Lawson and Remy Sharp has this to say about the subject:
Bruce Lawson 和 Remy Sharp 在Introducing HTML5 中谈到了这个主题：
The header can also contain navigation. This can be very useful for site-wide navigation, especially on template-driven sites where the whole of the
<header>element could come from a template file.Of course, it's not required that the
<nav>be in the<header>.If depends largely on whether you believe the site-wide navigation belongs in the site-wide header and also pragmatic considerations about ease of styling.
标题还可以包含导航。这对于站点范围的导航非常有用，尤其是在模板驱动的站点上，其中整个
<header>元素可能来自模板文件。当然，它不要求
<nav>是在<header>。是否在很大程度上取决于您是否认为站点范围的导航属于站点范围的标题，以及有关易于样式化的实用考虑。
Based on that last sentence, it appears that Bruce Lawson—author of the chapter those excerpts are from—admits that "pragmatic considerations about ease of styling" yield a coupling between the content and the style.
根据最后一句话，布鲁斯·劳森（Bruce Lawson）——这些摘录所在章节的作者——承认“关于易于造型的务实考虑”在内容和风格之间产生了耦合。
采纳答案by Ian Devlin
It's completely up to you. You can either put them in the header or not, as long as the elements within them are internal navigation elements only (i.e. don't link to external sites such as a twitter or facebook account) then it's fine.
这完全取决于你。您可以将它们放在标题中，也可以不放在标题中，只要其中的元素只是内部导航元素（即不链接到外部网站，例如 twitter 或 facebook 帐户），就可以了。
They tend to get placed in a header simply because that's where navigation often goes, but it's not set in stone.
它们往往被放置在标题中，因为这是导航经常去的地方，但它并不是一成不变的。
You can read more about it at HTML5 Doctor.
您可以在HTML5 Doctor阅读更多相关信息。
回答by Yet Another Geek
I do not like putting the navin the header. My reasoning is:
我不喜欢将导航放在标题中。我的理由是：
Logic
逻辑
The headercontains introductory information about the document. The navis a menu that links to other documents. To my mind this means that the content of the navbelongs to the site rather than the document. An exception would be if the NAV held forward links.
该头包含关于文档的介绍信息。该导航是链接到其他文档的菜单。在我看来，这意味着导航的内容属于站点而不是文档。一个例外是 NAV 持有前向链接。
Accessibility
无障碍
I like to put menus at the end of the source code rather than the start. I use CSS to send it to the top of a computer screen or leave it at the end for text-speech browsers and small screens. This avoids the need for skip-links.
我喜欢把菜单放在源代码的末尾而不是开头。我使用 CSS 将其发送到计算机屏幕的顶部，或者将其留在文本语音浏览器和小屏幕的末尾。这避免了对跳过链接的需要。
回答by Su'
It's a little unclear whether you're asking for opinions, eg. "it's common to do xxx" or an actual rule, so I'm going to lean in the direction of rules.
有点不清楚您是否在征求意见，例如。“做xxx很常见”或实际规则，所以我将倾向于规则的方向。
The examples you cite seem based upon the examples in the spec for the nav element. Remember that the spec keeps getting tweaked and the rules are sometimes convoluted, so I'd venture many people might tend to just do what's given rather than interpret. You're showing two separateexamples with different behavior, so there's only so much you can read into it. Do either of those sites also have the opposing sub/nav situation, and if so how do they handle it?
您引用的示例似乎基于nav 元素规范中的示例。请记住，规范不断调整，规则有时令人费解，所以我敢说很多人可能倾向于只做给出的东西而不是解释。您正在展示两个具有不同行为的独立示例，因此您可以阅读其中的内容。这些站点中的任何一个是否也有相反的子/导航情况，如果有，他们如何处理？
Most importantly, though, there's nothing in the spec saying either is theway to do it. One of the goals with HTML5 was to be very clear[this for comparison] about semantics, requirements, etc. so the omission is worth noting. As far as I can see, the examples are independent of each other and equally valid within their own context of layout requirements, etc.
最重要的是，有没有在规范或者说是在做它的方式。HTML5 的目标之一是在语义、要求等方面非常明确[this for compare]，因此这一遗漏值得注意。据我所知，这些示例彼此独立，并且在它们自己的布局要求等上下文中同样有效。
Having the nav's source position be conditional is kind of silly(another red flag). Just pick a method and go with it.
让导航的源位置有条件是一种愚蠢的（另一个危险信号）。只需选择一种方法并使用它。
回答by Joshua Maddox
@IanDevlin is correct. MDN's rules say the following:
@IanDevlin 是正确的。MDN 的规则如下：
"The HTML Header Element "" defines a page header — typically containing the logo and name of the site and possibly a horizontal menu..."
“HTML Header Element”定义了一个页面标题——通常包含网站的标志和名称，可能还有一个水平菜单......”
The word "possibly" there is key. It goes on to say that the header doesn't necessarily need to be a site header. For instance you could include a "header" on a pop-up modal or on other modular parts of the document where there is a header and it would be helpful for a user on a screen reader to know about it.
“可能”这个词是关键。它继续说标题不一定需要是站点标题。例如，您可以在弹出式模态或文档的其他模块化部分上包含“标题”，其中有标题，这将有助于屏幕阅读器上的用户了解它。
It terms of the implicit use of NAV you can use it anywhere there is grouped site navigation, although it's usually omitted from the "footer" section for mini-navs / important site links.
它是隐式使用 NAV 的条款，您可以在任何有分组站点导航的地方使用它，尽管它通常从迷你导航/重要站点链接的“页脚”部分中省略。
Really it comes down to personal / team choice. Decide what you and your team feel is more semantic and more important and the try to be consistent. For me, if the nav is inline with the logo and the main site's "h1" then it makes sense to put it in the "header" but if you have a different design choice then decide on a case by case basis.
真的归结为个人/团队选择。决定你和你的团队认为更语义化和更重要的东西，并尝试保持一致。对我来说，如果导航与徽标和主站点的“h1”内联，那么将其放在“标题”中是有意义的，但如果您有不同的设计选择，则根据具体情况决定。
Most importantly check out the docs and be sure if you choose to omit or include you understand why you are making that particular decision.
最重要的是查看文档，并确保您是否选择省略或包含您了解为什么要做出该特定决定。
回答by mach128x
To expand on what @JoshuaMaddox said, in the MDN Learning Area, under the "Introduction to HTML" section, the Document and website structuresub-section says (bold/emphasis is by me):
为了扩展@JoshuaMaddox 所说的内容，在 MDN 学习区的“HTML 简介”部分下，文档和网站结构子部分说（粗体/重点是我）：
Header
Usually a big strip across the top with a big heading and/or logo. This is where the main common information about a website usually stays from one webpage to another.
Navigation bar
Links to the site's main sections; usually represented by menu buttons, links, or tabs. Like the header, this content usually remains consistent from one webpage to another — having an inconsistent navigation on your website will just lead to confused, frustrated users. Many web designers consider the navigation bar to be part of the header rather than a individual component, but that's not a requirement; in fact some also argue that having the two separate is better for accessibility, as screen readers can read the two features better if they are separate.
标题
通常是顶部的大条带，带有大标题和/或徽标。这是关于网站的主要公共信息通常从一个网页到另一个网页的地方。
导航栏
网站主要部分的链接；通常由菜单按钮、链接或选项卡表示。与标题一样，此内容通常从一个网页到另一个网页保持一致 - 在您的网站上不一致的导航只会导致用户感到困惑、沮丧。许多网页设计师认为导航栏是标题的一部分而不是单个组件，但这不是必需的；事实上，有些人还认为，将两者分开对可访问性更好，因为如果它们分开，屏幕阅读器可以更好地阅读这两个功能。
