标题标签滥用本质是误用语义标签为样式工具，纠正关键在于重建逻辑层级：全站限一个h1、禁止跳级、标题须有内容归属、禁用div模拟标题，并通过工具验证结构合规性。
标题标签滥用，核心是把 <h1></h1> 到 <h6></h6> 当成“加粗放大器”或“样式占位符”，而不是内容逻辑骨架。纠正的关键不是改字号，而是重建语义层级和上下文归属。
常见滥用行为及对应纠正方式
这些错误高频出现，且常被误认为“不影响显示”：
-
多个 h1 共存：比如页头 logo 包
<h1></h1>、轮播图标题又一个<h1></h1>、侧边推荐栏再塞一个。这会让搜索引擎和读屏器失去主次判断依据。
→ 纠正：全站只保留一个<h1></h1>，放在<main></main>或核心内容区顶部，代表当前页面唯一主题；其他视觉上“像标题”的文字，统一降为<h2></h2>或用<div class="title"> + ARIA 属性（如 <code>role="heading" aria-level="2"）替代。 -
跳级使用：如
<h1></h1>后直接写<h3></h3>，中间缺<h2></h2>；或卡片组件里独立用<h3></h3>却不隶属于任何<h2></h2>。
→ 纠正：严格按逻辑嵌套——每个<h2></h2>应是<h1></h1>的直接子模块，每个<h3></h3>必须出现在某个<h2></h2>的内容范围内；可用<section></section>将模块包裹，让其内部标题自成小体系（如<section><h2>用户评论</h2> <h3>张三的评价</h3></section>）。 -
标题脱钩：单独放一个
<h2></h2>，后面没跟段落、列表或任何实质内容；或者标题在<footer></footer>或<aside></aside>里孤立存在。
→ 纠正：标题必须有明确的内容归属。删掉无内容支撑的标题；若某区块确实无正文（如纯导航入口），改用<p></p>或<span></span>配合语义类，而非硬塞标题标签。 -
用 div 模拟标题：写
<div class="h1">关于我们</div>，靠 CSS 控制大小和粗细。
→ 纠正：彻底删除此类写法。语义不可替代——<div> 没有标题含义，SEO 和无障碍支持完全失效；一律改用真实 <code><h1>–<h6></h6> </h1>，样式由 CSS 独立控制。动态页面与模板系统的特殊处理
SPA（如 Vue/React）和 CMS 容易在组件层面各自定义标题，导致结构断裂：
- 路由切换时，旧
<h1></h1>未销毁、新<h1></h1>又插入 → 页面出现多个<h1></h1>。
→ 纠正：由最外层路由组件统一管理<h1></h1>，子组件禁用<h1></h1>；服务端首屏 HTML 必须含有效<h1></h1>，不能等 JS 加载后才生成。 - 富文本编辑器输出
#### 标题，但前序层级缺失（如前面没###），渲染后直接跳到<h4></h4>。
→ 纠正：在服务端或前端渲染层做逻辑补全——检测标题级别断层时，自动插入虚拟占位标题（如补一个<h3></h3>），保证 DOM 层级连贯。 - 组件库中弹窗、卡片、列表项内误用
<h1></h1>。
→ 纠正：组件内部禁用<h1></h1>；若需强调标题语义，统一用<h2></h2>起始，并通过aria-labelledby关联上下文。
检查与验证方法
不依赖肉眼，用工具确认是否真正合规：
- 浏览器开发者工具 → “Accessibility” 面板 → 查看 “Heading levels” 是否形成清晰树状结构，无断裂、无重复、无倒序；
- 用 Lighthouse 运行无障碍审计，关注 “Document has a main landmark” 和 “Headings don’t skip levels” 两项是否通过；
- 禁用 CSS 后浏览页面：标题仍应呈现合理层级关系，文字大小可不同，但结构顺序不能乱。
- 路由切换时，旧
