列表标签有哪些_有序列表ol与无序列表ul区别

必须用ol仅当顺序本身携带关键信息，如安装步骤、法律条款；删序号后若内容不可理解或歧义，则必须用ol，否则用ul；dl专用于术语与定义等成对结构，不可滥用为普通列表。

ul、ol、dl 是 HTML 中仅有的三种语义化列表标签，没有“自定义列表”这种独立类型——所谓“自定义列表”只是对 dl 的误称。

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

只有当列表项的**顺序本身携带关键信息**时才该用 ol。比如安装步骤、法律条款编号、考试评分标准、时间线事件。搜索引擎和屏幕阅读器会据此播报“第1项”“第2项”，若乱用，辅助技术用户会误判逻辑关系。

• 错误做法：把导航菜单写成 ol，只因 CSS 加了数字前缀——语义错位，且 Safari 可能跳过编号朗读
• 正确判断依据：删掉序号后，内容是否变得不可理解或产生歧义？是 → 用 ol；否 → 用 ul
• start 属性虽可用，但仅限纯数字序列；若中间插入 li value="7"，后续编号在旧版 Safari 中可能断续或重复

ul 不是“没顺序”，而是“顺序无关”

ul 表达的是并列、可互换、无权重的集合关系，不是“随便写”。例如技术栈列表：React、TypeScript、Tailwind——谁排第一不影响含义；但若写成 ol，读屏器会暗示存在主次或依赖关系，这是误导。

• 常见错误：用 ul 包裹步骤，再靠 CSS 强行加序号——视觉像有序，语义仍是无序，SEO 和可访问性双输
• 嵌套时子列表选 ul 还是 ol，取决于子项自身是否具顺序逻辑，而非父列表类型。例如 ol 里某一步骤含多个可并列的注意事项，就该用 ul 嵌套
• ul 的圆点/方块样式只能由 CSS 的 list-style-type 控制，HTML 的 type="square" 已废弃，强制使用会导致验证失败

dl 不是用来“美化列表”的，它有严格结构约束

dl 专用于术语与定义、键值对、问答等成对结构，不是 ul 或 ol 的替代品。它的语义核心是“一对一或多对一”的映射关系，比如 API 参数说明、词汇表、FAQ。

立即学习“前端免费学习笔记（深入）”；

• dt 必须直接跟 dd，不能倒置；一个 dt 可接多个 dd（如多义词解释），但一个 dd 不能对应多个 dt
• 移动端 Safari 对 dt 有额外行高，默认含 img 或 button 时容易错位，需显式设 vertical-align: top 或用 flex 重排
• 强行把普通项目列表塞进 dl（比如用 dt 当标题、dd 当描述）会破坏语义，读屏器无法识别为列表，反而更难导航

最容易被忽略的一点：浏览器和辅助工具完全不看缩进、符号或 CSS 样式，只认标签本身。写错标签，等于主动放弃语义层控制权——这不是“看起来一样就行”的事，而是直接影响谁能真正读到你的内容。