In HTML5, I know that <nav> can be used either inside or outside the page's masthead <header> element. For websites having both secondary and main navigation, it seems common to include the secondary navigation as a <nav> element inside the masthead <header> element with the main navigation as a <nav> element outside the masthead <header> element. However, if the website lacks secondary navigation, it appears common to include the main navigation in a <nav> element within the masthead <header> element.

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

有没有更好的方法,使我不移动的主要导航从内部到外部的masthead <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>

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

从介绍HTML5摘录-添加于02-Feb-11,上午7:38

Bruce Lawson和Remy Sharp介绍HTML5:

标题还可以包含导航。这对于站点范围内的导航非常有用,特别是在模板驱动的站点上,其中整个<header>元素可能来自模板文件。 当然,并不要求<nav>在<头文件>中。 如果在很大程度上取决于你是否认为全站导航属于全站标头,以及实用的考虑是否易于样式化。

根据最后一句话,这些摘录的章节的作者布鲁斯·劳森(Bruce lawson)似乎承认,“对易于设计的实用主义考虑”在内容和风格之间产生了耦合。


当前回答

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

“HTML标题元素”“定义了一个页面标题-通常包含网站的logo和名称,可能还有一个水平菜单…”

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

它的术语内隐式使用的NAV,你可以使用它的任何地方,有分组网站导航,虽然它通常被省略从“页脚”部分的迷你导航/重要的网站链接。

实际上,这取决于个人/团队的选择。决定你和你的团队觉得什么更语义化、更重要,并努力保持一致。对我来说,如果导航与logo和主网站的“h1”是内联的,那么把它放在“标题”是有意义的,但如果你有不同的设计选择,那么要根据具体情况来决定。

最重要的是,检查一下文档,确保如果你选择省略或包含,你明白为什么你要做出这样的决定。

其他回答

我认为回答这个问题最简单的方法是查看MDN网络文档和其他网络标准网站。

我不喜欢把导航放在头部。我的理由是:

逻辑

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

可访问性

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

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

“HTML标题元素”“定义了一个页面标题-通常包含网站的logo和名称,可能还有一个水平菜单…”

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

它的术语内隐式使用的NAV,你可以使用它的任何地方,有分组网站导航,虽然它通常被省略从“页脚”部分的迷你导航/重要的网站链接。

实际上,这取决于个人/团队的选择。决定你和你的团队觉得什么更语义化、更重要,并努力保持一致。对我来说,如果导航与logo和主网站的“h1”是内联的,那么把它放在“标题”是有意义的,但如果你有不同的设计选择,那么要根据具体情况来决定。

最重要的是,检查一下文档,确保如果你选择省略或包含,你明白为什么你要做出这样的决定。

为了扩展@JoshuaMaddox所说的,在MDN学习区域,在“HTML介绍”部分,文档和网站结构子部分说(粗体/强调是我说的):

Header Usually a big strip across the top with a big heading and/or logo. This is where the main common information about a website usually stays from one webpage to another. Navigation bar Links to the site's main sections; usually represented by menu buttons, links, or tabs. Like the header, this content usually remains consistent from one webpage to another — having an inconsistent navigation on your website will just lead to confused, frustrated users. Many web designers consider the navigation bar to be part of the header rather than a individual component, but that's not a requirement; in fact some also argue that having the two separate is better for accessibility, as screen readers can read the two features better if they are separate.

这完全取决于你。你可以把它们放在标题中,也可以不放在,只要其中的元素只是内部导航元素(即不要链接到外部网站,如twitter或facebook帐户),那么就没问题。

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

你可以在HTML5 Doctor上阅读更多相关内容。