下载掌阅APP，畅读海量书库
立即打开
h1～h6是标题标签，h表示“header”。h1～h6在HTML语义化中占有极其重要的地位。h1 ～ h6按照标题的重要性依次递减，其中h1重要性最高，h6重要性最低。
相对于其他语义化标签，h1 ～ h6在搜索引擎优化（即SEO）中占有相当重要的地位。在一个页面中，h1 ～ h6这6个标签，我们不需要全部都用上，都是根据需要才用的。对于h1 ～ h6，一般情况下我们只会用到h1、h2、h3和h4，很少再会去用h5和h6，因为一个页面不可能用到那么多级的标题。并且从搜索引擎优化的角度来说，h1、h2、h3和h4这4个标签会被赋予一定的权重，而h5和h6的权重跟普通标签差不多，在SEO优化上意义不大。
对于标题h1 ～ h6的语义化，我们需要注意以下四个方面。
（1）一个页面只能有一个h1标签。
（2）h1 ～ h6之间不要断层。
（3）不要用h1 ～ h6来定义样式。
（4）不要用div来代替h1 ～ h6。
h1标签表示每个页面中最高层级的标题，搜索引擎会赋予h1标签最高权重。虽然W3C没有明确规定一个页面不能有多个h1标签，但是我们还是推荐“一个页面一个h1标签”的做法。如果一个页面出现多个h1，对搜索引擎可能不好，也可能会被判以作弊。就像你写文章一样，一个页面就等于一篇文章，你见过一篇文章有多个主标题的么？
搜索引擎对h1 ～ h6标签比较敏感，尤其是h1和h2。一个语义良好的页面，h1 ～ h6应该是完整有序而没有出现断层的。也就是说，要按照“h1、h2、h3、h4”这样的顺序依次排列下来，不要出现“h1、h3、h4”而漏掉h2的情况。
我们都知道h1 ～ h6是有默认样式的，如图2-1所示。在实际开发中，很多时候我们需要为文本定义字体加粗或者字体大小。有些人喜欢用h1 ～ h6来代替CSS，使用标签来控制样式，这是一种非常不好的做法。我们一定要记住，HTML关注的是结构（语义），CSS关注的是样式，结构跟样式应该分离。
图2-2 h1～h6在浏览器中的效果
从语义上来说，一个页面的标题应该使用h1 ～ h6标签，不要使用div来代替。
举例：
在浏览器预览效果如图2-3所示。
图2-3 div实现的标题效果
分析：
div是无语义的标签，如果使用div来代替h1 ～ h6，后期维护比较困难，而且对SEO影响也非常大。因为这种做法会让一个页面丢失大量的权重。