h1到h6本质是语义层级而非字体大小开关，h1为页面唯一核心主题，h2、h3等逐级递降构成逻辑结构；跳级或乱序会破坏SEO与无障碍访问，CSS应替代已废弃的align属性。

h1到h6本质是语义层级，不是字体大小开关

它们的区别不在“哪个更大”，而在于“哪个更重要”。h1代表整个页面唯一的核心主题，h2是它的直接子模块，h3再往下拆解——就像一本书的“书名→章节→小节→要点”，跳级或乱序会破坏结构逻辑。

• 视觉大小只是浏览器默认样式，可被 CSS 完全覆盖；但语义层级一旦写错，屏幕阅读器、搜索引擎和开发者工具就无法正确解析文档骨架
• 不要用 h3 去“凑大字号”：需要加粗放大？用 + CSS 更干净
• h1 在整页中应仅出现一次（HTML5 的
  内可另起一个 h1，但需谨慎，多数 CMS 和 SEO 工具仍按传统单 h1 解析）

SEO 和无障碍访问依赖严格层级顺序

Google 和 NVDA 屏幕阅读器都按 h1→h2→h3… 的嵌套关系建立内容地图。如果从 h1 直接跳到 h4，相当于在目录里漏掉章、节、小节，只留一个“条款编号”，机器既难索引，用户也难导航。

• 常见错误：

  产品介绍

  功能亮点

  → 应改为

  功能亮点

• 关键词要自然融入标题文本，比如

  响应式网页设计入门指南

  比

  网页设计 HTML5 CSS3 响应式 入门

  更有效
• 检查工具推荐：Lighthouse 的 “Accessibility” 报告、axe 浏览器插件，能直接标出跳级或缺失 h1 的问题

CSS 替代 align 属性是强制要求，不是建议

HTML5 已彻底移除 h1～h6 的 align 属性。写

标题

不仅无效，还会在 W3C 验证器报错，部分旧版 IE 可能降级渲染。
• 居中标题请用：

  h2 { text-align: center; }

• 若需不同标题共用同一对齐方式，推荐定义类名：
  ，避免重复声明
• 注意：CSS 中 text-align 控制的是**行内内容对齐**，如需整体块级居中（比如让 h2 在容器中水平居中），还需配合 margin: 0 auto 或 Flex 布局

真实项目中最容易被忽略的细节

不是“会不会用”，而是“是否持续校验”。很多团队上线后才发现首页 h1 被 CMS 模板自动塞了网站名，正文主标题被迫降为 h2，导致 SEO 权重分散。

• 静态站点生成器（如 Hugo、Jekyll）中，检查模板里的 {{ .Title }} 是否真的输出到
  位置
• React/Vue 组件中，避免动态渲染时把 h1 写死在布局组件里，而业务组件只用 h2——这会让每个页面都带两个 h1
• 多语言站点尤其危险：中文页有 h1，英文页因翻译遗漏变成无 h1，Lighthouse 评分直降