一个页面必须且只能有一个h1，代表唯一核心主题；h2–h6须线性嵌套，跳级（如h2后直连h4）或重复h1均破坏语义结构，导致SEO降权、屏幕阅读器导航失效及Lighthouse报错。
一个页面到底能不能有多个 h1
不能。一个普通 HTML 页面必须且只能有一个 h1，它代表整页唯一主干主题。出现两个 h1（比如页眉硬写一个、正文又一个），搜索引擎和读屏器会无法判断主次，直接导致：
• Google 可能忽略第二个 h1 后所有层级
• NVDA/JAWS 在标题导航模式下卡死在第一个 h1
• Lighthouse 报 heading-levels 错误
• SSR 首屏若没渲染出 h1（比如加载中占位），爬虫抓到的就是空结构
h2 到 h6 能不能跳级用（比如 h2 后直接 h4）
不能。跳级不是“浏览器能渲染就没事”，而是语义断裂。h4 暗示它属于某个未声明的 h3 下，读屏器可能跳过它，或导航菜单里出现空层级。
• 允许的结构：h1 → h2 → h3 → h4，或 h2 → h3 → h3（同级并列）
• 禁止的结构：h2 → h4（缺 h3）、h3 出现在 h2 之前
• 检查方法：Chrome DevTools 的 Accessibility 面板会标红 Heading levels should only increase by one；命令行快速扫：curl -s URL | grep -o '<h sort></h>
动态组件里传 level 参数生成 h 标签，怎么防崩
用 props.level 渲染 <h${level}> 很常见，但风险极高：
• 传入 level=0 或 level=7 会输出非法标签（如 <h0> 或 <h7>）
• 字符串拼错（如 `h${level}` 中 level 是字符串 "2.5"）会导致 DOM 解析失败
• SSR 场景下若 level 依赖客户端 JS 计算，首帧可能无有效标题
• 正确做法：const Tag = `h${Math.min(Math.max(level, 1), 6)}`，且必须服务端确定值，禁止用 v-if 或三元切换标签（Lighthouse 无法静态分析）
为什么别用 h6 当小字备注或把 h3 当加粗段落
标题标签不是样式开关，是语义锚点。屏幕阅读器不管字号大小，只读 “heading level 3”——用户听到一堆无上下文的“标题三级”，完全无法定位。
• 需要小号加粗文字？用 <span class="small-bold"> + CSS
• 需要强调一句话？用 <strong> 或 <em>
• 需要视觉像 h2 但语义是普通段落？用 <p class="section-title">
• 所有标题默认带 margin，统一清空用：h1, h2, h3, h4, h5, h6 { margin: 0; }，别靠降级标签凑效果
立即学习“前端免费学习笔记（深入）”；
真正难的不是记住规则，而是每次写标题前问一句：删掉这个标签，用户或 AI 是否会丢失对当前区块的定位依据？
