一个页面只能有一个h1且必须表达核心主题，跳级（如h1后直连h3）会破坏语义结构，导致seo降权和屏幕阅读器导航失效；h1是页面唯一“书名”，多个h1混淆主次，cms模板、组件复用中滥用h1污染语义流，h2–h6须严格逐级嵌套，不可跳级或倒序。

一个页面只能有一个 h1，且必须真实表达页面核心主题；跳级（比如 h1 后直接写 h3）会破坏语义结构，导致 SEO 和屏幕阅读器失效。

为什么 h1 只能有一个？

搜索引擎和辅助技术把 h1 当作页面“书名”，多个 h1 就像一本书印了十个书名——主次模糊。CMS 模板里轮播图、商品卡片、侧边栏标题如果都用 h1，就会污染语义流。

• 首页的 h1 应该是网站品牌或主定位（如 <h1>高性能 React 组件库</h1>）
• 文章页的 h1 必须是正文标题（如 <h1>useEffect 依赖数组为空数组时的陷阱</h1>）
• 弹窗、卡片、复用组件里禁止硬编码 h1；改用 h2 或通过 aria-labelledby 关联语义

h2–h6 必须严格嵌套，不能跳级

标题层级不是字号开关，而是内容从属关系的声明。h2 是 h1 的一级子模块，h3 是某个 h2 下的细分项，以此类推。跳级会让读屏软件无法构建连贯的导航树。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 正确： h1 → h2 → h3 → h4
• 错误： h1 → h3（缺 h2），或 h2 → h4（缺 h3）
• Markdown 渲染器（如 remark）默认把 ## 编译为 h2，需人工检查源文档是否跳级（例如 ## 后直接 ####）
• Vue/React 中避免用 props.level 动态生成 <h></h>，除非你确保传入值是连续整数且带 fallback

动态渲染场景下如何保住标题结构？

SSR 页面首屏无 h1（比如 loading 占位）、CSR 页面 JS 失败后标题不渲染，都会让爬虫或读屏器拿到断裂结构。

• Next.js 中确保 app/layout.tsx 或 pages/_app.tsx 不覆盖或移除 h1
• 用 react-helmet-async 或 next/head 动态设置 h1 时，必须保证 SSR 与 CSR 输出一致
• 测试时禁用 JS，直接查看纯 HTML 是否仍保有合理标题流
• 浏览器开发者工具的「Accessibility」面板可实时检查标题树是否连贯

样式和语义必须分离

想让某段文字视觉突出但语义上不是二级标题？那就用 div + CSS，而不是塞个 h2 再用 font-size: 0.8em 压小。CSS 控制外观，HTML 负责声明结构。

• align 属性早在 HTML5 就被废弃，对齐必须用 text-align 等 CSS 实现
• 所有标题默认是块级元素，自带上下 margin，项目中建议统一重置
• 不要因“看起来像标题”就滥用 h 标签；非标题内容一律用 div、p 或语义化替代标签（如 section、article）

真正难的不是记住规则，而是在 CMS 模板、组件库封装、Markdown 渲染、动态路由这些环节里，始终守住语义边界——稍一松懈，h1 就会悄悄多出来，层级就断在看不见的地方。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！