HTML 标题：h1 到 h6、字号、顺序与样式

六个 HTML 标题标签

HTML 有六个标题级别，从 <h1> 到 <h6>。<h1> 是最高级别（页面的标题），<h6> 是最低级别。浏览器把每一级显示得比上一级小，全部加粗，各自独占一行：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Headings</title>
</head>
<body>
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
  <h6>Heading 6</h6>
  <p>A paragraph, for comparison.</p>
</body>
</html>

<h5> 和 <h6> 默认比正文还小，这常常让人意外。字号只是默认值，下面几节会说明为什么永远不该按字号来选择级别。

标题就是页面大纲

标题不是装饰。它们合在一起构成页面的大纲，就像一本书的目录。屏幕阅读器用户在标题之间跳转来找到想要的内容，搜索引擎也通过标题来理解页面上的主题。

规则很简单：页面标题用一个 <h1>，每个主要区块用 <h2>，<h2> 里的子区块用 <h3>，依此类推，不要跳级。下面的示例根据标题生成一份目录，和辅助工具看到的一样：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Outline</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    #toc { background: #e5e7eb; padding: 8px 12px; border-radius: 6px; font-size: 14px; }
  </style>
</head>
<body>
  <div id="toc"></div>
  <h1>Pasta recipes</h1>
  <h2>Tomato sauce</h2>
  <h3>Ingredients</h3>
  <h3>Steps</h3>
  <h2>Pesto</h2>
  <h3>Ingredients</h3>
  <script>
    const lines = [...document.querySelectorAll('h1, h2, h3, h4, h5, h6')].map((h) => {
      const level = Number(h.tagName[1]);
      return '\u00a0'.repeat((level - 1) * 4) + h.tagName.toLowerCase() + ': ' + h.textContent;
    });
    document.getElementById('toc').innerHTML = lines.join('<br>');
  </script>
</body>
</html>

把第二个 <h3> 改成 <h5>，大纲就会出现断层：靠标题浏览的读者会疑惑 h4 去哪儿了。

修改标题的字号

先按在大纲中的位置选择级别，再用 CSS 设置外观。侧边栏的标题可能需要是 <h2>，但看起来很小；首屏大标题可能是一个非常大的 <h1>：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Heading size</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    h1 { font-size: 44px; margin-bottom: 4px; }
    h2 { font-size: 18px; color: #2563eb; text-transform: uppercase; letter-spacing: 0.05em; }
    .quiet { font-weight: 500; font-size: 16px; color: #4b5563; }
  </style>
</head>
<body>
  <h1>Big hero title</h1>
  <h2>Small section label</h2>
  <p>Still an h2 for screen readers, whatever it looks like.</p>
  <h2 class="quiet">A quiet h2 with a class</h2>
</body>
</html>

反过来也一样：不要只为了让文字变大或加粗就使用标题标签。句子中的加粗词语用 <strong>，不是标题的大号文字用带 class 的 <p>。文本标签参见加粗。

副标题和标语

紧跟在标题下面的副标题通常本身不是标题：它并不开启一个新的区块。请用段落，如果愿意，可以用 <hgroup> 把两者组合起来：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Subtitle</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    hgroup h1 { margin-bottom: 0; }
    hgroup p { margin-top: 4px; color: #4b5563; font-size: 18px; }
  </style>
</head>
<body>
  <hgroup>
    <h1>Coffee Guide</h1>
    <p>Everything about brewing at home</p>
  </hgroup>
  <h2>Grinding</h2>
</body>
</html>

大纲保持清晰（一个 h1，然后是几个 h2 区块），而标语在视觉上仍然和标题放在一起。

链接到标题

给标题一个 id，任何 href 中带 #id 的链接都能直接跳转到它。目录和“复制区块链接”按钮就是这样实现的：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Heading links</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    section { min-height: 400px; border-top: 2px solid #e5e7eb; }
  </style>
</head>
<body>
  <nav><a href="#install">Install</a> | <a href="#usage">Usage</a></nav>
  <section><h2 id="install">Install</h2></section>
  <section><h2 id="usage">Usage</h2></section>
</body>
</html>

常见错误

• 按字号选择级别。 按在大纲中的位置来选，再用 CSS 设置样式。
• 跳级。 从 <h2> 直接跳到 <h4> 会破坏屏幕阅读器用户的浏览。
• 用标题来强调。 段落中加粗的一句话应该用 <strong>，而不是 <h4>。
• 没有 <h1>，或者唯一的 <h1> 是标志。 <h1> 应该说明页面内容，比如文章或商品的标题。
• 空标题。 只有图标或什么都没有的标题会被朗读为空白。在里面写上真正的文字。