在HTML5中，主导航是在<；标题>；元素？

在HTML5中，我知道

可以在页面的标题

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

元素包含在报头

元素内，而将主导航作为

元素包含在报头

元素外似乎很常见。但是，如果网站缺少辅助导航，则通常在报头

元素中的

元素中包含主导航

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

是否有更好的方法，使我不会因为包含或排除辅助导航而将主导航从报头

元素的内部移动到外部

主导航和辅助导航示例

网站标题

是一个遵循上述模式的示例站点

仅主导航示例

网站标题

是一个遵循上述模式的示例站点

介绍HTML5的摘录-于2011年2月2日上午7:38添加 布鲁斯·劳森和雷米·夏普对这个主题有这样的看法：

标题还可以包含导航。这对于站点范围内的导航非常有用，尤其是在模板驱动的站点上，

元素的全部可能来自模板文件

当然，不要求

在

中

If很大程度上取决于您是否认为站点范围的导航属于站点范围的标题，以及关于样式设置的方便性的实用考虑

---

根据最后一句话，这些摘录的章节作者布鲁斯·劳森（Bruce Lawson）似乎承认，“关于风格简化的务实考虑”在内容和风格之间产生了耦合。

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

你所举的例子似乎是基于文章中的例子。请记住，规范不断被修改，规则有时也很复杂，所以我敢说，许多人可能只会做给定的事情，而不是解释。您将展示两个不同行为的独立示例，因此您可以了解的内容非常有限。这两个站点是否也有相反的潜艇/导航情况，如果有，它们如何处理

不过，最重要的是，规范中没有说明这两种方法都是可行的。HTML5的目标之一是[这是为了比较]语义、需求等，因此省略是值得注意的。据我所见，这些示例彼此独立，在布局要求等各自的上下文中同样有效

---

让导航的源位置有条件是愚蠢的（另一个危险信号）。只需选择一种方法并付诸实施。

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

它们往往被放在标题中，只是因为导航通常会放在标题中，但不是一成不变的

您可以在上阅读更多信息。

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

逻辑

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

可访问性

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

@IanDevlin是正确的：

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

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

它暗示了NAV的使用，你可以在任何有分组站点导航的地方使用它，尽管在迷你NAV/重要站点链接的“页脚”部分通常会省略它

实际上，这取决于个人/团队的选择。确定您和您的团队认为什么更具语义和重要性，并尝试保持一致。对我来说，如果导航与徽标和主站点的“h1”对齐，那么将其放在“标题”中是有意义的，但如果您有不同的设计选择，则根据具体情况进行决定

---

最重要的是，查看文档，确保如果您选择省略或包含，您理解您做出该特定决定的原因

为了进一步说明@JoshuaMaddox在MDN学习领域中所说的内容，在“HTML简介”一节下，该小节说（粗体/重点由我负责）：

标题 通常在顶部有一个大条带，带有一个大标题和/或徽标。 这是网站的主要公共信息通常出现的地方 远离一个

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

<header>
    <h1>Website Title</h1>
    <nav>
        <!-- Main Navigation inside <header> -->
        <ul>
            <li></li>
        </ul>
    </nav>
</header>