一个页面只能有一个<h1>，且须位于<main>内代表核心主题；<h2>–<h6>须逐级嵌套，不可跳级；<section>/<article>容器决定标题语义归属；需用工具验证结构。
一个页面到底该有几个 <h1>
只能有一个，且它得代表整个文档的核心主题。现代实践里，<h1> 应出现在 <main> 内部，不被包裹在 <section> 或 <article> 里——除非那个区块本身是可独立分发的内容（比如博客列表页中某篇摘要卡片）。
常见错误：
• CMS 模板全局塞了一个 <h1>，正文又加一个，变成两个
• 用 CSS display: none 隐藏了某个 <h1>，但标签还在，语义结构已损坏
• 把导航栏、页脚里的文字强行包进 <h1>，只为“看起来大”
<h2> 到 <h6> 必须逐级嵌套，不能跳级
层级不是字号开关，而是语义依赖链。<h2> 是 <h1> 的直接子主题，<h3> 是 <h2> 的子主题，以此类推。跳级（比如 <h1> 后直接 <h4>）会让屏幕阅读器和 SEO 工具无法建立逻辑关系。
实操建议：
• 视觉样式全部交给 CSS 控制，别用低级标题“凑大小”
• 检查时打开浏览器开发者工具 → Elements 面板 → 右键任意标题 → “Show DOM properties”，看 ownerDocument 和父级是否符合预期
• 如果内容需要视觉降级但语义不变，用 <span> + class 替代降级标题
<section> 和 <article> 才让标题层级真正生效
光靠 <h2><h3> 排列，不加语义容器，浏览器和读屏软件很难判断归属关系。两个相邻的 <h2>，如果中间隔着 <section>，就是平行章节；如果第二个 <h2> 在第一个的 <section> 内，则自动视为子层级。
关键规则：
• 每个 <section> 或 <article> 应以对应层级标题开头（通常是 <h2> 或 <h3>）
• <article> 内部允许有自己的 <h1>，这是语义隔离，不是滥用
• 空 <section>（没标题、没内容）跟 <div> 没区别，纯属冗余
检查标题结构是否合理，三步就能验证
别等上线才翻文档。现在就能动手：
• 打开 Chrome / Firefox 开发者工具 → Elements 面板 → 展开 <body>，肉眼扫一遍标题标签是否连续、不跳级、不重复
• 安装浏览器插件 “HeadingsMap” 或 “Web Accessibility Toolbar”，一键生成大纲树
• 运行命令行工具 axe-cli（需 Node.js）： axe http://localhost:3000 --rule=heading-order，它会直接报出所有层级断裂点
最容易被忽略的是：标题层级错乱本身不报错、不阻断渲染，但会导致可访问性测试失败、SEO 权重稀释、内容摘要生成错乱——问题藏得深，修复成本却不高。
立即学习“前端免费学习笔记（深入）”；
