应使用包裹课程目录，因其语义明确表达主导航意图；章节列表须用而非以保留顺序信息；锚点链接需正确对应id且避免无效href；移动端折叠时须配合aria-expanded与aria-controls确保可访问性。
用 <nav></nav> 包裹目录，别用 <div> 或 <code><section></section>
语义错误是课程目录最常被忽略的问题。用 <div> 套一堆链接，屏幕阅读器和搜索引擎都当它是普通容器，无法识别“这是导航”。教育类页面尤其需要语义清晰——学生可能依赖读屏软件跳转章节，SEO 也靠这个抓取课程结构。
<ul>
<li>
<code><nav></nav> 是唯一能明确表达“主导航”意图的标签，课程目录就属于这类
<section></section> 或 <article></article>
<nav></nav> 值全站唯一、不带空格/中文/特殊符号（推荐小写+短横线）移动端折叠目录时，<main></main> 缺一不可
响应式课程页常把目录收进汉堡菜单，但光用 CSS <ol></ol> 切换，读屏用户完全不知道它“可展开”或“当前状态”。这不只是体验问题，而是 WCAG 2.1 AA 级合规硬要求。
- 触发按钮加
<ul></ul>，目标容器加<ul></ul>，按钮再补<ol></ol> - JS 切换时同步更新
start值（start="3"/<li>），否则读屏软件读不出状态变化 - 别用
<a></a>属性替代<ol></ol>—— 前者会彻底移除可访问性树节点，后者才配合视觉隐藏做状态隔离
课程目录不是装饰，是学习路径的骨架。语义错一点，残障学生就可能卡在第一章；锚点松一环，自学用户就得滚屏找半天。这些细节不炫技，但改起来就几行 HTML，漏掉却很难补救。
