在HTML5中，主导航应该位于元素之内还是之外？

In HTML5, should the main navigation be inside or outside the

element?

在HTML5中，我知道

可以在页面的标头

元素的内部或外部使用。对于同时具有辅助导航和主导航的网站，通常将辅助导航作为标头

元素内的

元素与将主导航作为标头

元素外的

元素一起包括在内。但是，如果网站缺乏辅助导航，则通常在标头

元素的

元素中包含主导航。

如果我遵循这些示例，我的内容结构将基于是否包含辅助导航。这就在内容和样式之间引入了一种不必要和不自然的结合。

有没有更好的方法，这样我就不会基于包含或排除辅助导航，将主导航从标头

元素的内部移动到外部？

主导航和辅助导航示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<header>
<nav>


<ul>

<li>

</li>

</ul>

</nav>
Website Title
</header>
<nav>


<ul>

<li>

</li>

</ul>

</nav>

OnlineDegrees.org是遵循上述模式的示例网站。

enter image description here

仅主要导航示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<header>
Website Title
<nav>


<ul>

<li>

</li>

</ul>

</nav>
</header>

Keyzo.co.uk是遵循上述模式的示例网站。

enter image description here

HTML5简介摘录-添加于2011年2月2日，上午7:38

布鲁斯·劳森(Bruce Lawson)和雷米·夏普(Remy Sharp)在介绍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

element could come from a template file.

Of course, it's not required that the

be in the

.

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.

在最后一句话的基础上，布鲁斯·劳森(Bruce Lawson)(该节摘录的一章的作者)似乎承认，"对样式易用性的务实考虑"在内容和样式之间产生了耦合。

相关讨论

这完全取决于您。您可以将它们放置在标题中，也可以不放置在标题中，只要其中的元素仅是内部导航元素(即不要链接到Twitter或Facebook帐户之类的外部网站)就可以了。

它们往往被放置在标题中，仅仅是因为导航经常在其中进行，但并非一成不变。

您可以在HTML5 Doctor中阅读有关它的更多信息。

相关讨论

我不喜欢将导航栏放在标题中。我的理由是：

逻辑

标头包含有关文档的介绍性信息。导航是链接到其他文档的菜单。在我看来，这意味着导航的内容属于站点而不是文档。如果NAV保持前向链接，则为例外。

无障碍

我喜欢将菜单放在源代码的末尾而不是开始。我使用CSS将其发送到计算机屏幕的顶部，或者将其留在文本语音浏览器和小屏幕的末尾。这避免了跳过链接的需要。

相关讨论

例如，您是否要征求意见还不清楚。"通常做xxx"或实际规则，因此我将倾向于规则的方向。

您引用的示例似乎基于nav元素规范中的示例。请记住，规范会不断调整，有时规则会变得混乱，所以我敢冒险，很多人可能会倾向于只做给出的事情而不是解释。您将展示两个具有不同行为的单独示例，因此您只能读到很多东西。这些站点中的任何一个也都存在相反的sub / nav情况吗？

不过，最重要的是，规范中没有任何内容说明这样做是可行的。 HTML5的目标之一是要非常清楚(以供比较)关于语义，需求等，因此省略是值得注意的。据我所知，这些示例彼此独立，并且在各自的布局要求等上下文中同样有效。

将导航的源位置作为条件是一种愚蠢的行为(另一个危险信号)。只需选择一种方法并继续使用即可。

@IanDevlin是正确的。 MDN的规则如下：

"" HTML标头元素"定义了页面标头-通常包含网站的徽标和名称以及可能的水平菜单..."

"可能"这个词是关键。继续说，标题不一定是网站标题。例如，您可以在弹出模式或包含标题的文档的其他模块化部分上包含"标题"，这对于屏幕阅读器上的用户了解它是有帮助的。

它指的是NAV的隐式使用，您可以在有分组站点导航的任何地方使用它，尽管通常在小型导航/重要站点链接的"页脚"部分中省略了它。

确实，这取决于个人/团队的选择。确定您和您的团队所感觉的是更语义的和更重要的，并尝试保持一致。对我而言，如果导航与徽标和主站点的" h1"内联，则将其放在"页眉"中是有意义的，但是如果您有不同的设计选择，则应根据具体情况决定。

最重要的是，请检查文档，并确保您选择忽略还是包括您了解为什么要做出该特定决定。

为了扩展@Jos??huaMaddox所说的内容，在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.

相关讨论

码农家园

在HTML5中，主导航应该位于
元素之内还是之外？

In HTML5, should the main navigation be inside or outside the

element?

In HTML5, should the main navigation be inside or outside the element?

In HTML5, should the main navigation be inside or outside the

element?