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

Question

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

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

有没有更好的方法让我不会将主导航从 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

Introducing HTML5布鲁斯·劳森 (Bruce Lawson) 和雷米·夏普 (Remy Sharp) 对这个主题有这样的看法:

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.

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

Answer 1

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

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

您可以在 HTML5 Doctor 上阅读更多相关信息.