HTML 标题标签 - <h1> 到 <h6>

什么是标题标签？

HTML提供了6个级别的标题标签，从<h1>（最大、最重要）到<h6>（最小、最不重要）。它们用于定义文档的结构和层次，帮助用户和搜索引擎理解内容的组织方式。

基本语法

html 
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

标题的重要性

1. 内容层次结构

标题标签创建了文档的大纲结构，使内容易于浏览和理解：

  • <h1>：页面的主标题，通常只使用一次
  • <h2>：主要章节标题
  • <h3>：章节内的子标题
  • 以此类推…

2. SEO优化

搜索引擎使用标题标签来理解页面内容的重要性和结构。正确使用标题标签可以提高页面的搜索排名。

3. 可访问性

屏幕阅读器用户可以通过标题快速导航页面内容，跳过不感兴趣的部分。

最佳实践

1. 遵循层次结构

标题应该按照级别顺序使用，不要跳过级别：

正确：

html 
<h1>主标题</h1>
<h2>章节1</h2>
<h3>小节1.1</h3>
<h2>章节2</h2>

错误：

html 
<h1>主标题</h1>
<h3>章节1</h3> <!-- 跳过了h2 -->
<h2>章节2</h2>

2. 限制<h1>的使用

每个页面应该只有一个<h1>标签，用于定义页面的主题。这有助于搜索引擎理解页面的主要内容。

3. 保持简洁明了

标题应该简洁地描述其下方内容，避免过长或模糊的标题。

好的标题：

html 
<h2>HTML标题标签的使用</h2>

不太好的标题：

html 
<h2>在HTML文档中如何正确使用各种级别的标题标签</h2>

4. 包含关键词

在标题中包含相关关键词可以提高SEO，但不要过度堆砌关键词。

样式与表现

默认情况下，浏览器会为标题添加以下样式：

  • 加粗显示
  • 不同的字体大小（从h1到h6逐渐减小）
  • 标题前后添加默认的外边距

可以使用CSS自定义标题的样式：

css 
h1 {
  font-size: 2.5rem;
  color: #333;
  margin-bottom: 1rem;
  border-bottom: 2px solid #ccc;
}

h2 {
  font-size: 2rem;
  color: #555;
  margin-top: 2rem;
  margin-bottom: 0.8rem;
}

全局属性

标题标签支持所有HTML全局属性，常用的包括：

属性 描述
class 为标题指定类名
id 为标题指定唯一ID，用于锚点链接
style 内联样式
title 鼠标悬停时显示的提示文本

锚点链接应用

可以使用标题的id属性创建页面内的锚点链接：

html 
<!-- 导航链接 -->
<nav>
  <a href="#section1">第一节</a>
  <a href="#section2">第二节</a>
</nav>

<!-- 标题 -->
<h2 id="section1">第一节内容</h2>
<p>这是第一节的详细内容...</p>

<h2 id="section2">第二节内容</h2>
<p>这是第二节的详细内容...</p>

完整示例

html 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML标题示例</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
    }
    
    h1 {
      color: #2c3e50;
      border-bottom: 3px solid #3498db;
      padding-bottom: 10px;
    }
    
    h2 {
      color: #34495e;
      margin-top: 30px;
    }
    
    h3 {
      color: #7f8c8d;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <h1>HTML标题标签详解</h1>
  
  <h2>1. 标题的作用</h2>
  <p>标题标签用于创建文档的层次结构，使内容易于阅读和导航。</p>
  
  <h2>2. 标题的级别</h2>
  <p>HTML提供了6个级别的标题，从最重要的h1到最不重要的h6。</p>
  
  <h3>2.1 一级标题 (h1)</h3>
  <p>每个页面应该只有一个h1标签，用于定义页面的主题。</p>
  
  <h3>2.2 二级标题 (h2)</h3>
  <p>h2标签用于定义页面的主要章节。</p>
  
  <h2>3. 最佳实践</h2>
  <ul>
    <li>遵循标题级别顺序，不要跳过级别</li>
    <li>每个页面只使用一个h1标签</li>
    <li>保持标题简洁明了</li>
    <li>使用CSS自定义标题样式</li>
  </ul>
</body>
</html>

总结

标题标签是HTML文档结构的基础，正确使用它们可以提高内容的可读性、可访问性和SEO效果。记住要遵循层次结构，保持标题简洁，并使用CSS自定义样式而不是依赖默认样式。

最后更新：2026-02-07