1

header我了解每页使用多个元素在语义上是可以接受的。根据http://html5doctor.com/the-header-element/,对其使用的主要限制是它应该包含一个标题元素。

似乎合乎逻辑的是,每<header>一种都会重置标题的层次结构——所以我在每一种中使用的标题<header>应该是<h1>. 但这导致或多或少只<h1>被使用过,因为我很少需要在给定的标题中包含子标题。

我的问题是,在标题中使用标题更合适——它们是否应该遵循页面上标题的层次结构(所以一个更无关紧要的标题会有一个<h4>标题),还是可以设置标题大多数时候给定的标题<h1>,因为它实际上代表该特定标题的标题,而不是页面?

4

2 回答 2

2

这似乎是合乎逻辑的,每<header>一种都会重置标题的层次结构 […]

不是这种情况。只有分段内容元素 ( section, article, aside, nav) 和标题元素 ( h1- h6) 对标题层次结构有影响。文档大纲。

[...] 所以我在每个中使用的标题<header>应该是<h1>

不可以。在某些情况下,这可能会创建错误的文档大纲。规则应该是:

您在每个分段内容元素(、、、 )中使用的第一个标题(分别是分段根元素,如)可能是. 可以,不是必须的。sectionarticleasidenavbodyh1

只需忽略header以决定使用哪些标题。

您可以有一个有h1但没有的部分header
你可以有一个没有h1但有的部分header
你可以有一个没有h1和没有的部分header
您可以有一个带有h1和的部分header,但h1不是header.

如果你应该h1在任何地方使用或者也h2- h6?两种方式都允许(如果您正确使用分段内容元素)。HTML5 (CR) 规范建议(我粗体):

部分可以包含任何级别的标题,强烈建议作者使用相应级别的标题作为部分的嵌套级别

所以如果你想遵循这个建议,使用相应标题级别的标题元素(但如果你需要超过六个级别,当然这是不可能实现的)。

优点:更好的向后兼容性(不支持分割内容元素的旧用户代理仍然可以理解大纲)

相反:灵活性较低(如果您移动/粘贴内容,则需要调整标题级别)

于 2014-01-01T19:57:01.593 回答
1

使用 h1-h6 的经验法则应该是关于可访问性和 SEO,因此,每个文档应该只使用一个 h1,然后所有后续使用都是 h2-h6。你也不应该跳过级别,这是根据 W3C 的规定,所以你最终会使用很多 h2,但考虑知道你是否在嵌套,在这种情况下你应该正确排序。

header 元素只是一个容器,所以不要假设您应该重置订单序列,将其视为 div 或任何其他容器元素。您真正想要使用 header 元素的原因是提供更好的 SEO 和对您的内容的可访问性,同时也可能对多个元素进行分组,我会说如果您只嵌套单个 h1-h6 则不需要使用 header 元素没有兄弟元素,你的布局也不需要它,因为这会增加你不需要的 DOM 树的体积。

我同意解释的有趣文章:http: //www.hobo-web.co.uk/headers/

于 2014-01-01T18:11:28.353 回答