语义化标签家族

语义元素解决的是“这一段内容在文档中扮演什么角色”，不是“它应该显示成什么颜色”。header、nav、main、article、section、aside 和 footer 为阅读工具、搜索引擎和维护者提供结构线索；CSS 仍然负责布局和视觉表现。

先从内容关系出发

<body>
  <header>
    <a href="/">文档站</a>
    <nav aria-label="主导航">
      <a href="/guides">指南</a>
      <a href="/reference">参考</a>
    </nav>
  </header>

  <main>
    <article>
      <h1>如何阅读本章</h1>
      <p>正文内容……</p>
    </article>
    <aside aria-label="本章目录">相关链接……</aside>
  </main>

  <footer>最后更新：2026-09-22</footer>
</body>

main 表示页面的主要内容，通常一个页面只应有一个可见的 main。article 适合能够独立分发或理解的内容，例如文章、评论或新闻条目。section 表示一个有主题的分组，通常应该有标题；它不是“想加几个容器就加几个”的通用替代品。nav 表示一组主要导航链接，页脚中一组普通的相关链接不必都标成 nav。

语义和默认样式是两件事

浏览器通常会为标题、段落和列表提供默认样式，但默认样式不是语义的来源。给 div 加上 font-weight: bold 不会让它变成 strong；给 a 加上按钮样式也不会自动获得按钮的键盘和表单行为。先选表达意图的元素，再用 CSS 调整视觉，是更稳定的顺序。

标题建立导航层级

语义结构和标题层级要一起设计。一个 article 的标题可以从 h1 开始，页面内其他独立区域按内容层级使用 h2、h3。不要为了让文字变小而跳过标题级别；字号是 CSS 的职责，标题级别是内容关系的职责。

变化一个条件观察边界

把上面的 nav 改成 div，页面外观可以保持不变，但辅助技术失去了导航地标。把 article 改成 section，如果内容仍能独立分发，语义就变弱了。反过来，如果一个 section 没有独立主题或标题，使用普通容器可能更诚实。

运行实验

1. 用开发者工具的 Accessibility 面板观察 main、nav 和 article 的地标与名称。
2. 将 nav 改为 div，保持 CSS 不变，比较可访问性树的差异。
3. 在页面中加入两个 main，再修正为一个 main 和多个有标题的 section，记录结构变化。
4. 用键盘从地址栏进入页面，验证导航链接是否能按文档顺序访问。

常见错误

• 看到视觉区域就机械套用一个语义标签。
• 用 section 代替所有 div，却不给它主题或标题。
• 通过 h3 的默认字号决定标题级别。
• 用 div 和点击事件伪造按钮或链接，却没有补齐键盘、焦点和默认行为。
• 只看屏幕截图，不检查 DOM 和可访问性树。

练习

把一个由多个 div 组成的文章页面改成语义结构。输入契约是：页面有站点头部、主导航、唯一主要内容、文章正文、相关内容和页脚。提交 HTML 后，分别说明每个区域为什么选择该元素，并用开发者工具记录至少一个语义结构变化。

继续阅读

下一篇进入标题层级和文档大纲，解释一个页面有多个内容区域时如何让读者保持方向：标题层级与文档大纲。

查看本节答案