应使用包裹课程目录，因其语义明确表达主导航意图；章节列表须用而非以保留顺序信息；锚点链接需正确对应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> 内部但紧贴顶部
<ol></ol> 比 <ul></ul> 更适合课程章节顺序
课程天然有强序性：第1章 → 第2章 → 实验 → 结业测验。用无序列表 <ul></ul> 会丢失这一层信息，辅助技术可能跳过序号，JavaScript 动态计算当前章节位置也会出错。
- 用
<ol></ol>后，start属性可手动设起始编号（如start="3"表示从第三章开始显示） - 每个章节用
<li>，内部必须是<a></a>（不能只放文字），否则无法跳转、也不被视作可导航项 - 别为了“样式统一”强行用 CSS 把
<ol></ol>的数字隐藏——序号是语义的一部分，隐藏后等于废掉有序优势
锚点链接要对应 id，别依赖 name 或空 href
点击“第五章”没反应？大概率是锚点没对上。HTML5 已废弃 name 属性做锚点，且 href="#" 或 href="javascript:void(0)" 是无效跳转，还破坏键盘导航（Tab 键无法聚焦）。
- 章节标题用
<h2 id="chapter-5">第五章：表单验证</h2>，目录链接写<a href="#chapter-5">第五章</a> - 确保
id值全站唯一、不带空格/中文/特殊符号（推荐小写+短横线） - 如果章节内容动态加载，得等 DOM 插入后再注册锚点，否则首次点击会失败
移动端折叠目录时，aria-expanded 和 aria-controls 缺一不可
响应式课程页常把目录收进汉堡菜单，但光用 CSS display: none 切换，读屏用户完全不知道它“可展开”或“当前状态”。这不只是体验问题，而是 WCAG 2.1 AA 级合规硬要求。
立即学习“前端免费学习笔记（深入）”；
- 触发按钮加
aria-expanded="false"，目标容器加id="toc-list"，按钮再补aria-controls="toc-list" - JS 切换时同步更新
aria-expanded值（"true"/"false"），否则读屏软件读不出状态变化 - 别用
hidden属性替代aria-hidden—— 前者会彻底移除可访问性树节点，后者才配合视觉隐藏做状态隔离
课程目录不是装饰，是学习路径的骨架。语义错一点，残障学生就可能卡在第一章；锚点松一环，自学用户就得滚屏找半天。这些细节不炫技，但改起来就几行 HTML，漏掉却很难补救。
