HTML文档中的标题体系承担着双重职责：一方面要清晰地告诉访问者当前看到的内容处于文章结构的哪个位置，另一方面也要让搜索引擎和辅助技术能够快速理解页面的信息骨架。很多人以为副标题只是字号小一点的文字，实际上在HTML里，副标题的确立方式会直接影响到文档的语义完整性。只有把h1到h6这些标签的层级逻辑理顺，才能真正实现在HTML文档中建立可靠的副标题层级。
认识h1到h6的标题层级体系
HTML从诞生之初就规定了六级标题标签，从h1到h6的重要性依次递减。h1代表整个文档最核心的主题，通常一个页面只能出现一次，h2则是h1之下的第一层子标题，可以理解为章节标题，h3再往下则是h2章节中的小节标题，以此类推。这样的层级关系形成了文档大纲，浏览器、搜索引擎和屏幕阅读器都能通过这组标签快速勾勒出内容的轮廓。
下面这段代码展示了最基础的标题层级写法，从h1一直到h6，每个标签都对应着不同级别的语义权重。可以看到，默认样式下字体大小逐级变小，但视觉上的大小差异只是表象，真正的价值在于标签内在的层级含义。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>标题层级示例</title>
</head>
<body>
<h1>网站前端开发完全指南</h1>
<h2>HTML基础入门</h2>
<h3>常用文本标签</h3>
<h4>段落与换行</h4>
<h5>短语元素的用法</h5>
<h6>细节中的细节</h6>
</body>
</html>
在实际页面开发中，很少会把六级标题全部用满。多数内容型页面用到h3或h4就已经足够深入了，强行往下细分反而会让结构显得琐碎。从文档维护的角度来看，标题层级应该和内容的重要程度成正比，级别越高的标题所辖的内容范围应该越大，级与级之间要形成清晰的包含关系。
副标题的两种实现方案对比
副标题这个词在不同语境下含义略有差异，一种是指h2到h6这类相对h1而言更低层级的真实标题，另一种是指出现在主标题旁边、字号稍大但语义上并不属于标题体系的装饰性文字。前者直接使用h2到h6标签即可，后者则需要借助p标签和CSS来实现，这样才不会破坏文档的结构语义。
以下代码实现了两种副标题方案。第一种使用h2标签表示章节副标题，属于结构化标题，会进入文档大纲。第二种使用p标签加class属性模拟副标题外观，它不会干扰标题层级，适合用在文章开头主标题下方的那行类似引言的文字上。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>副标题实现方式对比</title>
<style>
.sub-title {
font-size: 18px;
color: #666;
margin-top: -10px;
font-weight: normal;
}
</style>
</head>
<body>
<article>
<h1>深入理解CSS浮动的底层原理</h1>
<p class="sub-title">从包含块到格式化上下文的完整梳理</p>
<h2>浮动的基本行为</h2>
<p>浮动元素会脱离普通文档流，并沿着其容器的左侧或右侧排列。</p>
<h2>清除浮动的可行方案</h2>
<p>使用clear属性或者BFC可以避免高度塌陷问题。</p>
</article>
</body>
</html>
两种方案的选择取决于目标。如果这行副标题是文章的一个真实章节，需要参与目录跳转或SEO结构分析，那就应该用h2到h6中的某一个。如果它只是主标题的补充说明，起到引导阅读的作用，那么用p标签加class是更合理的做法，既保留了视觉上的呈现效果，又不会让文档大纲中出现多余的节点。
标题层级的规划原则与常见误区
标题层级的规划在写作前就应该想清楚，而不是写完正文之后才随手补上。一个常见的做法是先列出文章的骨架：中心主题对应h1，各个大部分对应h2，每个大部分下面细分的议题对应h3。这种自上而下的规划方式能确保结构紧凑，也便于发现内容组织上的缺失或重复，在动手写代码之前就能把逻辑理顺。
规划标题层级最容易犯的错误是跳级。例如h1下面直接跟h3，中间跳过了h2，这在HTML语法上不会报错，但在语义上会产生断层，既不利于内容理解，也会让一些浏览器插件和辅助工具在生成大纲时感到困惑。保持层级逐级递增看起来是小事，却能反映出整份文档的组织是否扎实。
另一个常见误区是过度使用h1。有些页面为了追求字体大小统一，把多个区块标题都设成h1，这会弱化主标题的重要性，也让搜索引挚难以判断哪个才是页面真正的主角。正确的做法是只保留一个h1，其余标题依次使用h2、h3、h4。如果实在觉得默认字体大小不合适，应该通过CSS调整样式，而不是改变标签层级来达到视觉目的。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文章标题层级规划示例</title>
</head>
<body>
<article>
<h1>使用JavaScript实现拖拽上传组件</h1>
<p>拖拽上传是后台管理系统中常见的交互形式，本文从零开始实现一个轻量组件。</p>
<h2>搭建基础结构</h2>
<p>先确定组件的DOM结构，再为拖拽区域绑定事件。</p>
<h3>设置拖拽区域</h3>
<p>拖拽区域需要监听dragover、dragenter和drop事件。</p>
<h3>处理文件数据</h3>
<p>从事件对象的dataTransfer属性中取出文件列表。</p>
<h2>实现上传进度反馈</h2>
<p>上传进度可以通过XMLHttpRequest的progress事件获取。</p>
<h3>进度条的UI更新</h3>
<p>根据进度值动态修改进度条的宽度属性。</p>
<h3>错误处理与重试机制</h3>
<p>上传失败时提示用户并可选择重新上传。</p>
</article>
</body>
</html>
从SEO的角度看，结构化良好的标题层级能帮助搜索引擎更准确地理解页面内容的重点分布，从而在搜索结果中呈现更贴切的摘要。从无障碍角度看，屏幕阅读器用户可以借助标题层级在页面中快速跳转，跳过不必要的导航内容直达自己关心的章节。所以，在HTML文档中建立副标题层级不应该只被当作样式问题来对待，而是应当纳入整体页面架构的考量之中。弄清楚h1到h6各自的职责，再根据内容逻辑合理地编排它们，才能让文档既美观又可靠。