一个页面应有且仅有一个，精准表达核心主题；至不可跳级，须严格递进；极少使用；与职责不同，前者影响seo，后者定义内容结构。
一个页面到底该有几个 <h1></h1>？
绝大多数页面只应有且仅有一个 <h1></h1>，它必须精准表达当前页的核心主题。比如订单确认页写 <h1>订单确认</h1>，不是“首页”或网站名重复套用。
常见错误包括：CMS 模板在全局 <header></header> 里硬编码 <h1>MySite</h1>；SPA 路由切换后没更新 DOM 中的 <h1></h1> 文本；Next.js/Nuxt 的 Layout 组件里直接写了 <h1></h1>，和 Page 组件里的 <h1></h1> 一起渲染。
- 修复方式：Layout 中改用
<header role="banner"></header>或纯<div class="logo"> <li>页面组件通过 <code>useEffect（React）或onMounted（Vue）动态更新<h1></h1>文本 - 服务端渲染场景下，优先用
generateMetadata（Next.js）或useSeoMeta（Vue）确保首屏即正确 - 快速检查命令：
curl -s URL | grep -o '<h sort>，看是否连续、有无缺失</h> -
<h5></h5>和<h6></h6>极少需要，95% 的页面用不到；法律条款、API 参数表这类极细颗粒度结构才可能用到 - 真要小字号备注，别用
<h6></h6>，改用<p class="note"></p>+ CSS 控制 - 纯视觉强调：用
<strong></strong>+ CSS 控制粗细/颜色 - 语义强调（重要内容）：用
<strong></strong>，别套标题标签 - 需要结构化副标题：确保上面有
<h1></h1>或<h2></h2>，再用<h2></h2>或<h3></h3> - CSS 可以重置所有标题的
font-size和margin，但 HTML 写进去的语义层级不可逆——读屏软件不看你有没有 display: none -
<title></title>必须存在，且应简洁、含关键词、长度适中（通常 ≤ 60 字符） -
<h1></h1>不参与 SEO 排名权重计算，但它决定内容结构可信度和可访问性路径 - 一个页面可以有多个
<section></section>，每个内部可有自己的<h2></h2>，但全局<h1></h1>仍建议唯一
<h2></h2> 到 <h6></h6> 能不能跳级？
不能。跳级不是“浏览器能显示就没事”，而是语义断裂——屏幕阅读器可能跳过、Lighthouse 和 axe 插件会报 Heading levels should only increase by one 错误，Chrome DevTools 的 Accessibility 面板也会标红。
允许的嵌套是 <h1></h1> → <h2></h2> → <h3></h3> → <h4></h4>，或同级并列（如多个 <h2></h2>），但禁止 <h2></h2> 后直接 <h4></h4>，也禁止 <h3></h3> 出现在没有父级 <h2></h2> 的位置。
为什么不能用 <h3></h3> 替代加粗段落？
因为屏幕阅读器会读作“标题三级”，不是“加粗文字”。用户听到一串“标题三级、标题三级、标题三级”，完全无法判断这是副标题、强调句还是随便一行字。
真正该用什么：
<title></title> 和 <h1></h1> 是一回事吗？
不是。<title></title> 在 里，是浏览器标签页显示的“名片”，影响 SEO 和书签；<h1></h1> 在 里，是页面内容的“骨架”，定义主标题层级。
两者常被混淆，但职责完全不同：
最易被忽略的是：SPA 页面路由切换时，只改 document.title 不够，<h1></h1> 的文本也必须同步更新 DOM，否则 Lighthouse 会同时报 document-title 和 heading-order 两项错误。
