标题和章节

在上节中，您学习了即使您不理解页面上的文字，当语义元素为文档提供有意义的结构时，其他人（搜索引擎、辅助技术、未来的维护者、新的团队成员）也能理解文档的轮廓。

在本节中，您将探索文档结构；您将回顾上一节中的分节元素；并标记应用程序的轮廓。

在编码时为工作选择正确的元素意味着您不必重构或注释掉您的 HTML。如果您考虑为工作使用正确的元素，您通常会选择正确的元素。如果您不这样做，您可能不会。

现在您已经了解了标记语义，并且意识到为什么选择正确的元素很重要，一旦您了解了所有不同的元素，您通常会毫不费力地选择正确的元素。

让我们构建一个站点页眉。您将从非语义标记开始，逐步找到一个好的解决方案，以便您可以了解 HTML 分节和标题元素的好处。

如果您对页眉的语义考虑不多，您可能会使用这样的代码

<!-- start header -->
<div id="pageHeader">
  <div id="title">Machine Learning Workshop</div>
  <!-- navigation -->
  <div id="navigation">
    <a href="#reg">Register</a>
    <a href="#about">About</a>
    <a href="#teachers">Instructors</a>
    <a href="#feedback">Testimonials</a>
  </div>
  <!-- end navigation bar -->
</div>
<!-- end of header -->

CSS 可以使（几乎）任何标记看起来都正确。但是，对所有内容都使用非语义的 <div> 实际上会增加额外的工作。要使用 CSS 定位多个 <div>，您最终会使用 id 或类来标识内容。该代码还包括每个结束 </div> 的注释，以指示每个 </div> 关闭哪个开始标记。

虽然 id 和 class 属性为样式和 JavaScript 提供了钩子，但它们没有为屏幕阅读器和（在很大程度上）搜索引擎添加任何语义价值。

您可以包含 role 属性来提供语义，从而为屏幕阅读器创建一个良好的可访问性对象模型 (AOM)

<!-- start header -->
<div role="banner">
  <div role="heading" aria-level="1">Machine Learning Workshop</div>
  <div role="navigation">
    <a href="#reg">Register</a>
    <a href="#about">About</a>
    <a href="#teachers">Instructors</a>
    <a href="#feedback">Testimonials</a>
  </div>
  <!-- end navigation bar -->
<div>
<!-- end of header -->

这至少提供了语义，并允许在 CSS 中使用属性选择器，但它仍然添加注释以标识每个 </div> 关闭哪个 <div>。

如果您了解 HTML，您只需考虑内容的用途。然后您可以语义化地编写此代码，而无需使用 role 并且无需注释结束标记

<header>
  <h1>Machine Learning Workshop</h1>
  <nav>
    <a href="#reg">Register</a>
    <a href="#about">About</a>
    <a href="#teachers">Instructors</a>
    <a href="#feedback">Testimonials</a>
  </nav>
</header>

此代码使用两个语义地标：<header> 和 <nav>。

这是主页眉。<header> 元素并不总是地标。它具有不同的语义，具体取决于它的嵌套位置。当 <header> 是顶级时，它是站点 banner，一个地标角色，您可能在 role 代码块中注意到。当 <header> 嵌套在 <main>、<article> 或 <section> 中时，它只是将其标识为该节的页眉，而不是地标。

<nav> 元素将内容标识为导航。由于此 <nav> 嵌套在站点标题中，因此它是站点的主导航。如果它嵌套在 <article> 或 <section> 中，它将仅是该节的内部导航。通过使用语义元素，您构建了一个有意义的 可访问性对象模型或 AOM。AOM 使屏幕阅读器能够告知用户此节包含一个主要的导航块，他们可以导航浏览或跳过。

使用 </nav> 和 </header> 结束标记消除了注释的需求，以标识每个结束标记关闭了哪个元素。此外，对不同的元素使用不同的标记消除了对 id 和 class 钩子的需求。CSS 选择器可以具有较低的特异性；您可以使用 header nav a 定位链接，而无需担心冲突。

您已经编写了一个 HTML 代码很少且没有类或 id 的页眉。当使用语义 HTML 时，您不需要这样做。

让我们编写站点页脚的代码。

<footer>
  <p>&copy;2022 Machine Learning Workshop, LLC. All rights reserved.</p>
</footer>

与 <header> 类似，页脚是否是地标取决于页脚的嵌套位置。当它是站点页脚时，它是一个地标，应包含您希望在每个页面上显示的站点页脚信息，例如版权声明、联系信息以及指向您的隐私和 Cookie 政策的链接。站点页脚的隐式 role 是 contentinfo。否则，页脚没有隐式角色，也不是地标，如以下 Chrome 中 AOM 的屏幕截图所示（该屏幕截图有一个 <article>，其中包含一个 <header> 和 <footer>，位于 <header> 和 <footer> 之间）。

The Accessibility Object Model in Chrome.

在此屏幕截图中，有两个页脚：一个在 <article> 中，另一个是顶级的。顶级页脚是一个地标，具有 contentinfo 的隐式角色。另一个页脚不是地标。Chrome 将其显示为 FooterAsNonLandmark；Firefox 将其显示为 section。

这并不意味着您不应该使用 <footer>。假设您有一个博客。该博客有一个站点页脚，具有隐式 contentinfo 角色。每个博客文章也可以有一个 <footer>。在您博客的主着陆页上，浏览器、搜索引擎和屏幕阅读器知道主页脚是顶级页脚，而所有其他页脚都与它们嵌套在其中的文章相关。

当 <footer> 是 <article>、<aside>、<main>、<nav> 或 <section> 的后代时，它不是地标。如果帖子单独出现，则根据标记，该页脚可能会被提升。

页脚通常是您找到联系信息的地方，这些信息包裹在 <address>（联系地址元素）中。这是一个名称不太规范的元素；它用于包含个人或组织的联系信息，而不是实际的邮寄地址。

<footer>
  <p>&copy;2022 Machine Learning Workshop, LLC. All rights reserved.</p>
  <address>Instructors: <a href="/hal.html">Hal</a> and <a href="/eve.html">Eve</a></address>
</footer>

文档结构

本模块从 <header> 和 <footer> 开始，因为它们是独特的，仅有时是地标或“分节”元素。让我们通过讨论最常见的页面布局来介绍“全职”分节元素

A layout with a header, three columns, and a footer.

具有页眉、两个侧边栏和页脚的布局被称为圣杯布局。有很多方法可以标记此内容，包括

<body>
  <header>Header</header>
  <nav>Nav</nav>
  <main>Content</main>
  <aside>Aside</aside>
  <footer>Footer</footer>
</body>

如果您正在创建博客，您可能会在 <main> 中添加一系列文章

<body>
  <header>Header</header>
  <nav>Nav</nav>
  <main>
    <article>First post</article>
    <article>Second post</article>
  </main>
  <aside>Aside</aside>
  <footer>Footer</footer>
</body>

当使用语义元素时，浏览器能够创建有意义的可访问性树，使屏幕阅读器用户能够更轻松地导航。在这里，通过站点 <header> 和 <footer> 提供了 banner 和 contentinfo。此处添加的新元素包括 <main>、<aside> 和 <article>；此外，您之前使用过的 <h1> 和 <nav>，以及您尚未使用的 <section>。

<main>

有一个单独的 <main> 地标元素。<main> 元素标识文档的主要内容。每个页面应该只有一个 <main>。

<aside>

<aside> 用于与文档主要内容间接或略微相关的内容。例如，本文是关于 HTML 的。对于关于三个站点页眉示例（div、role 和 semantic）的 CSS 选择器特异性的章节，略微相关的 aside 可以包含在 <aside> 中；并且，像大多数情况一样，<aside> 可能会在侧边栏或标注框中显示。<aside> 也是一个地标，具有 complementary 的隐式角色。

<article>

在 <main> 中嵌套了两个 <article> 元素。当主要内容只是一个词，或者在现实世界中，只是一个内容节时，在第一个示例中这不是必需的。但是，如果您正在编写博客，如我们的第二个示例所示，则每篇文章都应位于嵌套在 <main> 中的 <article> 中。

<article> 表示内容的一个完整或独立的节，原则上可以独立重用。将文章想象成报纸中的文章。在印刷品中，一篇关于新西兰总理杰辛达·阿德恩的新闻文章可能只会出现在一个版块中，可能是世界新闻版块。在该报纸的网站上，同一篇新闻文章可能会出现在主页、政治版块、大洋洲或亚太新闻版块，并且根据新闻主题，还可能会出现在体育、生活方式或科技版块中。这篇文章也可能出现在其他网站上，例如 Pocket 或 Yahoo News！

<section>

当没有更具体的语义元素可用时，<section> 元素用于包含文档的通用独立部分。章节应具有标题，极少数情况例外。

回到杰辛达·阿德恩的例子，在报纸的主页上，横幅将包含报纸的名称，后跟一个单独的 <main>，分为几个 <section>，每个 <section> 都有一个标题，例如“世界新闻”和“政治”；在每个章节中，您都会找到一系列 <article>。在每个 <article> 中，您可能会找到一个或多个 <section> 元素。如果您查看此页面，“标题和章节”的整个部分就是 <article>。<article> 然后分为几个 <section>，包括 站点页眉、站点页脚 和文档结构。文章本身有一个标题，每个章节也有标题。

<section> 不是地标，除非它具有可访问的名称；如果它具有可访问的名称，则隐式角色为 region。地标角色应谨慎使用，以标识文档的较大总体部分。使用过多的地标角色可能会在屏幕阅读器中产生“噪音”，从而难以理解页面的整体布局，如果您的 <main> 包含两个或三个重要的子章节，为每个 <section>（包括可访问的名称）提供可访问的名称可能是有益的。

标题：<h1>-<h6>

有六个章节标题元素：<h1>、<h2>、<h3>、<h4>、<h5> 和 <h6>。每个元素代表六个级别的章节标题之一，其中 <h1> 是最高或最重要的章节级别，而 <h6> 是最低的。

当标题嵌套在文档横幅 <header> 中时，它是应用程序或站点的标题。当嵌套在 <main> 中时，无论是否嵌套在 <main> 中的 <header> 中，它都是该页面的标题，而不是整个站点的标题。当嵌套在 <article> 或 <section> 中时，它是页面该子章节的标题。

建议以类似于文本编辑器中标题级别的方式使用标题级别：从 <h1> 作为主标题开始，<h2> 作为子章节的标题，如果这些子章节有章节，则使用 <h3>；避免跳过标题级别。此处有一篇关于章节标题的好文章。

一些屏幕阅读器用户确实会访问标题以了解页面的内容。最初，标题应该概述文档，就像 MS Word 或 Google Docs 可以根据标题生成轮廓一样，但浏览器从未实现此结构。虽然浏览器确实以越来越小的字体大小显示嵌套标题，如下例所示，但它们实际上并不支持轮廓。

您现在有足够的知识来概述 MachineLearningWorkshop.com

MLW.com 的 <body> 轮廓

这是机器学习研讨会站点可见内容的轮廓

由于没有一段内容是独立的、完整的内容，因此 <section> 比 <article> 更合适；虽然每个章节都有标题，但没有章节值得使用 <footer>。

到目前为止，这应该是不言而喻的，但不要使用标题使文本加粗或变大；请改用 CSS。如果您想强调文本，也有语义元素可以做到这一点。当我们讨论文本基础知识时，我们将介绍这一点并填充页面的大部分内容；在深入探讨属性之后。

检查您的理解情况

测试您对标题和章节的了解。

哪个元素用于包含您网站的区域，其中包括网站徽标或标题以及主导航。

<heading>
再试一次。
<header>
正确！
<title>
再试一次。

页面上允许有多少个 <main> 元素？

一个。
正确！
没有。这不是有效的元素。
再试一次。
根据需要可以有多个，只要它们具有可访问的名称。
再试一次。