HTML 中用于创建列表的标签主要有三种：ul（无序列表）、ol（有序列表）和 dl（定义列表）。很多人常说的“自定义列表”其实并非独立类型，而是对 dl 的一种不准确称呼。今天我们就来彻底梳理一下这三个标签的正确用法、适用场景以及常见误区，帮助您轻松掌握。

什么时候必须用 ol，而不是 ul

关键的判断标准非常直观：只有当列表项的顺序本身承载着重要信息时，才应使用 ol。例如，安装步骤、法律条款编号、考试评分标准、时间线事件等——这些场景中，顺序一旦颠倒，含义就会完全改变。搜索引擎和屏幕阅读器遇到 ol 时会按顺序播报“第1项”“第2项”，如果滥用，会严重破坏视障用户的逻辑理解。

• 一个常见错误：将导航菜单写成 ol，仅仅因为 CSS 添加了数字前缀。这会导致语义错位，而且 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 样式，它们只识别标签本身。写错标签，就相当于主动放弃了语义层的控制权——这不仅仅是“看起来一样就行”的问题，而是直接决定了哪些用户能够真正获取到你的内容。