dl是定义列表，专用于标记“术语+解释”的语义关系；它由dl、dt、dd三个标签构成，不默认渲染序号或缩进，且具备无障碍和seo优势，而ul/ol仅表示普通列表，无法传达术语与定义的逻辑关联。

什么是 dl，它和普通列表有什么区别

dl（definition list）不是用来做导航或项目罗列的，它是语义化标记“术语 + 解释”关系的唯一原生方式。浏览器不会默认给它加序号或圆点，CSS 也不会自动缩进 —— 这不是 bug，是设计如此。如果你用 ul 或 ol 去模拟术语表，屏幕阅读器会读成“列表项一、列表项二”，完全丢失“这是术语、那是定义”的逻辑关系。

关键结构只有三个标签：dl 是容器，dt（definition term）写术语，dd（definition description）写解释。一个 dt 可以对应多个 dd（比如一个词有多个义项），一个 dd 也可以跟多个 dt（比如同义词共用一个解释），但不能把 dt 和 dd 混在别的标签里，也不能脱离 dl 单独出现。

怎么写一个基础但合规的术语表 HTML

下面是最小可用结构，没有多余 class、无 JS、无样式，但语义完整、可访问、能被搜索引擎识别为术语内容：

API

应用程序编程接口，用于不同软件模块之间交换数据和调用功能。

DOM

文档对象模型，浏览器将 HTML 解析成的树状 JavaScript 对象结构。

注意几点：

• dt 和 dd 必须直接嵌套在 dl 里，中间不能插 div 或 p
• 不要给 dt 包一层 p —— dt 本身就可以包含行内元素（如 em、code），但块级元素（如 p、div）在 HTML5 中虽被允许，却会导致部分读屏器解析异常
• 如果某术语需要多段解释，用多个 dd，而不是在一个 dd 里塞两个 p

常见错误：为什么你的 dl 看起来“没效果”

很多人写完 dl 发现术语和解释挤在一起、没换行、没缩进，第一反应是“HTML 失效了”。其实只是浏览器默认样式极简：dd 默认有 margin-left，但现代 CSS 重置（如 Normalize.css 或某些框架）常把它设为 0，导致视觉上塌陷。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

修复只需一行 CSS：

dd { margin-inline-start: 1.5em; }

更稳妥的做法（兼容老浏览器）：

• 用 margin-left 而非 padding-left，避免影响点击热区
• 避免设置 dd 的 display: block —— 它本来就是块级，强行改可能破坏语义渲染
• 别给 dt 加 font-weight: bold 当“样式需求”，应该用 CSS 控制；若想所有术语加粗，统一写 dt { font-weight: bold; }，而不是每个都手动加 strong
• 遇到响应式折行错位？给 dl 加 display: grid 风格布局太激进，先试试 dd { margin-top: 0.25em; } 微调间距

什么时候不该用 dl

dl 不是“看起来像术语表就能用”的万能标签。以下情况请换思路：

• 纯图标+文字的导航栏（如“首页｜关于｜联系”）→ 用 nav + ul
• 参数说明表（如“timeout：数值，单位毫秒”）→ 更适合用 table，因为含多维属性（参数名、类型、说明、默认值）
• FAQ 页面中问题与答案一一对应，但问题本身是完整句子（如“如何重置密码？”）→ dl 仍可用，但需确认 dt 内容确实是“术语式短语”，否则语义偏移；更安全的选择是 section + h3 + div
• 需要排序、搜索、折叠的动态术语表 → dl 仍是语义底层，但交互逻辑必须由 JS 实现，不能指望 HTML 自带这些能力

真正容易被忽略的是：术语表一旦变长，用户会扫读。这时候 dt 的文本是否准确、是否大小写统一、是否避免缩写歧义，比 CSS 样式重要得多。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！