heading content笔记

日期：2010-03-21 分类：前端制作

一个页面里应该有几个h1？这个问题从W3C的HTML4.01文档开始就争论到现在。之前就有这个疑问，当时选取了一篇文章只能有一个标题的常规逻辑作为参考。今天又系统看下HTML 5草案里的heading content说明及HTML 4.01的文档，加深理解。

首先，HTML 5规定了heading content和sectioning content两种概念：
heading content包含h1、h2、h3、h4、h5、h6及hgroup；
sectioning content则包含article、aside、nav、section，以及sectioning roots元素blockquote、fieldset、body、td、details、figure

HTML 5草案中部分文档的蹩脚翻译：

sectioning content元素中的第一个heading content元素代表了这个章节的标题。之后的同级或者更高级的标题（暗示）开始新的章节，而低级的标题暗示开始当前章节的子章节；
sectioning content元素总是代笔着在它所属的祖先元素下建立新的子章节，无论此章节所使用的标题等级；
建议明确指定sectioning content的外框元素，来替代在同一个sectioning content元素中使用各级标题来暗示上下文层级关系。
sections可以包含任何等级的标题，但是强烈建议全部使用h1，或者使用适用于当前所在章节等级的标题。

思考：这个强烈建议（authors are strongly encouraged）的目的是什么？

强化sectioning content的DOM层级暗示作用，简化heading content带来的歧义；
避免在低级section中使用高级heading带来的误导
实际应用中h1的尴尬——比如常见的站点logo使用h1标识站点标题，但是在文章内容页需要强调的是文章的标题

W3C给的代码示例：
这种代码在语法上没有任何问题

<body>
<h4>Apples</h4>
<p>Apples are fruit.</p>
<section> 
    <h2>Taste</h2>
    <p>They taste lovely.</p>
        <h6>Sweet</h6>
        <p>Red apples are sweeter than green ones.</p>
    <h1>Color</h1>
    <p>Apples come in various colors.</p>
</section>
</body>

但是使用如下结构更容易让人理解

<body>
<h1>Apples</h1>
<p>Apples are fruit.</p>
<section>
    <h2>Taste</h2>
    <p>They taste lovely.</p>
    <section>
        <h3>Sweet</h3>
        <p>Red apples are sweeter than green ones.</p>
    </section>
</section>
<section> 
    <h2>Color</h2>
    <p>Apples come in various colors.</p>
</section>
</body>

在HTML 5草案中h1-h6部分中介绍，这些元素具有与数字相同的等级，h1为最高，h6为最低。两个相同的元素则具有相同的等级。语法上来讲，h系列标签的等级评判建立在DOM树的层级.同样有两种不同的示例，指出其等级相同：

<body> 
    <h1>Let’s call it a draw(ing surface)</h1>
    <h2>Diving in</h2>
    <h2>Simple shapes</h2>
    <h2>Canvas coordinates</h2>
    <h3>Canvas coordinates diagram</h3>
    <h2>Paths</h2>
</body>

<body> 
    <h1>Let’s call it a draw(ing surface)</h1>
    <section>
        <h1>Diving in</h1>
    </section>
    <section>
        <h1>Simple shapes</h1>
    </section>
    <section>
        <h1>Canvas coordinates</h1>
        <section>
            <h1>Canvas coordinates diagram</h1>
        </section>
    </section>
    <section>
        <h1>Paths</h1>
    </section>
</body>

而在HTML 4.01的文档中，仅仅指出“一些人认为越级使用标题标签不合理，h1,h2,h1可以，h1,h3,h1不可以”，侧面也避过了h1唯一性的话题。

这个问题国外也有很多讨论，http://annevankesteren.nl/2004/05/h1，里面评论中有一句话说的不错：HTML is nice to use for documents, but not so nice for building user interfaces

目前更多的考量是从SEO角度出发，因为没有资料说明搜索引擎也会按照DOM层级来确定权重优先级。

Tags: h1, headline, html

heading content笔记

Leave a Comment

分类

链接

其他