文档结构和大纲
一个页面不是一堆平铺的元素。从上到下阅读时，它应该自成一体：一个标题，然后是它下面的各个部分，每个部分都有自己的标题，按有意义的顺序排列。这个形状就是页面的大纲，它来自两个因素的共同作用。标题为每个部分命名，来自语义 HTML 章节的地标区域 <header>、<nav>、<main>、<aside> 和 <footer> 将这些部分分组成区域。本章讲的是这两者如何组合成整个页面。
标题和地标如何形成大纲
网页从上到下阅读，就像你阅读书中的一页。访客从顶部开始向下进行，所以内容所在的顺序就是访客阅读它的顺序。将内容按照某人实际想要接触它们的顺序放置。
标题为该顺序赋予了形状。标题是对其后内容部分的简短标签，使用 <h1> 到 <h6> 的标签编写。<h1> 是整个页面的标题。每个 <h2> 为其下的主要部分命名，<h3> 为 <h2> 内的较小部分命名。将它们堆叠起来，你就会得到页面的**大纲**：一个镜像页面顺序的目录。
<h1>初学者的酸面包</h1>
<h2>你需要什么</h2>
<h3>配料</h3>
<h3>工具</h3>
<h2>制作酵种</h2>单独阅读标题，你就已经知道了页面的内容以及它是如何组织的，甚至还没有读一个段落。
<h1> 到 <h6>，是骨架：<h1> 是页面标题，一切都在它下面嵌套。单独阅读标题，你就应该已经知道页面的布局方式。 一个 main，和正确的标题顺序
两个习惯可以保持大纲清晰。首先，给页面一个单独的 <h1>。它是页面的标题，一个页面有一个标题，就像一本书在封面上只有一个名字。其他所有内容都是 <h2> 及以下。
其次，不要跳过级别。在 <h2> 之后，下一步是 <h3>，而不是 <h5>。跳过级别会在大纲中留下间隙，就像目录中列出第 1 章然后第 4 章。一次移动一个级别，向下和备份：
<h1>平日晚餐</h1>
<h2>意大利面</h2>
<h3>番茄和罗勒</h3>
<h3>大蒜黄油</h3>
<h2>沙拉</h2>
<h3>希腊</h3>这些标题所在的内容通常位于一个 <main> 区域内。<main> 标记页面的主要内容，这部分对这个页面来说是唯一的，不是共享的页眉、导航或页脚。有一个 <main>，就像有一个 <h1> 一样。
<h1>，因为一个页面有一个标题。逐个级别地向下进行标题级别，<h2> 然后 <h3>，不要跳到 <h5>。页面的主要内容放在一个 <main> 中。如果标题看起来大小不对，那是 CSS 的工作，不是切换级别的理由。 分组和排序内容
相关内容分组在一起时阅读效果更好。两个元素用于此目的。<section> 是一个页面的主题块，有自己的标题，就像食谱的"配料"部分。<article> 是一个独立的作品，即使你提取它也仍然有意义，比如单个博客文章或客户评论。
<article>
<h2>低温焙烤佛卡夏</h2>
<p>几乎不需要揉搓的面包。</p>
</article>顺序和分组一样重要。因为页面从上到下阅读，把最重要的内容放在靠近顶部的地方，其余的按读者想要的顺序排列。食谱在步骤之前列出你需要的东西，因为那是你会跟随它的顺序。
<section> 分组有标题的主题部分的相关内容，用 <article> 包装自成一体的内容，比如单个文章。然后注意顺序：页面从上到下阅读，所以重要的内容靠近顶部。按照某人实际想要阅读的顺序编写它。 常见的结构性错误
一些结构性错误一次又一次地出现，每一个都有一个简洁的修复。
- 使用标题标签来放大文本。 因为它呈现的大小而去使用
<h3>会破坏大纲。按照含义选择级别，在 CSS 中设置大小。 - 跳过标题级别。 从
<h2>跳到<h4>会在大纲中留下洞。一次一个级别地向下。 - 超过一个
<h1>。 一个页面有一个标题。额外的<h1>标签会混乱目录。 - 根本没有标题。 一长段没有任何中断的段落很难扫描。添加标题以便读者可以找到他们的路。
修复这些，页面对每个人来说都读得清楚，无论他们是用眼睛扫描还是听着它被朗读。可访问性章节对让页面对每个访客都有效有更多的说明。
<h1>，不要让长页面完全没有标题。每一个都会混乱大纲。按照含义选择标题级别，让 CSS 处理大小。