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

Question

在HTML5中，我知道<nav>可以在页面的标头<header>元素内部或外部使用。对于同时具有辅助导航和主导航的网站，将辅助导航作为<nav>元素包含在标头<header>元素中，主导航作为标头之外的<nav>元素似乎很常见{ {1}}元素。但是，如果网站缺少辅助导航，则主要导航通常包含在标头<header>元素中的<nav>元素中。

如果我遵循这些示例，我的内容结构将基于包含或排除辅助导航。这引入了内容和风格之间的耦合，感觉不必要和不自然。

是否有更好的方法，以便我不会根据包含或排除辅助导航而将主导航从内部移动到标头<header>元素外部？

主要和次要导航示例

<header>

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

仅限主要导航示例

<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>

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

摘自介绍HTML5 - 于02年2月2日上午7:38添加

布鲁斯·劳森（Bruce Lawson）和雷米·夏普（Remy Sharp）的

Introducing HTML5对此主题有这样的说法：

  

标题还可以包含导航。这对于站点范围的导航非常有用，尤其是在模板驱动的站点上，整个<header> <h1>Website Title</h1> <nav> <!-- Main Navigation inside <header> --> <ul> <li></li> </ul> </nav> </header> 元素可能来自模板文件。

     

当然，<header>不需要<nav>。

     

如果在很大程度上取决于您是否认为站点范围的导航属于站点范围的标题，还有关于样式易用性的实用性考虑。

基于最后一句话，看起来布鲁斯劳森 - 本章摘要的作者来自承认“关于易于造型的实用考虑”会产生内容与风格之间的耦合。

Answer 1

这完全取决于你。您可以将它们放入标题中，只要它们中的元素只是内部导航元素（即不链接到外部网站，如Twitter或Facebook帐户），那就没关系。

它们倾向于被放置在标题中，因为这是导航经常发生的地方，但它并不是一成不变的。

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

Answer 2

有点不清楚你是否在征求意见，例如。 “做xxx很常见”或实际规则，所以我会向规则的方向倾斜。

您引用的示例似乎基于spec for the nav element中的示例。请记住，规范不断被调整，规则有时令人费解，所以我冒险许多人可能倾向于只做所给的而不是解释。您正在显示两个具有不同行为的单独的示例，因此您只能阅读它。这些网站中的任何一个都有相反的子/导航情况，如果是这样，他们如何处理它？<​​/ p>

最重要的是，规范中没有任何内容可以说 方式。 HTML5的目标之一是very clear [这用于比较]关于语义，要求等等，所以遗漏值得注意。据我所知，这些示例是相互独立的，并且在它们自己的布局要求等环境中同样有效。

导航源的位置是有条件的是一种愚蠢的（另一个红旗）。只需选择一种方法并继续使用它。

Answer 3

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

<强>逻辑

标题包含有关该文档的介绍性信息。 nav 是一个链接到其他文档的菜单。在我看来，这意味着 nav 的内容属于网站而不是文档。如果资产净值持有前向链接，则会例外。

<强>辅助

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

Answer 4

@IanDevlin是对的。 MDN's rules say the following：

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

“可能”这个词有关键。接着说，标题不一定需要是站点标题。例如，您可以在弹出模式或文档的其他模块化部分上包含“标题”，其中有标题，屏幕阅读器上的用户可以了解它。

隐含使用资产净值的条款，你可以在任何有分组网站导航的地方使用它，虽然它通常在迷你导航/重要网站链接的“页脚”部分中省略。

真的归结为个人/团队的选择。确定您和您的团队的感受更具语义性和更重要性，并努力保持一致。对我来说，如果导航与徽标和主站点的“h1”内联，则将其置于“标题”中是有意义的，但如果您有不同的设计选择，则根据具体情况决定。

最重要的是查看文档并确定您是否选择省略或包含您理解为何做出该特定决定。

Answer 5

要扩展@Jos​​huaMaddox所说的，在MDN学习区，在“HTML简介”部分下，Document and website structure子部分说明（粗体/重点是由我）：

  

标题

     

通常顶部有一个大条带，带有大标题和/或徽标。   这是关于网站的主要常见信息   从一个网页停留到另一个网页。

     

导航栏

     

链接到网站的主要部分;通常用菜单表示   按钮，链接或标签。与标题一样，此内容通常仍然存在   从一个网页到另一个网页是一致的 - 有一个不一致的   在您的网站上导航只会导致困惑，沮丧   用户。 许多网页设计师认为导航栏是其中的一部分   标题而不是单个组件，但这不是一个   需求;事实上，有些人也认为两者分开是   更好的可访问性，因为屏幕阅读器可以阅读这两个功能   如果它们是分开的话会更好。