标题层级设计的核心是构建语义骨架：H1唯一且明确主题，H2划分主干模块不跳级，H3+仅必要嵌套且≤三层，禁用样式模拟标题，确保机器可读与用户可导航。
标题层级设计的核心是让内容逻辑“自己说话”——不用看样式，光靠结构就能读出主次、分清模块、快速定位重点。它不是排版技巧，而是网页的语义骨架。
一个 H1 锚定整页唯一主题
H1 必须且只能出现一次，放在 main 或页面最上方的 header 里，直接写明这页是干什么的。比如产品页就写“无线降噪耳机 Pro”，不是“欢迎来到XX科技”，更不是轮播图里塞的“新品上市”。CMS 或单页应用切换路由时，要同步更新 H1 文本，不能靠 CSS 隐藏旧标题再显示新的。
H2 划分主干模块，不跳级、不混用
所有一级内容区块都用 H2 开头，比如“功能特点”“用户评价”“技术参数”。每个 H2 应该能独立成块，不依赖上下文也能被理解。禁止 H1 后直接跟 H3；也不要用 H3 去“视觉上变小”替代 H2——屏幕阅读器会跳过整个层级，用户完全感知不到这个模块存在。
H3 及以下只在必要时嵌套，控制在三层内
H3 仅用于某个 H2 下的细分项，H4 起只在政策文件、法律条款等极少数复杂场景才需出现。多数内容型页面用到 H3 就够了。嵌套过深（如 H2 → H3 → H4 → H5）会让认知负荷陡增，尤其对注意力易分散或有认知障碍的用户。文字要简洁主动，避免“关于……的说明”这类模糊表达。
立即学习“前端免费学习笔记（深入）”；
标题必须真实反映内容，不靠样式伪装
禁用 div class="title" 或 CSS 加粗缩放来模拟标题。屏幕阅读器不会识别它们为大纲节点，用户无法用快捷键跳转。同样，富文本编辑器输出的 “####” 若前面缺 “###”，渲染层要自动补逻辑占位，否则结构断裂。样式和语义必须彻底分离：你可以把 H3 设得比 H1 还大，只要 DOM 层级正确，机器就读得准。
