在HTML中如何使用 dl 标签定义术语列表

dl标签专为术语与解释的语义配对设计，适用于API参数、错误码、商品规格等名词性术语加说明的场景，禁用作普通列表、两栏布局或问答页面，否则损害可访问性与SEO。

dl 标签不是用来做普通列表的

dl 的语义是“定义列表”（definition list），不是 ul 或 ol 那种通用列表。它专为术语 + 解释的配对结构设计，比如词典条目、API 参数说明、配置项文档。用错语义会导致屏幕阅读器误读、SEO 降权，也影响后续用 CSS 精确控制样式。

常见错误是把 dl 当成“多列布局工具”，硬塞多个 dt 不带 dd，或者把 dd 套在 div 里再塞一堆段落——这会破坏嵌套规则，浏览器可能自动补全或忽略部分标签。

必须成对使用 dt 和 dd，且顺序不能乱

dt（definition term）必须直接包含术语本身，dd（definition description）紧跟其后，解释该术语。一个 dt 可以对应多个 dd（比如同义词或不同角度的解释），但一个 dd 不能跨多个 dt。

• dt 和 dd 必须都作为 dl 的直接子元素，不能用 div 包裹
• 多个 dt 连续出现是合法的（如多个同义术语共用一个解释），但后面必须跟至少一个 dd
• 浏览器对缺失 dd 的容忍度低：Chrome 会把后续 dt 当作新条目，Firefox 可能丢弃无配对的 dt

正确示例：

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

<dl>  <dt>HTTP</dt>  <dd>超文本传输协议，用于客户端与服务端通信</dd>  <dt>HTTPS</dt>  <dd>HTTP 的安全版本，基于 TLS 加密</dd></dl>

CSS 控制 dl 布局时注意默认缩进和换行

dl 默认没有 margin，但 dd 有左缩进（通常 40px），dt 是 inline-level 行内表现。想实现紧凑排版（如参数表格）、横向术语卡、或响应式双栏，得主动重置。

• 清除 dd 缩进：dd { margin-left: 0; }
• 让 dt 换行并加粗：dt { display: block; font-weight: bold; }
• 实现术语-解释并排（需注意可访问性）：dt, dd { display: inline-block; vertical-align: top; }，但必须确保屏幕阅读器仍能按逻辑顺序读出
• 避免用 float 或 flex 把 dt 和 dd 拆到不同容器里——这会割裂语义关系

嵌套 dl 要谨慎，尤其在文档生成场景

嵌套 dl 是合法的（比如某个术语的解释里又含子术语），但实际中容易失控。静态站点生成器（如 Docsify、Docusaurus）或 Markdown 转 HTML 工具常把缩进解析成嵌套 dl，结果渲染出多层缩进，视觉混乱且难以用 CSS 统一控制。

• 优先用单层 dl + 语义清晰的 dd 内容组织，而非靠嵌套表达层级
• 如果必须嵌套，给外层 dl 加 class（如 dl-nested），再单独写 CSS 限制缩进深度
• 检查无障碍测试工具（如 axe）是否报“nested definition lists may confuse assistive technology”警告

真正难的不是写对标签，而是判断某个内容结构到底适不适合用 dl——术语和解释之间有没有明确的“定义关系”，而不是仅仅因为看起来像两栏就硬套。