• 为什么这样做：搜索引擎和 AT（辅助技术）依赖

  定位页面主旨；多

  会让它们困惑“到底哪个才算数”

• 例外情况：SPA 中路由切换后，新内容区可重置

  ；

  内部允许有自己的

  ，但这是语义隔离，不是随意叠加

• 容易踩的坑：CMS 模板全局塞了

  ，导致正文里又加一个，变成两个；用 CSS 隐藏某个

  却没删掉标签，结构仍在但不可见

用

和

配合标题才真正生效

光靠

排列不够。浏览器和读屏软件会结合外围语义容器判断层级归属。比如两个相邻的

，如果中间隔着

，它们就是平行关系；如果第二个在第一个的

内，则自动降为子层级。

• 实操建议：每个
  或

  应以标题开头（通常是

  或对应层级），避免无标题区块

• 参数差异：
  表示文档中一个通用主题区块；

  表示能独立分发的内容（如新闻、博客、评论），它内部的

  不影响外层文档层级计数

• 兼容性注意：IE8 及更早不识别这些标签，但加了 HTML5 Shiv 后仅解决渲染问题，无法修复语义解析——老环境仍需谨慎评估

检查标题层级是否合理的最快方式

别等上线再翻文档。现在就能用浏览器开发者工具快速验证：打开 Elements 面板，右键任意标题 → “Inspect ARIA Attributes”，看 role="heading" 的 level 是否连续、无跳跃；或者装插件如 “HeadingsMap” 直接生成树状图。

• 常见错误现象：树状图里出现 “H1 → H3 → H2” 这种倒挂；某个

  下面没有内容，只有另一个

• 为什么必须查：人眼容易忽略嵌套错位，但机器会严格按 DOM 顺序+语义标签推导结构，差一级可能让整块内容被跳过
• 容易被忽略的地方：第三方组件（比如轮播图、评论框）自带标题标签，可能悄悄插入一个

  打乱主线；服务端渲染时动态拼接的标题层级没对齐

以上就是《HTML标题层级怎么设置》的详细内容，更多关于的资料请关注golang学习网公众号！