HTML 教程 / 使用语义元素组织页面

语义 HTML 元素描述页面每个部分的功能。使用 nav 作为主要导航，main 作为页面主要内容，以及 article 用于独立内容。即使视觉布局发生变化，这些角色仍然有意义。

每个区域元素意味着什么？

• header 引入一个页面或一个部分。它可以包含网站名称、标题或导航。
• nav 将主要导航链接分组。一组内容并不会仅仅因为包含链接，就必须使用 nav。
• main 包含页面的唯一主要内容。一个文档最多允许一个可见的 main 区域。
• article 适用于独立的文章或故事。section 根据主题划分内容，并且通常应有一个标题来标识其主题。
• aside 包含仅间接与主要内容相关的补充信息。footer 包含页面或章节的结尾信息。

单独使用这些元素不能决定它们在屏幕上的排列。使用 aside 是因为内容具有补充性，而不是因为您想要一个侧边栏；使用 CSS 来设定其位置。同样，仅靠语义标记既不能保证无障碍访问，也不能保证搜索引擎排名提升。实际内容、标题和阅读顺序必须与元素的角色相符。

创建一个具有语义区域的完整页面

以下示例是一个完整的 HTML 文档。页面的导航链接指向同一文件内的区域，因此您可以保存并运行该示例，而无需创建其他页面。在使用 标题和段落 将区域划分后，选择标题级别。

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>春季植物 | 小花园</title>
</head>
<body>
  <header>
    <p>小花园</p>
    <nav aria-label="在此页面">
      <a href="#article">阅读文章</a>
      <a href="#sunlight">光照需求</a>
    </nav>
  </header>

  <main>
    <article id="article">
      <h1>春季植物</h1>
      <section id="sunlight">
        <h2>光照需求</h2>
        <p>光照需求因植物而异。</p>
      </section>
    </article>
    <aside>
      <p>在种植前，请检查您所在地区的最后一次霜冻日期。</p>
    </aside>
  </main>

  <footer>
    <p>小花园指南</p>
  </footer>
</body>
</html>

将代码保存为 index.html 并在浏览器中打开。网站的名称、导航、文章、补充说明和页脚大致会按从上到下的顺序出现。选择“光照需求”可以切换到该部分，因为 href="#sunlight" 对应 id="sunlight"。如果您希望说明在文章旁边显示，请添加 CSS 布局，而不是改变 HTML 的含义。代码中的 h1 是示例文档的标题，而不是本教程中的其他标题。

什么时候应该使用 section 或 article？

一篇博客文章可以独立存在，是article的一个好候选。在这篇文章中，像“您需要什么”和“步骤”这样的主题都可以各自形成一个section。仅用于边框或背景颜色的容器不需要语义角色；div可能更合适。如果标题和段落的层级已经明确，也不必将每一个标题和段落都包含在section中。对于仅用于样式目的将元素分组的容器，请使用什么时候使用 div 和 span？的标准。

header 和 footer 可以属于单个 article，也可以属于整个页面。在新闻列表中，每篇可以独立理解的文章都可以用一个 article 表示。请根据内容的角色而不是元素的名称或其默认外观来决定。请参阅 MDN 上的 HTML 元素参考 ，以获取元素定义。

为相同内容选择元素

如果一个页面同时具有网站导航和文章内导航，请通过有意义的名称区分这两个导航区域。本片段识别它们的不同用途。

<nav aria-label="网站导航">
  <a href="index.html">首页</a>
  <a href="about.html">介绍</a>
</nav>
<nav aria-label="本文的章节">
  <a href="#sunlight">光照</a>
  <a href="#watering">灌溉</a>
</nav>

将文件名和片段标识符分配给实际目标。aria-label 为导航区域提供一个可访问的名称；它不会自动生成可见的菜单标题。

W3C 的 WAI 区域标注指南 解释了如何用名称区分具有相似角色的区域。

检查文档结构

按照文档的顺序阅读标题、菜单和主要内容，即使它们在屏幕上的位置看起来是正确的。避免多个可见的 main、section 容器没有标题且没有实际内容，以及仅用于强制侧向位置的 aside。在添加 CSS 之前，必须始终能够理解合理的结构。