HTML5 标题
HTML5 标题 (Headings) 学习笔记
HTML5 中的标题元素用于定义文档的层级结构。它们对于文档结构、**SEO（搜索引擎优化）以及无障碍访问（Accessibility）**至关重要。
一、标题元素概览
HTML 提供了 6 个级别的标题，从最重要到最不重要：
| 标签 | 级别 | 语义权重 | 默认样式 (通常) |
|---|---|---|---|
<h1> | 1 | 最高 (主标题) | 最大字号，加粗 |
<h2> | 2 | 次高 (章节标题) | 较大字号，加粗 |
<h3> | 3 | 中等 (子章节) | 中等字号，加粗 |
<h4> | 4 | 较低 | 较小字号，加粗 |
<h5> | 5 | 低 | 更小字号，加粗 |
<h6> | 6 | 最低 | 最小字号，加粗 |
基本语法：
<h1>这是主标题 (H1)</h1><h2>这是二级标题 (H2)</h2><h3>这是三级标题 (H3)</h3><!-- ... 以此类推 -->二、HTML5 中的关键变化：大纲算法 (Outline Algorithm)
在 HTML4 中，标题层级完全由<h1>到<h6>的标签决定。
在HTML5中，引入了基于节（Sectioning）的大纲算法。这意味着标题的层级不仅取决于标签本身，还取决于它所在的节（Sectioning Content）。
1. 节元素 (Sectioning Elements)
HTML5 引入了新的语义化标签来定义文档的节：
<section><article><aside><nav>
2. 新的层级逻辑
在 HTML5 中，每个节（Section）都可以有自己的<h1>。
- 在文档根级别，
<h1>是主标题。 - 在
<section>或<article>内部，<h1>是该节的标题，其逻辑层级等同于外部的<h2>。 - 在
<section>内部的<section>中，<h1>等同于外部的<h3>。
示例：
<body><h1>网站主标题</h1><!-- 逻辑层级 1 --><article><h1>文章标题</h1><!-- 逻辑层级 2 (相当于 h2) --><p>文章内容...</p><section><h1>小节标题</h1><!-- 逻辑层级 3 (相当于 h3) --><p>小节内容...</p></section></article></body>注意：虽然浏览器和屏幕阅读器理论上支持这种逻辑，但目前的浏览器渲染引擎和许多 SEO 工具仍然主要依赖标签本身（h1-h6）来判断层级。因此，为了兼容性和最佳实践，通常建议不要过度依赖 HTML5 的大纲算法，而是显式地使用
<h2>,<h3>等标签来反映视觉和逻辑层级。
三、最佳实践与使用规范
1. 每个页面只使用一个<h1>
尽管 HTML5 允许每个节使用<h1>，但最佳实践是：
- 每个页面只保留一个
<h1>，作为页面的主标题。 - 使用
<h2>到<h6>来构建子层级。 - 这样做对 SEO 最友好，且能避免屏幕阅读器用户的困惑。
推荐结构：
<body><header><h1>我的博客：技术学习笔记</h1><!-- 页面唯一主标题 --></header><main><article><h2>HTML5 标题详解</h2><!-- 文章标题 --><p>介绍内容...</p><section><h3>什么是大纲算法</h3><!-- 子章节 --><p>内容...</p></section><section><h3>最佳实践</h3><p>内容...</p></section></article></main></body>2. 不要为了样式而使用标题
- 错误做法：为了把文字变大加粗而使用
<h1>，即使它不是标题。 - 正确做法：使用 CSS 来控制字体大小和粗细。标题标签只用于定义语义结构。
/* 错误：用 h1 做样式 */<h1 style="font-size: 14px;">这不是标题</h1>/* 正确：用 p 标签 + CSS */<p class="highlight">这不是标题</p>3. 保持层级顺序，不要跳过
- 应该从
<h1>到<h2>再到<h3>。 - 避免跳过层级（例如从
<h1>直接跳到<h4>），这会破坏文档结构树，影响屏幕阅读器用户。
错误示例：
<h1>主标题</h1><h4>跳过了 h2 和 h3</h4><!-- 不推荐 -->正确示例：
<h1>主标题</h1><h2>二级标题</h2><h3>三级标题</h3>4. 标题中不要包含链接（视情况而定）
- 虽然
<h1><a href="...">标题</a></h1>是合法的，但在某些情况下，如果标题本身就是链接（如文章列表），这可能导致屏幕阅读器读出重复信息。 - 通常建议将链接包裹在标题内，或者将标题作为链接的一部分，具体取决于设计模式。
四、标题与 SEO (搜索引擎优化)
- 关键词权重：搜索引擎认为
<h1>中的关键词权重最高，其次是<h2>，以此类推。 - 结构清晰：清晰的标题层级有助于搜索引擎理解页面内容结构，从而更好地索引。
- 唯一性：确保
<h1>准确描述页面主题，且每个页面唯一。
五、标题与无障碍访问 (Accessibility)
- 屏幕阅读器导航：视障用户通常使用屏幕阅读器通过“标题导航”快速跳转页面不同部分。如果标题层级混乱，他们将难以理解页面结构。
- ARIA 角色：标题元素默认具有
role="heading"和aria-level属性。- 如果需要动态修改标题级别（不推荐），可以使用
role="heading"和aria-level="2"来模拟<h2>。
<divrole="heading"aria-level="2">这是一个模拟的 h2</div> - 如果需要动态修改标题级别（不推荐），可以使用
六、总结
| 特性 | 说明 |
|---|---|
| 标签 | <h1>到<h6> |
| 主要用途 | 定义文档结构、语义化、SEO、无障碍导航 |
| HTML5 特性 | 支持在<section>,<article>等节内使用<h1>作为该节标题 |
| 最佳实践 | 每页一个<h1>，层级不跳过，不用于纯样式 |
| CSS 控制 | 字体大小、颜色、间距等应通过 CSS 控制，而非标签选择 |
核心口诀：
一个页面一个 H1，层级顺序莫跳过。
样式交给 CSS 管，结构语义最重要。