标题跳级（如h2直连h4）会导致读屏用户感知断层、SEO降权及工具报错；应严格遵循层级递进，用h3承接h2，或改用段落/列表组合，禁用跳级“省事”。

h2 直接跳到 h4 会出什么问题

浏览器和读屏软件依赖标题层级表达内容结构，h2 后面突然出现 h4，等于跳过了 h3 这一层逻辑节点。结果是：读屏用户听到“二级标题→四级标题”，中间断层，无法感知子章节的归属；SEO 工具也可能降权该区块，认为语义混乱、内容组织不专业。

常见错误现象：
– 页面大纲视图（如浏览器插件 “HeadingsMap”）显示标题层级断裂
– Lighthouse 报错 Heading levels should only increase by one
– 某些 CMS 导出 HTML 时自动补空 h3，但内容为空，反而更糟

• 永远用 h3 承接 h2，哪怕它只是个过渡性小节（比如“配置步骤”“注意事项”）
• 如果真不需要 h3，就改用 h2 + 段落/列表/强调标签组合，别靠跳级“省事”
• 用 aria-labelledby 或 aria-describedby 补充说明时，不能替代真实标题层级

哪些场景下容易误跳级

最常发生在动态生成内容或组件复用时：比如一个通用卡片组件默认渲染 h3，但被嵌进 h2 区域后没做层级适配；或者 Markdown 转 HTML 工具把 ### 强制转成 h4（因预设了根标题为 h1，而实际页面已用 h2 开头）。

• SSG（如 Hugo/Jekyll）中，模板里写死 <h3>，但不同页面起始标题级别不一致
• React/Vue 组件接收 level prop 却未校验范围，传入 4 导致父级是 h2 时直接跳成 h4
• CMS 编辑器允许用户手动选“标题4”，但前端没做层级约束或降级处理（例如自动转为 h3 并加 class="fallback-h3"）

怎么检测和修复跳级

人工检查不可靠，尤其长页面或多人协作项目。优先用工具定位，再针对性修 DOM 结构。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

立即学习“前端免费学习笔记（深入）”；

• 用浏览器 DevTools 的 “Elements” 面板，右键 <body> → “View page structure”，看标题树是否连续
• 运行脚本快速扫描：

  Array.from(document.querySelectorAll('h1, h2, h3, h4, h5, h6')).reduce((prev, el) => { const level = parseInt(el.tagName[1]); if (level > prev + 1) console.warn('Skip detected:', el.outerHTML); return level; }, 0);

• CI 流程中加入 axe-core 或 pa11y，检查 heading-order 规则，失败即阻断发布
• 修复不是简单改标签名——要同步调整 CSS 中对 h3 的样式引用，避免视觉错位

h1 到底该有几个？要不要留空？

一个页面只有一个 h1 是可访问性底线，不是 SEO“建议”。留空 h1（比如只写 <h1></h1>）比没有更糟：读屏软件会念“一级标题 空”，用户完全失去主干定位。

• h1 必须存在且有实质文本，通常是页面核心主题（如“订单确认页”“API 文档 - POST /v1/users”）
• 服务端渲染页面，h1 应由路由或数据决定，而非模板硬编码
• 单页应用中，路由切换后必须更新 h1 的 textContent，不能只靠 CSS 隐藏旧 h1
• 不要用 h1 做 logo 容器——logo 是图形，应该用 <img alt="公司名"> 或带 role="banner" 的 div

标题层级不是排版装饰，是内容骨架。跳一级，辅助技术就少一条路；空一个 h1，整个页面就失重。