<h1>到<h6>-标题级别

在HTML中，标题标签<h1>到<h6>用于定义文档的层级结构，不同级别的标题代表内容的重要性和组织关系。合理使用这些标签不仅能提升可读性，还对SEO和可访问性有直接影响。

<h1>标签的核心作用

<h1>是最高级别的标题，通常用于页面主标题。一个页面一般只出现一次，直接反映当前页面的核心内容。例如：

<h1>网站开发入门指南</h1>

搜索引擎会特别关注<h1>的内容，因此要避免：

• 过度使用（同一页面多个<h1>）
• 内容与页面主题无关
• 仅用于样式而非语义

<h2>到<h6>的层级关系

次级标题形成内容的分层结构：

<h2>HTML基础</h2>
<h3>标签语法</h3>
<h4>双标签与单标签</h4>
<h2>CSS入门</h2>
<h3>选择器类型</h3>

典型错误包括：

1. 跳过层级（如<h2>后直接使用<h4>）
2. 仅通过字体大小区分级别
3. 将标题用作装饰元素

实际应用中的最佳实践

内容大纲示例

<h1>烘焙教程</h1>
<h2>材料准备</h2>
<h3>主要原料</h3>
<h3>工具清单</h3>
<h2>制作步骤</h2>
<h3>面团处理</h3>
<h4>第一次发酵</h4>
<h3>烘烤技巧</h3>

结合ARIA增强可访问性

<h1 id="main-title">用户手册</h1>
<div role="region" aria-labelledby="main-title">
  <!-- 内容区 -->
</div>

特殊场景处理

多栏目布局时

<article>
  <h1>新闻标题</h1>
  <section>
    <h2>事件背景</h2>
  </section>
</article>

<aside>
  <h2>相关阅读</h2>
</aside>

动态内容加载

// 通过JS动态插入标题
const newSection = document.createElement('section');
newSection.innerHTML = '<h3>新增功能说明</h3>';
document.body.appendChild(newSection);

常见误区与验证方法

使用W3C验证工具检查标题层级是否合理。典型问题包括：

• 在<header>中误用<h3>作为主要标题
• 模态框中的标题级别与主文档冲突
• 重复的标题文本影响SEO

<!-- 反例 -->
<div class="modal">
  <h1>确认操作</h1> <!-- 应使用<h2>或更低级别 -->
</div>

与其他技术的配合

与CSS计数器联动

body {
  counter-reset: h2counter;
}
h2:before {
  counter-increment: h2counter;
  content: counter(h2counter) ". ";
}

在Markdown中的对应写法

# H1
## H2
### H3

浏览器渲染差异

虽然默认样式逐级减小字号，但实际显示效果可能因浏览器而异：

/* 重置默认样式示例 */
h1 { font-size: 2rem; margin: 0.67em 0; }
h2 { font-size: 1.5rem; margin: 0.83em 0; }

历史版本变化

HTML4与HTML5的区别：

• HTML5允许在<section>中重新开始标题层级
• <hgroup>标签已被废弃

<!-- HTML5推荐写法 -->
<section>
  <h1>章节标题</h1>
  <p>内容...</p>
  <section>
    <h1>子章节</h1> <!-- 实际渲染为<h2>级别 -->
  </section>
</section>

屏幕阅读器适配

VoiceOver等辅助工具会：

• 提供标题导航快捷键
• 根据层级朗读"级别2"等提示信息
• 允许用户跳转到特定级别标题

<!-- 应避免的写法 -->
<div class="fake-heading">看似标题的内容</div>