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)似乎承认,“对易于设计的实用主义考虑”在内容和风格之间产生了耦合。


当前回答

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

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

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

其他回答

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

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

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

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

我不太清楚你是否在征求意见。"做xxx很常见"或者一个实际的规则,所以我倾向于规则的方向。

你引用的例子似乎是基于nav元素规范中的例子。请记住,规范一直在调整,规则有时令人费解,所以我敢打赌,许多人可能倾向于只做给定的事情,而不是解释。您展示了两个具有不同行为的独立示例,所以您只能从中了解到这么多。这些网站是否也有相反的sub/nav情况,如果是这样,他们如何处理?

不过,最重要的是,规范中并没有说明这两种方法都是正确的。HTML5的目标之一是非常清楚语义、需求等,所以这个遗漏是值得注意的。据我所知,这些例子是相互独立的,在它们各自的布局需求等上下文中同样有效。

让导航的源位置是有条件的有点傻(另一个危险信号)。只要选择一种方法并使用它。

为了扩展@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.

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

逻辑

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

可访问性

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