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

Question

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

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

有没有更好的方法，这样我就不会根据包含或排除辅助导航将主导航从标头内部移动到外部 <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 是遵循上述模式的示例站点。

介绍 HTML5 的摘录 — 添加于 2011 年 2 月 2 日上午 7:38

Bruce Lawson 和 Remy Sharp 介绍的 HTML5 对这个主题有这样的说法：

标题还可以包含导航。这对于站点范围的导航非常有用，尤其是在整个 <header> 元素可能来自模板文件的模板驱动网站上。

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

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

基于最后一句话，布鲁斯·劳森（这些摘录来自该章的作者）似乎承认“关于易于样式化的务实考虑”产生了内容和样式之间的耦合。

原文由 Matthew Rankin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这完全取决于你。您可以将它们放在标题中，也可以不放在标题中，只要它们中的元素只是内部导航元素（即不链接到外部网站，如 twitter 或 facebook 帐户），就可以了。

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

你可以在 HTML5 Doctor 阅读更多关于它的信息。

原文由 Ian Devlin 发布，翻译遵循 CC BY-SA 2.5 许可协议

Answer 2

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

逻辑

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

辅助功能

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

原文由 Yet Another Geek 发布，翻译遵循 CC BY-SA 3.0 许可协议