标题层级与文档大纲

标题不是用来调字号的装饰，它把一组内容挂到文档结构上。读者可以通过标题快速跳转，搜索工具和辅助技术也会把标题作为导航线索。因此，先根据内容关系决定标题级别，再用 CSS 调整大小。

从一个页面的主题开始

<main>
  <h1>城市步行指南</h1>
  <section>
    <h2>出发前准备</h2>
    <h3>选择鞋子</h3>
    <h3>检查天气</h3>
  </section>
  <section>
    <h2>路线选择</h2>
  </section>
</main>

h1 表达当前页面或文章的主要主题，h2 表达它下面的同级主题，h3 再表达某个 h2 内的子主题。标题级别不是按视觉大小排列，也不是必须在每个数字之间填满后才允许继续；真正重要的是父子关系是否能解释清楚。

标题和 section 的关系

有主题的 section 通常应该有标题，标题让分组可定位。反过来，标题本身不会自动创建一个可见容器，也不会替代 section 的内容边界。不要仅仅为了获得较小字号而写 h4；如果内容没有对应的更深层主题，应该调整文档结构或使用 CSS。

变化一个条件观察边界

把示例中的第二个 h2 改成 h4，视觉上可能只变小，但读者从标题列表中会看到一个没有父级解释的跳跃。把所有标题改成 div 并加粗，外观可以相似，却失去了文档导航。标题结构和视觉设计必须分别验证。

运行实验

1. 用浏览器开发者工具或阅读器的标题列表查看示例标题树。
2. 把 h3 改成 h4，记录标题列表和键盘导航的变化。
3. 保持标题级别不变，只用 CSS 修改字体大小，确认视觉调整不会改变语义树。
4. 在一个页面中加入两个 h1，再按页面是单一文档还是多个独立应用区域说明你的选择。

常见错误

• 只按默认字号选择标题级别。
• 用 h1、h2 作为通用粗体文本。
• 为了实现视觉设计而跳过中间层级。
• 让 section 没有主题，却把它当成通用布局容器。

练习

给一个包含文章标题、两个主题段落和一个主题段落内小节的页面设计标题树。先写出内容关系图，再写 HTML；随后只调整 CSS 字号，说明为什么标题级别不需要改变。

继续阅读

标题建立了文档骨架，下一篇处理骨架里的文字含义：文本内容标记。

查看本节答案