语义化 HTML

上一节看到 div 可以容纳内容，但它本身不说明那块内容是什么。语义（semantics）指元素传达的含义。语义化 HTML 就是根据内容用途选择恰当的元素，让浏览器、读者和辅助工具都更容易理解页面。

外观相似，含义可能不同

一个 div 中写“活动安排”，也能显示文字，但它不是标题。h2 明确标记这是一个标题；读屏软件可以把它列入标题导航。a 配合 href 提供链接行为；button 提供按钮语义与键盘操作。给普通文字取名 class="button" 并不会让它自动成为按钮。

<h2>参加活动</h2>
<p>请先阅读说明，再填写报名表。</p>
<a href="#registration">前往报名表</a>

这段代码没有新奇外观，却准确表达“标题—说明—跳转”。语义化不是堆更多标签，而是选得合适。有语义的元素依然可以添加 class，之后用 CSS 美化；语义与外观可以共同存在。

从单个元素扩展到页面区域

HTML 还有一些描述整块内容用途的元素。header 表示页面或某部分的介绍区域，nav 表示主要导航，main 表示页面主体，footer 表示页脚或某部分的结尾信息。先理解这些名称代表的职责，下一节会连同 section、article、aside 逐个组成完整页面。

在普通页面中，用一个可见 main 包住独有的主体内容，把全站重复的导航和页脚放在它外面。区域元素默认不一定有明显边框或颜色；将 div 换成 main，页面可能几乎不变，但源码表达的意义更明确。

用实际操作检查

下面 Lab 的两种页面都能显示介绍。第一种全用普通容器，第二种有标题、主要区域和真实链接。先对照源码，再按 Tab 尝试走到“报名”链接，按 Enter 进行页内跳转。普通 div 文字不会自动出现在同样的键盘操作顺序中。

语义化是可访问性的基础之一，但不是完成所有工作：图片仍需要合适的 alt，表单仍需要 label，标题仍要有合理层次，文字颜色也要清晰。这些要求是前面知识的组合，而不是添加一个 main 就能全部解决。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Leaflet Club</title>
</head>
<body>
  <div>Reading club</div>
  <div>About us</div>
  <div>We meet every Saturday.</div>
  <div>Go to registration</div>
  <div>Registration: ask at the front desk.</div>
</body>
</html>