HTML 教程 / 标题与段落：h1–h6、p 和 br

使用 h1 到 h6 来创建 HTML 标题，使用 p 来创建段落。标题描述页面的层级结构，而段落将相关的句子组合在一起。仅在需要在同一段落内换行而不是开始新段落时，才使用 br。

使用 h1–h6 来显示标题层级

HTML 提供六个标题级别。一个页面通常使用 h1 作为其主标题，h2 用于主要部分，h3 用于这些部分中的主题。标题的级别描述了其内容在文档中的位置；这不是字体大小的选择。关于页面区域与标题的关系，可参阅使用语义元素组织页面中的说明。

<h1>无障碍指南</h1>

<h2>HTML 结构</h2>
<p>HTML 文档结构概述。</p>

<h3>标题层级</h3>
<p>如何组织标题。</p>

<h3>段落</h3>
<p>如何分隔段落。</p>

<h2>CSS 表现</h2>
<p>CSS 如何改变标题和段落的外观。</p>

上述两个标题 h3 是标题为 “HTML 结构” 的 h2 部分中的主题。下一个 h2 将开始另一个主要部分。在引入子部分时，应避免跳过层级——例如，直接从 h2 切换到 h4。

清晰的标题有助于读者快速浏览页面，并帮助屏幕阅读器用户在各个部分之间导航。 W3C WAI 关于标题结构的指南 解释了为什么标题层级应反映内容的组织结构。

如果 WordPress 已经在页面上将文章标题显示为 h1，则无需在文章内容中为同一标题添加另一个 h1。相反，请用 h2 开始主要部分。

在浏览器中查看标题和段落

将以下完整示例保存为 index.html，然后在浏览器中打开。它依次显示六个标题级别以便比较；一个真实的页面只需要其内容所需的级别。

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>HTML 标题和段落</title>
  </head>
  <body>
    <h1>标题 1</h1>
    <h2>标题 2</h2>
    <h3>标题 3</h3>
    <h4>标题 4</h4>
    <h5>标题 5</h5>
    <h6>标题 6</h6>
    <p>这是第一段。</p>
    <p>这是第二段。</p>
  </body>
</html>

浏览器会给标题级别不同的默认大小和间距，但具体外观取决于浏览器和页面的 CSS。如果希望标题显示得更大或更小，应修改其 CSS，而不是使用错误的标题级别。

用 p 分隔段落

p 元素表示一个段落。将不同的相关句子组包裹在单独的 p 元素中，以保持它们的关系清晰。

<p>HTML 创建网页的结构。</p>

<p>CSS 控制网页的外观。</p>

此代码创建了两个段落。仅在文本编辑器中添加空行不会创建新的 HTML 段落。p 可以包含普通文本和内联内容，如链接，但不能包含标题、列表或表格。

要在段落之间添加空间，请使用 CSS 属性，如 margin，而不是插入空的 p 元素或重复的 br 元素。

使用 br 在段落内换行

br 元素会开始一个新行，而不会创建一个新段落。当换行位置很重要时（如地址或诗歌），它非常有用。如果主题发生变化，请改为使用另一个 p。

在此示例中，第二个 p 是一个新段落。br 仅在该段落内更改行。

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>HTML 段落和换行</title>
  </head>
  <body>
    <p>这是第一段。</p>
    <p>这是第二段的第一行。<br>这是第二段的第二行。</p>
  </body>
</html>

在 HTML 中保持语义标题级别，并使用 CSS 中的字体、大小和行高 来设置其视觉尺寸。

练习：纠正标题层级

当一个主部分获得它的第一个子部分时，不要从 h2 切换到 h4。这个代码片段的问题在于它的层次结构，而不是字体大小。

<!-- 跳过一个标题级别 -->
<h2>配送信息</h2>
<h4>配送区域</h4>

<!-- 一致的层次结构 -->
<h2>配送信息</h2>
<h3>配送区域</h3>
<h3>交货时间</h3>

在一个文档的 body 中分别比较这些代码片段；不要将两者都保留为实际内容。只阅读标题并检查主主题及其子主题是否清晰。使用 CSS 调整它们的外观。

检查你的标题和段落

• 根据内容结构选择 h1–h6，而不是根据标准字体大小。
• 为每个标题提供一个描述性名称，并在转到子部分时避免跳过一个层级。
• 为新段落使用新的p；仅在段落中出现重要换行时使用br。
• 使用 CSS 控制字体大小和间距，而不是使用空元素或其他标题层级。

要检查错误嵌套的标签，请将您的 HTML 提交至 W3C 的标记验证服务。使用《无障碍基础：标题、链接、图片和键盘》测试阅读顺序和键盘使用情况。