先记住这个答案
h1 到 h6 是六级章节标题，层级表达的是内容从属关系。可访问性上，屏幕阅读器用户常按标题逐层跳转或生成标题列表来浏览页面，跳级或缺失层级会让人怀疑内容被遗漏。SEO 上，搜索引擎借助标题层级推断页面主题和各部分的权重与边界。正确做法是：一个页面一般只用一个 h1 概括全页，从 h1 开始逐级嵌套、不跳级；需要改变视觉大小时用 CSS 的 font-size，而不是改用更低级的标题。
- 标题层级表达内容结构，不是字号选择器
- 一个页面通常只保留一个 h1
- 从 h1 开始逐级嵌套，不要跳级
- 视觉大小用 CSS 控制，不换标题标签
标题层级如何被辅助技术与搜索引擎消费
h1 到 h6 的隐式 ARIA 角色是 heading，层级数字本身携带结构信息。屏幕阅读器普遍提供按标题跳转和生成标题目录的功能，用户靠这份大纲快速定位内容。如果从 h1 直接跳到 h3，用户会怀疑中间缺失了一个 h2 章节，导航信心被破坏；反过来，结束子章节后从 h4 回到 h2 是允许的，因为层级只在向下深入时不能跳跃。
搜索引擎同样把标题层级当作内容结构的强信号：h1 提示页面主题，h2 划分主要板块，更深的层级界定板块内的细分。层级混乱时，爬虫仍能索引文本，但对各段落的主题归属和重要性判断会变弱。需要强调的是，标题只是结构信号之一，它不能替代内容质量，也不能保证排名提升。
营销落地页的视觉字号与结构冲突
一个活动落地页设计稿要求：页面顶部大标题『春季促销』，中部『活动规则』视觉上次要，底部『常见问题』里每条问题标题字号很大。设计师提议把常见问题用 h1 以匹配大字号，活动规则用 h4 因为它看起来小。输入条件是三处内容的从属关系：规则和常见问题都是促销页的平级板块，问题标题是常见问题下的子项。
正确处理是：h1 给『春季促销』，h2 给『活动规则』和『常见问题』，h3 给每条问题，全部视觉大小用 CSS 类控制。这样屏幕阅读器生成的大纲是三层清晰结构，搜索引擎也能识别『常见问题』是一个独立板块，其中的问题标题还可能被用于生成结构化摘要。若按字号选标签，大纲会变成多个 h1 平级加孤立的 h4，两种消费者都会误判页面结构。
<style>
.page-title { font-size: 2rem; }
.section-title { font-size: 1.25rem; }
.question-title { font-size: 1.6rem; font-weight: 700; }
</style>
<h1 class="page-title">春季促销</h1>
<h2 class="section-title">活动规则</h2>
<p>满 200 减 50，限本周。</p>
<h2 class="section-title">常见问题</h2>
<h3 class="question-title">优惠可以叠加吗？</h3>
<p>不可以，每单限用一次。</p>适用于任意支持 HTML5 的浏览器。问题标题虽用 h3，但通过类选择器显示得比 h2 更大，证明视觉大小与标题层级可以完全解耦。
规则失效或被误用的边界条件
最容易失效的条件是把标题当成排版工具：为了让侧边栏免责声明显得小而用 h5，或为强调一句口号用 h1。这会把非章节内容注入大纲，屏幕阅读器目录里出现无意义条目，用户无法区分真实章节。判断方法是把该文本从标题改成 p 或 div 后看大纲是否更合理，如果是，说明它本就不该是标题。
另一个边界是多 h1 与组件复用。HTML 标准允许平级的多个 h1，但旧版标准里嵌套 section 内放多个 h1 依赖的大纲算法从未被浏览器真正实现，现已不合规。在组件化开发中，可复用卡片组件内部不应写死 h1，而应由使用方传入层级或用 CSS 控制样式，代价是组件 API 更复杂，但换来在任何页面位置嵌套都不破坏大纲。
容易答错的地方
- 用标题层级控制字体大小
- 标题标签的职责是表达结构，字号应交给 CSS 的 font-size。为视觉效果选 h4 会污染文档大纲，让屏幕阅读器目录出现错位章节，也让搜索引擎误判内容归属。
- 认为多个 h1 能提升关键词权重
- 堆砌多个 h1 不会让主题更突出，反而稀释页面主题信号并干扰标题导航。标准允许多个平级 h1，但最佳实践是一个页面一个 h1，概括全页内容，与 title 元素呼应。
面试官还会怎么问？
页面可以完全没有 h1 吗？
语法上可以，浏览器不会报错，但页面会失去最高层级的主题锚点。屏幕阅读器用户的标题目录缺少入口，搜索引擎也少了一个主题信号。实务上每个页面应有且一般仅有一个 h1，与 title 内容呼应但不必逐字相同，这样大纲树才有清晰的根节点。
跳级一定是从 h1 到 h3 才算吗，h4 回到 h2 呢？
规则只约束向下深入时不能跳级，比如 h1 之后直接出现 h3，用户会寻找不存在的 h2。而子章节结束后从 h4 回到 h2 是合法的，因为这表示当前子章节已闭合、进入下一个平级板块。记忆方式：深入只能一次一级，返回可以跨多级。
用 div 加 role="heading" 和 aria-level 能替代 h1-h6 吗？
技术上能用 aria-level 表达 1 到 6 的层级，效果接近原生标题，但违背了『有原生元素就不用 ARIA』的原则。原生 hn 自带隐式 heading 角色、默认样式和更广泛的兼容性，维护成本更低。只有在无法修改标签的极端场景才考虑 ARIA 方案，并需充分测试。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。