一个页面只能有一个h1且必须准确表达核心主题，h2–h6须严格逐级嵌套；多h1会稀释权重、干扰读屏，跳级破坏语义结构，标题不可仅作样式使用，需兼顾SEO与无障碍。
一个页面只能有一个 h1，且必须准确表达整页核心主题；h2 到 h6 必须严格按内容逻辑逐级嵌套——跳级、多 h1 或仅靠 CSS 改样式，都会直接破坏 SEO 和屏幕阅读器体验。
为什么不能有多个 h1
搜索引擎和读屏软件把 h1 当作页面“主干”信号。两个 h1（比如页眉 Logo 和正文标题同时用 <h1></h1>）等于告诉机器：“这两段话同等重要”，结果是主标题权重被稀释，盲人用户无法快速定位核心内容。
- 常见错误：CMS 模板在
<header></header>里硬编码<h1>MySite</h1>，又在文章组件里再写一个<h1>React 性能优化指南</h1> - 正确做法：Layout 文件里去掉
h1，改用<header role="banner"></header>或纯<div class="logo">；由页面组件输出唯一 <code>h1，并通过数据注入（如 Next.js 的generateMetadata、Vue 的useSeoMeta）确保服务端渲染和 SPA 路由切换时 DOM 中的h1文本同步更新 - 验证方式：Lighthouse 报错
document-title and heading-order，或用curl -s URL | grep -o '<h sort> 快速检查是否唯一</h> - 允许结构：
h1→h2→h3→h4；同级并列没问题（如多个h2） - 禁止结构：
h1→h4（缺h2/h3）；h3出现在h2缺失的页面中；h2出现在没有h1的页面中 - 检查方法：Chrome DevTools 的 Accessibility 面板会标红警告
Heading levels should only increase by one -
h5和h6实际极少需要——95% 的页面用不到。真要极细颗粒度（比如法律条款分项），优先考虑<dl></dl>或带语义 class 的<p></p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill9263" title="Html2md"><img src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill9263" title="Html2md">Html2md</a> <p>使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p> </div> <a href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>，而非硬塞h6 - 你需要一个小号加粗文字？用
<span class="small-bold"></span> - 需要强调一段话？用
<strong></strong>或<em></em> - 需要标题结构？老老实实按层级用
h1–h6 - 所有标题默认有上下 margin，想清空？用 CSS 重置
margin，而不是换标签 - 如果真要“视觉上像
h2，语义上是段落”，那就用<p class="visually-h2"></p>，别硬塞h2 - 性能影响几乎为零，但兼容性影响直接：某些旧版读屏软件遇到
h1→h4跳变，会直接跳过中间内容 - CI 中建议加入自动化校验，比如用 axe-core CLI 扫描 HTML 输出，失败则阻断部署
- 真实协作中，别人得靠标题层级猜你哪段是章、哪段是节——语义错乱会让维护成本翻倍
h2 到 h6 必须逐级嵌套，不能跳级
跳级不是“浏览器不报错就没事”，而是语义断裂。例如 h2 后直接写 h4，意味着“这个 h4 属于某个没写的 h3 下”，读屏软件可能直接跳过它，或导航菜单里出现空层级。
别用标题标签当样式开关
把 h3 设成小字号当备注、把 h6 加粗当强调、用 h2 替代 <strong></strong>——这些操作视觉上可行，但语义已错乱。屏幕阅读器仍会读作“标题三级”，用户听到一堆无上下文的“标题”，完全无法理解结构。
立即学习“前端免费学习笔记（深入）”；
SEO 和无障碍测试第一道检查项就是标题结构
Google 的 Lighthouse、axe 插件、macOS 的 VoiceOver，一打开就先扫 h1–h6 是否连续、是否缺失 h1、是否有跳跃。报错常是：Heading levels should only increase by one 或 Page has no main landmark。
