学会在HTML中使用dl标签定义术语列表的详细教程

` 里再塞入多个段落，不仅会让屏幕阅读器误判内容结构，进而导致 SEO 权重下降，后续用 CSS 精确控制样式也会变得棘手。

dl 标签的真正用途：定义列表，而非普通列表

dl 的语义核心是“定义列表”，它与 ul、ol 这类通用列表有本质差异。它专门服务于“术语+解释”的配对结构，比如词典条目、API 参数说明、配置项文档等。误用语义的危害不可小觑：屏幕阅读器会误解内容层级，搜索引擎可能降低权重，后续样式管理也会因结构混乱而变得复杂。

常见错误是将 dl 视为“多列布局工具”，例如仅放置多个 dt 而缺少 dd，或将 dd 用 div 包裹后再塞入多个段落——这破坏了嵌套规则，导致浏览器自动补全或直接忽略部分标签。简而言之，dl 就是为“术语-解释”的一对一或一对多关系设计的，并非用于普通列表布局。

dt 与 dd 必须成对使用，且顺序不可颠倒

dt（定义术语）直接包含术语本身，dd（定义描述）紧随其后进行解释。一个 dt 可对应多个 dd（如同义词或多角度解释），但一个 dd 不能跨多个 dt。具体规则如下：

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

正确示例：

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

使用 CSS 控制 dl 布局时，注意默认缩进与换行行为

dl 默认无外边距，但 dd 带有左缩进（通常 40px），dt 则为行内级表现。如需实现紧凑排版，比如参数表格、横向术语卡或响应式双栏，必须主动重置默认样式。

• 清除 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）是否报告“嵌套定义列表可能混淆辅助技术”的警告

真正的难点并非正确书写标签，而是判断某个内容结构到底适不适合用 dl——术语与解释之间是否有明确的“定义关系”，而不是仅仅因为看起来像两栏就强行套用。把握好这一原则，比任何技术细节都更加重要。