logo标签列表

在HTML5中，主导航应该放在<header>元素内还是外部？

html
244
在HTML5中，我知道<nav>可以放在页面的页眉<header>元素内或外。对于同时具有二级和主导航的网站，通常将二级导航包含在页眉<header>元素内的<nav>元素中，并将主导航作为一个在页眉<header>元素之外的<nav>元素来呈现。然而，如果网站没有二级导航，则通常将主导航包含在页眉<header>元素内的<nav>元素中。
如果按照这些示例进行操作，我的内容结构将基于是否包含二级导航。这引入了一种在内容和样式之间感觉不必要和不自然的耦合。
是否有更好的方法，使得我不需要根据是否包含二级导航将主导航从页眉<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>

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

输入图像描述

《Introducing HTML5》摘录 — 添加于02-Feb-11, 7:38 AM

由 Bruce Lawson 和 Remy Sharp 所著的Introducing HTML5一书对此作了解释：

标题也可以包含导航。这对于整个站点的导航来说非常有用，特别是在模板驱动的站点上，整个<header>元素可能来自一个模板文件。

当然，并不是一定要将<nav>放在<header>中。

这主要取决于您是否认为全站导航应该放在全站头部，以及易于样式设置的实际考虑因素。

根据最后一句话，章节作者Bruce Lawson承认"关于样式易用性的实际考虑因素"产生了内容和样式的耦合。

2
这完全取决于你的网站设计。以 Twitter 为例，他们的首页（即在登录之前看到的页面）没有顶部导航。他们所有的“主菜单”都在页面底部。现在，我不知道你怎么想，但我不会称其为页眉... - uSeRnAmEhAhAhAhAhA
7个回答
135

完全由您决定。只要它们内部的元素是仅用于内部导航的元素（即不链接到Twitter或Facebook账户等外部站点），则无论是将它们放在页眉中还是不放都可以。

它们通常被放置在页眉中，只是因为导航通常放在那里，但这并不是铁板钉钉的。

您可以在HTML5 Doctor了解更多信息。

14
为什么你说“只要它们内部的元素仅限于导航元素（即不链接到外部网站，如 Twitter 或 Facebook 帐户），那就没问题了。”？ - Matthew Rankin
17
@Matthew，因为nav元素仅用于该站点的导航。我只是想表达得更清楚而已。 - Ian Devlin
@MatthewRankin 点击<nav>元素内的锚点，却被带到一个完全不同导航的新页面，这将是多么令人震惊的事情啊。对于那些与你自己没有真正关系的外部站点的锚点，也请记得使用rel="nofollow"属性来添加链接。 - Anthony Rutledge
1
我知道这很老套...那子域名的链接呢？例如一个网站有不同的站点（展示站点、服务站点、认证站点等），它们都有不同的结构。我的做法是将该链接放置在<nav>元素内，但不放在<ul>元素内，以一种不属于主导航列表的方式进行样式设置。唯一的例外是移动版本，链接必须出现在同一列表中...总之，按钮的描述足以让你知道你要去别的地方... - Chazy Chaz
12

我不喜欢将nav放在header中。我的理由是：

逻辑

Header包含有关文档的介绍信息，而nav则是链接到其他文档的菜单。在我看来，这意味着

5
请记住，跳转链接提供“跳过菜单”的选项，而将其放在末尾则不提供选择（即无法导航）- 因此您将被迫等到最后才能正确地导航，是吗？ - Julix
4
延续@julix的观点，将导航栏放在文档末尾，但在开头渲染它，会让有视觉能力的用户在通过文档时使用Tab键感到不便。 - Jason
1
<nav>是一个语义化元素，意味着它的目的由其上下文位置定义。您可以为站点导航和页面导航分别使用一个<nav>。它不一定只用于站点导航。 - pbarney
7

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

“HTML标头元素”定义页面标题 - 通常包含网站的徽标和名称，可能还有水平菜单...

那里的“可能”一词是关键。它继续说，标题不一定需要是站点标题。例如，您可以在弹出模态框或文档的其他模块化部分中包含“标题”，并且对于屏幕阅读器上的用户了解它将会很有帮助。

就隐式使用NAV而言，您可以在任何分组站点导航的位置使用它，尽管通常从“页脚”部分省略小型导航/重要站点链接。

实际上，这取决于个人/团队选择。确定您和您的团队认为更语义化和更重要的内容，然后尝试保持一致。对我来说，如果导航与徽标和主站点的“h1”相同，则将其放在“标题”中是有意义的，但如果您有不同的设计选择，则逐个案例进行决策。

最重要的是查看文档，并确保如果选择省略或包含某些内容，您了解为什么做出这个特定的决定。

6

不太清楚您是在询问意见，例如“做xxx是很常见的”，还是实际规则，因此我会倾向于规则方面。

您引用的例子似乎基于nav元素的规范中的例子。请记住，规范不断得到调整，规则有时很复杂，因此我认为许多人可能倾向于只按照给定的方式进行而不进行解释。您展示了两个分离的具有不同行为的示例，因此您只能读取其中的一部分。这些站点中是否还有相反的子/导航情况，如果有，它们如何处理？

然而，最重要的是，规范中没有任何规定哪种方法是唯一的方法。 HTML5的目标之一是对语义、要求等进行非常明确[此处供比较]，因此省略值得注意。就我所知，这些示例彼此独立，在其自身的布局要求等方面同样有效。

使nav的源位置成为条件是有点愚蠢的（另一个红旗）。只需选择一种方法并使用它即可。

5

我认为最简单的回答方式是查看MDN Web文档和其他网络标准网站。

MDN Web文档中的nav元素位于header元素内部
4
为了进一步阐述@JoshuaMaddox所说的内容，在MDN学习区的“HTML简介”部分下，文档和网站结构子部分如下（粗体/强调是我添加的）：

标题

通常是页面顶部的大条带，具有大标题和/或标志。这是网站的主要公共信息，通常从一个网页保留到另一个网页。

导航栏

链接到站点的主要部分；通常由菜单按钮、链接或选项卡表示。与标题一样，这个内容通常从一个网页保持一致 - 在您的网站上拥有不一致的导航只会导致困惑、沮丧的用户。许多网页设计师认为导航栏是标题的一部分而不是独立的组件，但这并不是必需的；事实上，有些人认为将两者分开更有利于可访问性，因为屏幕阅读器可以更好地阅读这两个特性如果它们是分开的。

1
我想同意这样一个观点：在页面上结构浅的<nav>可能比嵌套深的<nav>更易于访问。但是，这个判断基于什么呢？无论如何，屏幕阅读器都会关注<nav>和<a>标签。重要的因素是HTML的结构顺序。接下来，响应性。将主要<nav>（或任何<nav>）作为<body>的直接子项是否使其更容易操作？这是有效的HTML吗？ <nav>是“分节内容”，因此自然适合放置在“分节根”（如<body>）中。请参见W3C HTML5。 - Anthony Rutledge
0

简而言之

没有对错之分，取决于你构建的内容。

这是每个网页开发者在某个时刻都会问自己的问题。我也曾多次问过自己这个问题。为了回答这个问题，我查看了Stackoverflow的源代码。SO在header标签内部有nav标签。

这是绝对正确的，因为如果您查看顶部栏的视图结构，很快就会明白这是正确的方法。在这里，您可以简单地使用flexbox设计。反过来，如果两个标签没有嵌套，只有一个上级标签才能工作。这将不必要地漂白DOM，如下所示：

<div class="flex">
  <header></header>
  <nav></nav>
</div>

另一方面，有些标题只是一个带有标志的大图像。或者是整个行与标志。在这里，导航标签是否在标题标签上方或下方并不重要。

结论：标签只有语义意义，而不是模板结构的规范。您可以根据自己的想法或用户的期望来构建模板。

两种情况都是正确的！

<!-- case 1 -->
<body>
 <header></header>
 <nav></nav>
 <main></main>
</body>

<!-- case 2 -->
<body>
 <header>
   <nav></nav>
 </header>
 <main></main>
</body>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接