正确的HTML5 <header>和标题用法</header>

时间:2014-01-01 12:12:40

标签: html5 html-heading

据我所知,每页使用多个header元素在语义上是可以接受的。根据{{​​3}},其使用的主要限制是它应该包含一个标题元素。

似乎合乎逻辑的是,每个<header>类别都会重置标题的层次结构 - 因此我在每个<header>中使用的标题应该是<h1>。但这导致或多或少仅使用<h1>,因为我很少需要在给定标题中包含子标题。

我的问题是,标题内部标题的使用更合适 - 它们是否应遵循页面标题的层次结构(因此标题更为无关紧要,例如<h4>标题),或者是否可以在大多数时间将给定标题的标题设置为<h1>,因为它实际上代表了特定标题的标题,而不是页面?

2 个答案:

答案 0 :(得分:2)

  

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

事实并非如此。仅切片内容元素(sectionarticleasidenav)和标题元素(h1 - h6)会影响标题层次结构文件大纲。

  

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

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

标题您在每个切片内容元素(sectionarticleasidenav)中使用的第一个标题(resp。对body)之类的根元素进行分区可能是h1。可是,不是必须的。

完全忽略header来决定使用哪个标题。

您可以使用h1但没有header的部分 您可以使用h1header但不包含h1的部分 您可以使用不包含header且没有h1的部分 您可以使用headerh1的部分,但header不是h1的孩子。

如果您应该在任何地方使用h2,或者h6 - {{1}}?允许两种方式(如果您正确使用切片内容元素)。 HTML5 (CR) spec recommends(由我粗体):

  

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

因此,如果您想遵循此建议,请使用相应标题级别的标题元素(但如果您需要超过六个级别,则当然不可能实现此目标)。

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

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

答案 1 :(得分:1)

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

header元素只是一个容器,因此不要假设您应该重置顺序序列,将其视为div或任何其他容器元素。您真正想要使用标题元素的原因是为您的内容提供更好的搜索引擎优化和可访问性,同时也可能将多个元素分组,我想如果您只是嵌套单个h1-h6,则不需要使用标题元素没有兄弟元素,你的布局不需要它,因为这会增加你不需要的DOM树的批量。

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