一个页面只能有一个h1且须位于内容主干开头附近，否则搜索引擎和屏幕阅读器无法锚定主题；h2–h6必须严格嵌套，跳级（如h2后直接h4）会导致语义断裂、读屏器“掉层”、爬虫抓取空结构。

一个页面只能有一个 h1，且必须出现在内容主干开头附近；h2–h6 必须严格按逻辑嵌套，跳级或倒序会直接导致 SEO 折损、读屏器“掉层”、爬虫抓到空结构。

为什么 h1 不能多个或延迟出现

搜索引擎和屏幕阅读器靠 h1 錨定整页主题。CMS 模板里轮播图、商品卡片硬塞

新品上市

，会让算法无法判断主次；SSR 首屏 DOM 里没有 h1（比如加载中只渲染占位符），爬虫就可能抓到空大纲。常见现象包括：搜索摘要显示“联系我们”而非正文标题，无障碍测试报 heading-level-skipped 错误。

如何避免 h2→h4 这类跳级

跳级不是样式问题，是语义断裂。例如写完

执行时机

后直接跟

清理函数触发

，读屏器会跳过缺失的 h3 层，用户语音导航时“掉层”。真实内容逻辑应是：

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• h2 是 h1 的一级子节（如“副作用机制”）
• h3 必须隶属于某个 h2（如“mount 注册流程”）
• h4 及以下极少需要；真要用，优先考虑
  或带语义的 class，而非强行塞进标题流

动态生成标题时怎么防 h7 或 h0

React/Vue 中用 props.level 渲染 很常见，但传入非 1–6 的值（比如 level=0、level=7 或字符串 "2.5"）会导致非法标签。必须加 fallback：

• 只接受 1–6 的整数，其他值 fallback 到 h2
• 服务端渲染首帧 DOM 必须含有效 h1，别等 JS 注入
• v-html 或 dangerouslySetInnerHTML 若拼接标题标签，更要校验 level 值——拼错一个数字，就输出 这种浏览器不识别的标签

样式重置后仍要验证语义层级

重置 h1–h6 的 margin 和 line-height 是基础操作，但真正关键的是：别靠字体大小判断层级是否合理。打开 DevTools 的 Accessibility 面板，右键检查节点，看它被识别为第几级 heading 元素。视觉上 h6 比 h1 还大也没关系，只要 DOM 结构没乱，机器就能读对。