当前导航只是几个并排的链接，路线说明也只有段落。它们能显示，却没有准确表达“这是一组导航项”和“这些步骤有先后顺序”。列表正是用来描述这种关系的。
一组没有固定先后顺序的项目使用 <ul>，每个项目使用 <li>：
<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>导航中的四个页面是并列关系，因此适合无序列表。浏览器默认显示的圆点只是外观，之后可以用 CSS 调整；HTML 先把关系写对。
ul 的直接子元素应该是 li。不要把链接直接放进 ul：
<!-- 不推荐：缺少 li -->
<ul>
<a href="index.html">首页</a>
</ul>路线经过的地点有明确顺序，使用 <ol>：
<h3>经过地点</h3>
<ol>
<li>在游客中心签到并领取路线卡。</li>
<li>沿河向北走到旧码头。</li>
<li>穿过石桥，在粮仓广场休息。</li>
<li>从公园南门结束行程。</li>
</ol>只有当顺序会改变含义时才使用有序列表。装备清单可以随意调整顺序，更适合无序列表：
<h3>建议携带</h3>
<ul>
<li>饮用水</li>
<li>雨具</li>
<li>充满电的手机</li>
</ul>当内容是一组“名称—说明”时，可以使用 <dl>。每个名称使用 <dt>，说明使用 <dd>：
<h3>路线速览</h3>
<dl>
<dt>距离</dt>
<dd>约 4 公里</dd>
<dt>预计用时</dt>
<dd>2.5 小时，包含一次休息</dd>
<dt>难度</dt>
<dd>平缓，适合日常能够连续步行的人</dd>
</dl>描述列表适合术语解释、元数据和问答式信息。它不是为了得到某种缩进效果。
如果某一步里还有子项目，把新的列表放在对应的 li 里面：
<ol>
<li>
在游客中心完成准备：
<ul>
<li>签到</li>
<li>领取路线卡</li>
<li>确认紧急联系人</li>
</ul>
</li>
<li>沿河前往旧码头。</li>
</ol>缩进能帮助你看出内层 ul 属于第一个 li。不要为了让列表“看起来丰富”而嵌套，只有真实存在从属关系时才这样写。
把四个页面开头的链接段落都替换为同一份列表：
<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=
再把下面的内容加到 routes.html 中每条路线对应的图片之后：
<h3>运河慢行线经过地点</h3>
<ol>
<li>游客中心</li>
<li>旧码头</li>
<li>粮仓广场</li>
<li>公园南门</li>
</ol>
<h3>建议携带</h3>
<ul>
<li>500 毫升以上饮用水</
现在 routes.html 已经能清楚表达路线、步骤和装备。下一章我们会创建行程页，用表格呈现真正需要按行列比较的数据。