真实项目中h5/h6几乎不用，因语义层级 rarely 需要五级或六级标题；误用会破坏可访问性；合理替代方案是用、css或；seo工具报错属误报，关键在逻辑层级而非标签存在。
h5 和 h6 在真实项目里几乎不用
95% 的页面根本不需要 h5 或 h6。不是浏览器不支持，而是语义层级压根没走到那一步——多数内容连 h4 都极少触发，更别说再往下嵌套两层。
常见误用场景包括：把 h5 当作“小号强调文字”、在 FAQ 列表里给每个问题硬套 h6、或在 CMS 模板中自动生成一堆 h6 标题应付结构检查工具。这些做法破坏语义，反而让屏幕阅读器用户迷失。
- 真正需要
h5/h6的场景极窄：法律条文逐款分项、超长技术规范文档（如 RFC 文档）、多级嵌套的政策文件 - 替代方案更合理：用
<dl></dl>表达术语定义，用<p class="subheading"></p>+ CSS 控制视觉，或直接用<strong></strong>强调关键短语 - SEO 工具报“缺少 h5/h6”不是 bug，是误报——它只检测标签存在与否，不判断语义必要性
超长网页中标题层级容易断裂的真实原因
不是开发者忘了写 h5，而是内容组织本身没形成五级逻辑。比如一个 20000 字的技术文档，若按“章节→小节→子模块→配置项→参数说明”来拆，h4 通常就到顶了；强行塞进 h5，等于虚构一层不存在的抽象层级。
动态渲染时更危险：React/Vue 组件各自输出 h2～h4，但父组件没统一协调层级，结果出现 h2 → h4 跳级，Lighthouse 直接标红 Heading levels should only increase by one。
- 检查方法：运行
curl -s URL | grep -o '<h>，看输出是否连续（<code>h1、h2、h3、h4），跳过h5/h6是正常现象 - SPA 路由切换后，DOM 中的
h1文本没同步更新，会导致整个标题流错位——此时h5即使存在也毫无意义 - 整站标题层级不一致（首页用
h2做主栏，文章页却用h1），比缺h5更伤 SEO 和可访问性
为什么 h5/h6 的默认 margin 反而成为陷阱
浏览器给 h5 默认 margin-top: 1.67em、h6 给 margin-top: 2.33em，数值比 h4 还大。视觉上反而“撑开”了段落间距，让人误以为它该用在更顶层位置。
一旦用 CSS 重置了所有标题 margin：h1, h2, h3, h4, h5, h6 { margin: 0; }，h5/h6 的字号又太小（0.83em / 0.67em），在移动端几乎不可读，只能靠额外 class 强行放大——这又违背了“样式归 CSS、语义归 HTML”的原则。
- 不要为适配视觉去调大
h5字号，不如换用<p class="fine-print"></p> - 别依赖
h6实现“最轻量级标题”，它的语义是“最低级标题”，不是“最小号标题” - 所有标题默认带 margin 是历史遗留，清空时必须全量写
h1～h6，漏掉h5或h6就会出参差
当真要使用 h5/h6 时的硬约束
只有满足全部以下条件，才考虑引入 h5 或 h6：
- 内容确实存在五级或六级逻辑嵌套（例如：法律条文→章→节→条→款→项）
- 目标用户明确包含依赖屏幕阅读器导航的专业人群（如律师、合规人员）
- 整站已稳定运行
h1～h4且无跳级、无重复、无模板污染 - 有配套的无障碍测试流程，能验证
h5/h6在 VoiceOver/NVDA 下正确播报层级
否则，宁可不用。标题层级不是越深越好，而是越准越好——缺失 h5 不影响结构，乱用 h5 才真会撕裂语义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
