用语义区块组装页面
到目前为止，页面内容都直接堆在 body 里。它们可以使用，但读代码时很难一眼看出哪部分是页头、导航、主体和页脚。这一章把页面组织成清楚的区域。
先认识页面级结构
常用的语义区块包括：
html
<body>
<header>站点或页面的页头</header>
<nav>主要导航</nav>
<main>当前页面独有的主要内容</main>
<footer>页脚信息</footer>
</body>标签名称表达了内容角色。它们不会自动让页面变成某种布局，但能帮助搜索引擎、辅助技术和后续维护者理解文档。
一个页面通常只有一个主要的 main，而且不要把 main 放进 header、nav、aside 或 footer。
用 nav 包住真正的主要导航
上一章的导航列表现在有了合适的容器：
html
<nav aria-label="主要导航">
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="routes.html">路线</a></li>
<li><a href="schedule.html">行程</a></li>
<li><a href="contact.html">报名</a></li>
</ul>
</nav>nav 用于主要导航集合，不是页面中每一组链接都必须放进 nav。aria-label 给这组导航一个可被辅助技术识别的名称；当页面有多组导航时尤其有用。
区分 section、article 和 aside
section 是有主题的一组内容，通常应该有标题：
html
<section aria-labelledby="featured-title">
<h2 id="featured-title">本周推荐</h2>
<!-- 路线摘要 -->
</section>article 表示一份相对独立、可以单独分发或复用的内容，例如一篇文章、一条新闻或一张完整路线卡：
html
<article>
<h3>运河慢行线</h3>
<p>全程约 4 公里，适合第一次参加的人。</p>
<a href="routes.html#canal-route">查看完整路线</a>
</article>aside 表示与周围主要内容相关、但不是主线必需的信息：
html
<aside>
<h2>天气提醒</h2>
<p>雨天石板路较滑，请准备防滑鞋。</p>
</aside>不要只凭视觉位置选择标签。放在页面右侧的内容不一定是 aside，能独立成篇的卡片也不一定都要用 article。
div 和 span 是没有额外语义的容器
当现有语义标签都不合适，而你又需要一个样式或脚本挂钩时，使用 div 或 span：
html
<div class="route-card">
<h3>运河慢行线</h3>
<p>难度：<span class="difficulty">平缓</span></p>
</div>div 适合包住一块内容，span 适合包住行内的一小段文字。class 只是一个可复用的标识，不会自己产生样式。
选择容器时可以按这个顺序判断：先问内容有没有明确角色；有就用 header、nav、main、section、article、aside 或 footer；没有，再用 div 或 span。
把首页改成完整语义结构
用下面的代码替换 index.html 的 <body>：
html
<body>
<a href="#main-content">跳到主要内容</a>
<header>
<p>城市漫游指南</p>
<nav aria-label="主要导航">
<ul>
<li><a href="index.html" aria-current="page">首页</a></li>
最前面的“跳到主要内容”链接能让键盘用户绕过重复导航，直接移动到 main。当前页面的链接使用 aria-current="page"，四个页面都应把这个属性放在各自对应的导航项上。
把同一套外壳应用到其余页面
现在依次调整 routes.html、schedule.html 和 contact.html：
- 加入相同的
header、主要导航和footer。 - 把每页独有内容放进
main。 - 保留每页唯一的
h1。 - 把
aria-current="page"移到当前页面的导航链接。
项目现在有了稳定的站点结构。下一章会处理在正文中显示 <、&、连续空格和代码片段时遇到的解析问题。