2.2.2　定义内容标题

HTML提供了六级标题用于创建页面信息的层级关系。使用h1、h2、h3、h4、h5或h6元素对各级标题进行标记，其中h1是最高级别的标题，h2是h1的子标题，h3是h2的子标题，以此类推。

【示例1】标题代表文档的大纲。当设计网页内容时，可以根据需要为内容的每个主要部分指定一个标题和任意数量的子标题，以及子子标题等。

    <h1>唐诗欣赏</h1>
    <h2>春晓</h2>
    <h3>孟浩然</h3>
    <p>春眠不觉晓，处处闻啼鸟。</p>
    <p>夜来风雨声，花落知多少。</p>

在示例1中，标记为h2的“春晓”是标记为h1的顶级标题“唐诗欣赏”的子标题，而“孟浩然”是h3，它就成了“春晓”的子标题，也是h1的子子标题。如果继续编写页面其余部分的代码，相关的内容（段落、图像、视频等）就要紧跟在对应的标题后面。

对任何页面来说，分级标题都是最重要的HTML元素。标题通常传达的是页面的主题。对搜索引擎而言，如果标题与搜索词匹配，标题就会被赋予很高的权重，尤其是等级最高的h1。当然，不是说页面中的h1越多越好，搜索引擎能够聪明地判断出哪些h1是可用的。

【示例2】使用标题组织内容。下面的产品指南有3个主要部分，每个部分都有不同层级的子标题。标题之间的空格和缩进只是为了让层级关系更清楚一些，它们不会影响最终的显示效果。

    <h1>所有产品分类</h1>
        <h2>进口商品</h2>
        <h2>食品饮料</h2>
            <h3>糖果/巧克力</h3>
                <h4>巧克力 果冻</h4>
                <h4>口香糖 棒棒糖 软糖 奶糖 QQ糖</h4>
            <h3>饼干糕点</h3>
                <h4>饼干 曲奇</h4>
                <h4>糕点 蛋卷 面包 薯片/膨化食品</h4>
        <h2>粮油副食</h2>
            <h3>大米面粉</h3>
            <h3>食用油</h3>

在默认情况下，浏览器会从h1到h6逐级减小标题的字号。如图2.5所示，所有的标题都以粗体显示，h1的字号比h2的大，而h2的又比h3的大，以此类推。每个标题之间的间隔也是由浏览器默认的CSS定制的，它们并不代表HTML文档中有空行。

图2.5　网页内容标题的层级

不要使用h1～h6标记副标题、标语以及无法成为独立标题的子标题。例如，假设有一篇新闻报道，它的主标题后面紧跟一个副标题，这时副标题就应该使用段落或其他非标题元素。

    <h1>天猫超市</h1>
    <p>在乎每件生活小事</p>

提示，HTML5包含一个名为hgroup的元素，用于将连续的标题组合在一起，后来W3C将这个元素从HTML 5.1规范中移除了。

    <h1>客观地看日本，理性地看中国</h1>
    <p class="subhead">日本距离我们并不远，但是如果真的要说它在这十年、二十年有什么样的发展和变化，又好像对它了
解得并不多。本文出自一个在日本生活了快10年的中国作者，来看看他描述的日本，一个除了老龄化和城市干净标签之外的
真实国度。</p>

上面代码是标记文章副标题的一种方法。可以添加一个class，从而能够应用相应的CSS，该class可以被命名为subhead等名称。

提示，曾有人提议在HTML5中引入subhead元素，用于对子标题、副标题、标语、署名等内容进行标记，但是未被W3C采纳。