在HTML5中,主导航应该位于<header>元素之内还是之外?
在HTML5中,我知道<nav>
可以在页面的标头<header>
元素的内部或外部使用。 对于同时具有辅助导航和主导航的网站来说,通常将辅助导航作为<nav>
元素包含在标头<header>
元素中,而主导航作为<nav>
masthead <header>
元素之外的<nav>
<header>
元素。 但是,如果网站缺less辅助导航,则通常将主导航包含在标头<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简介 – 于02-02-11上午7:38添加
Bruce Lawson和Remy Sharp 介绍HTML5有这样的话题:
标题也可以包含导航。 这对于站点范围的导航非常有用,特别是在模板驱动的站点上,整个
<header>
元素可以来自模板文件。当然,并不要求
<nav>
在<header>
。如果在很大程度上取决于您是否认为站点范围内的导航属于站点范围内的标题,以及关于简化造型的实用考虑因素。
根据最后一句话,似乎本片的作者布鲁斯·劳森(Bruce Lawson)承认,“关于简单造型的实用考虑”在内容和风格之间产生了联系。
这完全取决于你。 你可以将它们放在标题中,只要它们中的元素只是内部导航元素(即不要链接到外部网站,如Twitter或Facebook帐户),那么就可以了。
他们倾向于被放置在标题,因为这是导航经常去的地方,但它并不是一成不变的。
你可以阅读更多关于它在HTML5医生 。
你是否在征求意见,有些不清楚。 “做xxx是常见的”或者是一个实际的规则,所以我会倾向于规则的方向。
您引用的示例似乎基于nav元素规范中的示例。 请记住,规范不断调整,规则有时令人费解,所以我冒昧地说,很多人可能倾向于只是做给予而不是解释。 你用不同的行为显示了两个单独的例子,所以只有很多你可以阅读它。 这两个站点中的哪一个也有相反的sub / nav情况,如果是的话,他们如何处理呢?
最重要的是,规范中没有任何一条是要做的。 与HTML5的目标之一是要清楚 [这是为了比较]关于语义,要求等,所以省略是值得注意的。 就我所知,这些例子是相互独立的,在它们自己的布局要求的背景下是同样有效的。
有导航的源头位置是有条件的是一种愚蠢(另一个红旗)。 只要select一种方法,并与它一起去。
@IdeDevlin是正确的。 MDN的规则说明如下 :
“HTML标题元素”“定义页面标题 – 通常包含网站的标识和名称,可能还有一个水平菜单…”
“可能”这个词是关键。 它继续说,标题不一定需要是站点标题。 例如,您可以在popup式模式或文档的其他有标题的模块化部分中包含“标题”,这对屏幕阅读器上的用户知道这一点很有帮助。
它隐含使用NAV的条款,你可以在任何地方分组站点导航使用它,虽然它通常从迷你导航/重要站点链接的“页脚”部分中省略。
真的是归结为个人/团队的select。 决定你和你的团队所感受到的是更多的语义和更重要的事情,并试图保持一致。 对于我来说,如果导航栏内嵌徽标和主站点的“h1”,那么把它放在“标题”中是有道理的,但是如果你有不同的deviseselect,那么就根据具体情况来决定。
最重要的是检查文件,并确保如果你select省略或包括你明白你为什么做出这样的决定。
我不喜欢把标题中的导航 。 我的推理是:
逻辑
标题包含有关文档的介绍性信息。 导航是一个链接到其他文档的菜单。 在我看来,这意味着导航的内容属于网站而不是文档。 如果NAV持有前向链接,则会例外。
无障碍
我喜欢把菜单放在源代码的最后,而不是开始。 我使用CSS将它发送到计算机屏幕的顶部,或者留在文本语音浏览器和小屏幕的最后。 这避免了跳过链接的需要。
为了扩展@JoshuaMaddox所说的MDN学习领域,在“HTML入门”一节中, 文档和网站结构小节说(大胆/强调是由我):
头
通常是一个大标题和/或标志的顶部大条。 这是关于网站的主要常见信息通常停留在一个网页的地方。
导航栏
链接到网站的主要部分; 通常由菜单button,链接或选项卡表示。 就像标题一样,这个内容通常在一个网页上保持一致 – 在您的网站上导航不一致只会导致迷惑,沮丧的用户。 许多网页devise师认为导航栏是标题的一部分,而不是一个单独的组件,但这不是一个要求; 实际上也有人认为,将两者分开对于可访问性来说更好,因为如果屏幕阅读器是分开的,屏幕阅读器可以更好地阅读这两个特性 。