HTML列表标签：有序列表ol与无序列表ul区别

HTML 中用于创建列表的标签主要有三种：ul、ol 和 dl。常有人提到的“自定义列表”，实际上并非独立类型，而是对 dl 的一种不准确称呼。本文将对这三个标签的正确用法、适用场景以及常见误区进行系统梳理。

什么情况下必须使用 ol，而非 ul

判断标准十分明确：只有当列表项的顺序本身承载关键信息时，才应选用 ol。例如安装步骤、法律条款编号、考试评分标准、时间轴事件等——这些场景中顺序一旦改变，意义便完全不同。搜索引擎和屏幕阅读器遇到 ol 会按顺序播报“第1项”“第2项”，若滥用 ol，对视障用户而言逻辑关系将完全混乱。

• 常见错误：导航菜单因 CSS 添加数字前缀而写成 ol。这属于语义错位，且 Safari 部分版本会跳过编号朗读，造成混乱。
• 如何判断？删除序号后，内容是否变得不可理解或产生歧义？如果是，使用 ol；否则使用 ul。此测试直观有效。
• 注意：start 属性仅适用于纯数字序列。若通过 li value="7" 插入跳跃编号，旧版 Safari 中可能出现编号断续或重复。

ul 并非“没有顺序”，而是“顺序无关”

ul 表达的是并列、可互换、无权重的集合关系。并非“随便列”，而是谁排在前都不影响含义。例如技术栈列表：React、TypeScript、Tailwind，将 React 放在第三行，理解上毫无问题。但若强行用 ol 包装，读屏器会暗示主次或依赖关系，构成误导。

• 反面案例：用 ul 包裹步骤，再通过 CSS 强行加序号。视觉上看似有序，语义上仍为无序，对 SEO 和可访问性均不友好。
• 嵌套时注意：子列表用 ul 还是 ol，取决于子项自身是否具有顺序逻辑，而非父列表类型。例如在 ol 某一步中，有数个并列注意事项，则应嵌套 ul。
• 样式方面：ul 的圆点或方块样式仅能通过 CSS 的 list-style-type 控制。HTML 自带 type="square" 早已废弃，强行使用会导致验证失败。

dl 并非用于“美化列表”，而是具有严格结构约束

dl 专用于术语与定义、键值对、问答等成对结构，并非 ul 或 ol 的替代品。其语义核心是“一对一”或“多对一”的映射关系，例如 API 参数说明、词汇表、FAQ 页面。若将普通项目列表塞入 dl（如用 dt 当标题、dd 当描述），会破坏语义，使读屏器更难导航。

• 结构硬性要求：dt 必须紧跟在 dd 前面，不可颠倒。一个 dt 可接多个 dd（如多义词解释），但一个 dd 不能对应多个 dt。
• 技术细节：移动端 Safari 对 dt 有额外行高，若包含 img 或 button 易错位，需显式设置 vertical-align: top 或使用 flex 重新布局。

最易被忽略的一点：浏览器和辅助工具完全不依赖缩进、符号或 CSS 样式，它们只识别标签本身。错误使用标签等于主动放弃语义层控制——这并非“看起来一样就行”的问题，而是直接影响哪些人能真正读到你的内容。