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、无样式，但语义完整、可访问、能被搜索引擎识别为术语内容：
<dl> <dt>API</dt> <dd>应用程序编程接口，用于不同软件模块之间交换数据和调用功能。</dd> <dt>DOM</dt> <dd>文档对象模型，浏览器将 HTML 解析成的树状 JavaScript 对象结构。</dd> </dl>
注意几点：
立即学习“前端免费学习笔记（深入）”；
-
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，导致视觉上塌陷。
修复只需一行 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 样式重要得多。
