合法标题层级必须逻辑连贯、不可跳级，即h1后可接h2，h2后可接h2或h3，但禁止h1直接跟h3；搜索引擎和屏幕阅读器依赖此结构理解内容主次，跳级将导致语义断裂与解析错误。
不是必须“严格递增”，但必须“逻辑连贯、不可跳级”。h1 后可以接 h2，h2 后可以接 h3 或另一个 h2（并列），但不能 h1 直接跟 h3——中间缺了 h2，就破坏了层级关系。搜索引擎和屏幕阅读器依赖这种结构理解内容主次，跳级会让它们误判信息重要性。
什么是合法的层级结构
合法结构遵循“树状嵌套”逻辑，不是数值递增，而是父子归属清晰：
- h1 → h2 → h3 → h4：标准逐级细分（如“人工智能概述”→“技术原理”→“机器学习基础”→“监督学习”）
- h1 → h2 → h2 → h3：多个并列章节后各自展开子节（如“引言”“方法”“结果”都是 h2，“结果”下再分“数据表现”“用户反馈”为 h3）
- h1 → h2 → h4：❌ 错误。h4 必须有对应的 h3 父级，否则语义断裂
搜索引擎如何解析标题层级
Google 和 Bing 把 h1–h6 当作文档大纲（outline）来提取主题与段落关系：
- h1 是页面核心主题信号，影响标题权重与精选摘要（Featured Snippet）触发概率
- h2 被视为一级内容模块，常出现在搜索结果的结构化片段中（如“常见问题”“使用步骤”）
- 连续跳级（如 h1→h3）会让算法难以建立上下文，可能降权或忽略深层标题的语义价值
- 多个 h1 不会直接惩罚，但会稀释主主题信号，降低页面聚焦度
实际开发中怎么检查和避免出错
靠肉眼容易漏，建议结合工具和习惯确认：
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具（Elements 面板）查看标题标签顺序，观察是否出现 h1→h3、h2→h5 等断层
- 安装 Lighthouse 或 axe 浏览器插件，运行“Accessibility”审计，它会明确报出“标题跳级”“缺少 h1”等问题
- 写内容前先列大纲：用纯文本写出 h1/h2/h3 层级，再编码实现，避免边写边改导致结构松散
- CMS 或模板中注意复用逻辑——有些页脚、侧栏组件意外插入 h2，会污染主内容层级
视觉样式 ≠ 标题层级
别因为“h3 看起来太小”就改用 h2 加 CSS 压缩字号。这样语义错乱，对 SEO 和读屏软件反而有害：
- 用 CSS 调整任意标题的字体大小、颜色、间距，完全不影响其语义级别
- 屏幕阅读器只认标签名（h1–h6），不读 CSS；用户按标题导航时，跳过 h3 就等于跳过一个逻辑节点
- 保持“视觉大小大致匹配层级”是良好实践，但前提是语义正确优先
