标题层级设计核心是结构真实、嵌套严谨、语义清晰：H1唯一且居首，锚定主旨；H2划分主干模块，不跳级；H3+严格嵌套，三层足够；标题须用语义化h1–h6标签，禁用伪标题。
标题层级设计不是为了好看，而是帮所有人——尤其是用屏幕阅读器的用户、快速扫读的访客、还有搜索引擎——在几秒内抓住文章骨架。核心就一条：结构真实、嵌套严谨、语义清晰。
一个 H1 锚定全文主旨
H1 必须出现在 <body> 内最靠前的位置，且全页只出现一次。它不是网站名、导航栏文字或轮播图标语，而是这篇文章“到底在讲什么”。比如技术文档页，H1 应是“如何配置 WebP 图片的渐进式加载”，而不是“前端资源中心”。CMS 或单页应用切换路由时，必须同步更新 H1 文本，不能靠 CSS 隐藏旧标签再显示新内容。
H2 划分主干模块，不跳级也不混用
所有一级内容区块都从 H2 开始。例如一篇政策解读文，H2 可以是“适用范围”“申报条件”“办理流程”“常见问题”。每个 H2 应能独立表达一个完整信息单元，用户跳到这一节就能明白它在解决什么问题。禁止 H1 后直接写 H3；也别因视觉上想小一点，就把本该是 H2 的模块硬改成 H3——那会切断逻辑链，辅助技术根本读不到这个模块的存在。
H3 及以下严格嵌套，三层足够
H3 只能出现在某个 H2 内部，作为其细分项；H4 仅在 H3 下仍有进一步拆解需求时才使用（如法律条文中的款、项、目）。大多数文章无需 H5/H6。嵌套过深（比如 H2 → H3 → H4 → H5）会让认知负担加重，尤其对注意力分散或认知障碍用户。每级标题文字要简洁主动，避免“有关……的说明”这类模糊表达，直接说“设置缓存策略”“验证 token 有效性”。
立即学习“前端免费学习笔记（深入）”；
样式和语义彻底分开
你可以用 CSS 把 H3 设得比 H1 还大，只要 DOM 中的标签层级是对的，机器就能正确解析结构。但绝不能用 <div class="h2"> 或 <span style="font-size: 1.5em; font-weight: bold"> 来假装是标题——这些没有语义，屏幕阅读器无法识别，SEO 也完全失效。所有标题必须是真实的 <h1> 至 <h6> 标签，且 level 值必须是 1–6 的整数，动态渲染时要校验，防止输出 <h0> 或 <h7> 这类非法标签。
