H1至H6标签建立标题层级的HTML文档结构指南-html教程-PHP中文网

h1–h6 是定义文档语义层级的骨架，非单纯样式标签；须严格遵循层级顺序（h1→h2→h3…），禁止跳级、倒置或重复，以保障无障碍访问与seo正确解析。

h1至h6标签建立标题层级的html文档结构指南

H1–H6 不是用来“加粗显示大字”的，而是定义内容语义层级的骨架。用错一个，整个文档结构就可能被屏幕阅读器、SEO 爬虫或自动化工具误读。

为什么浏览器渲染看起来都差不多，但 H1–H6 不能随便换着用

视觉上，H1 到 H6 默认字号递减、加粗程度类似，容易让人以为只是样式差异。实际上，它们是 HTML 的大纲节点：每个标题代表一个新节（section）的开始，嵌套关系靠层级而非缩进体现。比如 H2 应该是 H1 的直接子节，H3 是其下一级子节——这种父子关系会被无障碍工具解析为导航树。

常见错误现象：
• 页面多个 H1（尤其 CMS 模板里重复插入）
• 用 H3 跳过 H2 直接出现在 H1 后（形成“断层”）
• 为样式统一，全用 H2 + CSS 改字体大小（丢失语义）

如何检查你的标题层级是否合理

最直接的方法是看浏览器开发者工具里的「Accessibility」面板（Chrome / Edge），或使用命令行工具 axe-cli 扫描：

axe http://localhost:3000 --tags wcag2a,wcag2aa

它会报出类似 "Document has multiple h1 elements" 或 "Heading level should increase by one" 的问题。更轻量的方式是右键 → “查看页面源代码”，手动从上到下跟踪 H1→H2→H3 是否连续、不跳级、不倒退。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

允许： H1 → H2 → H3 → H2（新节开始）
不允许：H1 → H3（跳过 H2）
不允许：H2 → H1（层级倒置）

实际写 HTML 时怎么避免踩坑

别依赖视觉预览判断结构。写标题前先想清楚内容大纲：

每个页面有且仅有一个 H1（通常是主标题，如文章标题、产品名）
H2 标记一级功能模块或章节（如“配置说明”、“API 列表”）
H3 及以下用于模块内的细分（如“请求参数”、“响应字段”）
如果某段文字只是强调，不是新节起点，用 <strong></strong> 或语义化标签如 <dt></dt>，而不是降级用 H4

示例片段（正确）：

<h1>用户管理 API</h1>
<h2>创建用户</h2>
<h3>请求参数</h3>
<h3>响应格式</h3>
<h2>更新用户</h2>
<h3>部分更新支持</h3>

框架和 CMS 场景下的特殊处理

React/Vue 组件中动态生成标题时，H1 容易被父组件和子组件各自声明，导致重复。解决方案不是删掉某个，而是用 props 控制层级：

根组件输出 H1，子组件接收 level prop（如 level="2"），渲染 <h></h>
Next.js 中只管 <title></title>，H1 仍需在 JSX 中手写，别指望 SEO 插件自动补
WordPress 主题常把 site title 和 post title 都设为 H1，需检查主题模板，将 site title 改为 <div class="site-title"> 并用 CSS 样式模拟 <p>真正难的不是记住规则，而是当设计稿要求“所有标题看起来一样大”时，说服设计师接受语义优先——这时候，<code>font-size 可以统一，但标签绝不能妥协。