先记住这个答案
标题元素建立文章的内容大纲，h2 应是 h1 下的章节，h3 是该章节里的小节；字号外观应交给 CSS。读屏用户可以按标题跳读，所以把标题层级仅按视觉大小挑选，会让导航路径断裂。一页出现多个 h1 不是语法错误，但仍要确认每个标题代表什么内容区域。
h1通常是页面主标题- 子章节依次使用
h2、h3 - 字号由 CSS 控制
section不会自动重置级别
教程章节怎样安排标题级别
一篇教程有总标题“Flex 布局”，下面是“主轴”和“交叉轴”两节，每节还有示例。总标题用 h1，两节用 h2，示例用 h3。如果把“小结”只因为想要较小字体就写成 h5，读屏用户按标题导航时会看到不合逻辑的层级。视觉字号、颜色和间距用 CSS 调整，不需要靠换标签造样式。
<main>
<h1>Flex 布局</h1>
<section>
<h2>主轴</h2>
<h3>一个排列示例</h3>
</section>
</main>浏览器和辅助技术能识别 h1 至 h6 是标题级别，用户可借此了解文章结构并跳转。
示例中“主轴”属于“Flex 布局”这个主题，因此是 h2；“一个排列示例”是主轴章节里的内容，因此是 h3。若后来又新增“交叉轴”，它应与“主轴”并列，而不是因为页面设计把它放在右侧就降一级。维护内容时可从标题列表单独读一遍，看能否像目录那样理解文章；读不通通常说明层级按样式而不是按内容选了。
标题层级表达内容从属
HTML 不强制页面只能有一个 h1，但普通内容页用一个清楚的主标题通常更易理解；多个独立区域也应保证整体层级可读。section 不会自动替你把内部 h1 变成下一级标题，别依赖过去的“章节自动大纲”想象。标题文字应具体说明该节内容，而不是每一段都重复“介绍”。
例如教程标题是 h1，“安装”“配置”是并列的 h2，配置下的“开发环境”和“生产环境”再用 h3。若为了让“安装”看起来小一些就降成 h4，读屏的标题列表会突然跳级，读者难以判断它属于哪章。可用 CSS 调整字号，却不要让视觉设计重新决定从属关系；改版时这种分离尤其重要。
容易答错的地方
- 把
h4当成小号文字样式 - 字号属于 CSS，标题级别要由内容层级决定。
- 认为
section会自动重置标题级别 - 实际辅助技术仍读取元素本身的级别，应显式选合适的
h2、h3。
面试官还会怎么问？
页面能有多个 h1 吗？
规范层面可以，但应检查用户能否理解各主标题关系；普通文章一个主标题更直接。
要不要绝对禁止从 h2 跳到 h4？
不是语法错误，但一般应按内容层级顺序组织，跳级需有明确结构理由。
标题只有图标怎么办？
标题仍要有可理解的文本或可访问名称，单靠装饰图标难以表达章节主题。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。