HTML中至是语义层级标记而非字号开关，须按内容逻辑严格嵌套（h1→h2→h3…），禁止跳级或滥用；现代实践推荐单个表页面主旨，配合和实现正确层级解析。
HTML 里 <h1></h1> 到 <h6></h6> 不是字号开关
很多人一上来就调 <h1></h1> 样式，结果页面结构混乱、SEO 被降权、屏幕阅读器读错顺序。这些标签本质是语义层级标记，不是“大标题”“小标题”的视觉快捷键。
实际用法得按内容逻辑嵌套：主标题用 <h1></h1>，章节用 <h2></h2>，子节用 <h3></h3>……不能跳级（比如 <h1></h1> 后直接 <h4></h4>），也不能为样式方便乱用（比如把按钮文字包进 <h3></h3>）。
-
常见错误现象：同一页面出现多个
<h1></h1>；导航栏里一堆<h2></h2>；用<h5></h5>做装饰性小字 - 使用场景：文章正文、产品页详情、后台管理列表页——只要存在明确的“主—次—次次”信息关系，就该用层级
- 性能影响：无直接性能损耗，但结构错乱会拖慢辅助技术解析，间接影响可访问性测试通过率
一个页面到底该有几个 <h1></h1>
现代实践倾向单个 <h1></h1>，代表整个文档的核心主题。它通常出现在 <main></main> 内，且不被包裹在 <section></section> 或 <article></article> 里——除非那个区块本身是独立可分发的内容单元（比如博客列表页里的每篇摘要）。
-
为什么这样做：搜索引擎和 AT（辅助技术）依赖
<h1></h1>定位页面主旨；多<h1></h1>会让它们困惑“到底哪个才算数” -
例外情况：SPA 中路由切换后，新内容区可重置
<h1></h1>；<article></article>内部允许有自己的<h1></h1>，但这是语义隔离，不是随意叠加 -
容易踩的坑：CMS 模板全局塞了
<h1></h1>，导致正文里又加一个，变成两个；用 CSS 隐藏某个<h1></h1>却没删掉标签，结构仍在但不可见
用 <section></section> 和 <article></article> 配合标题才真正生效
光靠 <h2></h2> <h3></h3> 排列不够。浏览器和读屏软件会结合外围语义容器判断层级归属。比如两个相邻的 <h2></h2>，如果中间隔着 <section></section>，它们就是平行关系；如果第二个在第一个的 <section></section> 内，则自动降为子层级。
立即学习“前端免费学习笔记（深入）”；
-
实操建议：每个
<section></section>或<article></article>应以标题开头（通常是<h2></h2>或对应层级），避免无标题区块 -
参数差异：
<section></section>表示文档中一个通用主题区块；<article></article>表示能独立分发的内容（如新闻、博客、评论），它内部的<h1></h1>不影响外层文档层级计数 - 兼容性注意：IE8 及更早不识别这些标签，但加了 HTML5 Shiv 后仅解决渲染问题，无法修复语义解析——老环境仍需谨慎评估
检查标题层级是否合理的最快方式
别等上线再翻文档。现在就能用浏览器开发者工具快速验证：打开 Elements 面板，右键任意标题 → “Inspect ARIA Attributes”，看 role="heading" 的 level 是否连续、无跳跃；或者装插件如 “HeadingsMap” 直接生成树状图。
-
常见错误现象：树状图里出现 “H1 → H3 → H2” 这种倒挂；某个
<h2></h2>下面没有内容，只有另一个<h2></h2> - 为什么必须查：人眼容易忽略嵌套错位，但机器会严格按 DOM 顺序+语义标签推导结构，差一级可能让整块内容被跳过
-
容易被忽略的地方：第三方组件（比如轮播图、评论框）自带标题标签，可能悄悄插入一个
<h2></h2>打乱主线；服务端渲染时动态拼接的标题层级没对齐
