HTML标题标签详解：h1到h6的区别与使用规范
在HTML文档结构中，标题标签是语义化标记的重要组成部分，用于定义页面的层级标题，同时帮助浏览器、搜索引擎和辅助工具理解内容的逻辑结构。HTML共提供了6级标题标签，分别是<h1>到<h6>，它们的使用场景和语义权重存在明显差异。
一、HTML标题标签的定义
HTML标题标签是块级元素，默认会独占一行，并且浏览器会为不同级别的标题设置默认的字体大小和加粗样式。这些标签的核心作用不是控制视觉样式，而是传递内容的层级关系，因此不建议为了调整文字大小而选择标题标签，样式调整应该通过CSS实现。
6级标题的语义从<h1>到<h6>依次递减，<h1>代表最高级别的标题，通常是一个页面中最重要的内容概括，<h6>则是级别最低的标题，用于细分最底层的内容模块。
二、h1到h6的核心区别
1. 语义权重差异
搜索引擎爬虫在解析页面时，会根据标题标签的级别判断内容的重要性：
<h1>的权重最高，通常一个页面只建议出现1次，用于标识页面的核心主题，比如文章标题、产品名称等。<h2>到<h6>的权重依次降低，用于划分页面的子模块，形成嵌套的层级结构，比如<h2>可以作为章节标题，<h3>作为章节下的小节标题，以此类推。
2. 默认样式差异
不同浏览器的默认样式可能略有不同，但通用的默认表现如下：
| 标签 | 默认字体大小（以Chrome为例） | 默认样式 |
|---|---|---|
<h1> | 2em（约32px） | 加粗，上下有较大的外边距 |
<h2> | 1.5em（约24px） | 加粗，上下外边距小于h1 |
<h3> | 1.17em（约18.72px） | 加粗，上下外边距小于h2 |
<h4> | 1em（约16px） | 加粗，上下外边距小于h3 |
<h5> | 0.83em（约13.28px） | 加粗，上下外边距小于h4 |
<h6> | 0.67em（约10.72px） | 加粗，上下外边距小于h5 |
3. 使用场景差异
不同级别的标题对应不同的内容层级，合理的使用方式如下：
<h1>：页面唯一核心标题，比如博客文章的主标题、电商商品的主名称。<h2>：页面的主要模块标题，比如博客文章的大章节、商品详情的“规格参数”“用户评价”模块。<h3>：二级模块下的子模块标题，比如“规格参数”下的“基础信息”“性能参数”小节。<h4>到<h6>：更细粒度的内容划分，根据实际内容层级选择，通常日常开发中较少用到h5和h6。
三、使用示例
以下是一个合理的标题层级使用示例，模拟一篇技术文章的标题结构：
<body> <h1>HTML标题标签使用指南</h1> <h2>一、标题标签的基础概念</h2> <p>介绍标题标签的基本定义和作用...</p> <h2>二、不同级别标题的差异</h2> <h3>2.1 语义权重差异</h3> <p>讲解语义权重的逻辑...</p> <h3>2.2 默认样式差异</h3> <p>展示不同标签的默认样式...</p> <h2>三、最佳实践</h2> <h3>3.1 避免的错误用法</h3> <h4>3.1.1 不要为了调样式用标题标签</h4> <p>说明错误原因...</p> </body>
四、注意事项
一个页面中
<h1>标签建议只使用1次，多个<h1>会分散搜索引擎对页面核心主题的判断，不利于SEO优化。标题标签的层级要保持连续，不要跳级使用，比如不要在
<h1>之后直接使用<h3>，应该按照h1、h2、h3的顺序嵌套，保证结构逻辑清晰。不要仅为了调整文字大小使用标题标签，如果需要让普通文本显示为更大的字号，应该使用
<span>配合CSS的font-size属性实现。标题标签内部可以包含文本、图片、
<span>等内联元素，但不建议嵌套块级元素，避免破坏语义结构。
五、常见问题解答
问：h1到h6标签必须全部使用吗？
不需要，根据实际内容的层级选择即可，简单页面可能只用到h1和h2，复杂文档才会用到更低的层级。
问：可以用CSS修改标题标签的默认样式吗？
完全可以，标题标签的默认样式只是浏览器的预设，实际开发中通常会通过CSS重置默认样式，或者根据设计需求自定义字体大小、颜色、外边距等属性。
问：标题标签对无障碍访问有什么作用？
屏幕阅读器等辅助工具会识别标题标签的层级，帮助视障用户快速跳转和了解页面结构，正确的标题层级可以大幅提升无障碍访问体验。