html标题必须遵循语义化层级规则：一个页面仅一个h1，h2为h1子节，h3隶属h2且不可跳级；section/article内可重置层级；禁用div模拟标题，避免cms多h1、误用h5作副标题等错误。
HTML 标题不是“选个好看的字号”就行，而是语义结构的关键——用错 <h1></h1> 到 <h6></h6> 会导致 SEO 下降、屏幕阅读器混乱、甚至影响 CSS 选择器的可维护性。
为什么不能只靠 CSS 改样式来当标题？
很多人用 <div class="title"> + CSS 模拟 <code><h1></h1>，但这样丢失了语义：
- 搜索引擎无法识别内容层级，
<h1></h1>权重最高，缺失或重复会弱化页面主题 - 视障用户依赖屏幕阅读器按
<h1></h1>–<h6></h6>跳转，乱序（比如<h3></h3>后直接<h1></h1>）会让其迷失 - CSS 中写
h2 + h3或article h4这类组合选择器时，前提就是标签本身是正确的语义标签
h1 到 h6 的嵌套规则到底怎么算？
不是“数字越小越重要”就完事，关键是**视觉层级与逻辑层级一致**：
- 一个页面有且仅有一个
<h1></h1>：通常是主标题（如文章标题、产品名），代表整个页面的主题 -
<h2></h2>是<h1></h1>的一级子节（如“功能介绍”“使用步骤”） -
<h3></h3>隶属于某个<h2></h2>，不能跳级（禁止<h2></h2>→<h4></h4>） - 在
<section></section>或<article></article>内部，可以重新开始层级（即<section><h2></h2></section>里嵌<h3></h3>，不强制接续外层<h2></h2>）
实际写 HTML 时容易踩的坑
这些错误高频出现，且调试困难：
-
<h1></h1>被 CMS 自动生成多个（比如页头一个、正文又一个）→ 检查模板，保留唯一<h1></h1>，其余降为<h2></h2> - 用
<h5></h5>做“小字副标题”，只因它默认字号小 → 应该用<p class="subtitle"></p>或<small></small>，标题标签只用于内容分段 - JS 动态插入标题时没校验层级，比如弹窗里硬塞
<h1></h1>→ 弹窗属于附属内容，应统一用<h3></h3>或更低，并加aria-labelledby - 为了兼容旧浏览器给
<h1></h1>加style="font-size: 16px"，结果覆盖了所有默认样式 → 用 CSS 重置时保留font-weight和margin的语义意图，别一棍子打死
移动端和无障碍场景下的特殊注意点
标题不仅是给眼睛看的：
- iOS VoiceOver 和 Android TalkBack 默认开启“标题导航”，用户双指上下滑动会按
<h1></h1>–<h6></h6>跳转，若中间断层（比如缺<h3></h3>），他们会直接跳到下一个<h4></h4>，以为内容被跳过 - 部分安卓浏览器对
<h6></h6>渲染极小（甚至小于 12px），若真需要“最小标题”，优先考虑<h5></h5>+font-size微调，而非依赖<h6></h6>的默认表现 - 不要用
role="heading" aria-level="2"替代原生<h2></h2>—— 多余且增加 JS 依赖，原生标签更稳
标题层级一旦写错，后期重构成本远高于初期多花两分钟想清楚结构。最稳妥的做法：先手写大纲（h1 → h2 → h3…），再贴代码，比边写边调要快得多。
