在HTML的众多元素中，<dl> 往往是被低估却极具语义价值的角色。它不像<ul>和<ol>那样频繁出现，也不像 <div> 那样通用，但当你需要表达“术语与其描述”这种成对关系时， <dl> 便是最恰当的选择。无论是构建词汇表、常见问题板块，还是展示产品规格或API文档， <dl> 都能以清晰、机器可读的方式呈现内容。本文将带你深入理解 <dl>的用法，并揭示如何在实际项目中充分发挥其优势。

一、基本概念

<dl>（Definition List）是HTML中用于创建定义列表的语义化元素。它表示一组术语（<dt>）及其对应的定义或描述（<dd>），强调的是“键-值”或“名称-描述”之间的关联。

与<ul> 或 <ol>不同，<dl> 并不表示项目的顺序或无序集合，而是明确表达一种定义关系，这也是其语义核心所在。

二、结构组成

<dl>内部由以下两种子元素构成：

  • <dt>（Definition Term）：表示术语、名称或问题。

  • <dd>（Definition Description）：提供对应术语的定义、描述或答案。

一个<dl>可以包含多 <dt>-<dd>对，且支持以下灵活结构：

  • 一个<dt>对应多个<dd>（表示一个术语有多个定义）。

  • 多个<dt>共享一个<dd>（表示多个术语对应同一个定义）。

<dl>
  <dt>术语A</dt>
  <dd>术语A的定义</dd>

  <dt>术语B</dt>
  <dd>术语B的第一个定义</dd>
  <dd>术语B的第二个定义</dd>

  <dt>术语C1</dt>
  <dt>术语C2</dt>
  <dd>术语C1和C2的共同定义</dd>
</dl>

三、语义化价值

  • 内容明确性：<dl>从结构上表明“这是一组定义关系”，开发者和机器均可准确理解。

  • 辅助技术支持：屏幕阅读器会以特殊方式解读<dl>，帮助视障用户区分术语与定义。

  • SEO增强：搜索引擎可更精准识别关键术语与其解释，有助于提升内容的相关性排名。

四、典型使用场景

场景

示例

词汇表

术语与释义

FAQ

问题与答案

产品规格

属性与说明

元数据

作者、日期、类别等键值对

API文档

参数名与描述

配置说明

配置项与含义

五、增强示例：综合应用

以下示例展示了一个产品规格说明，结合了多个 <dt> 与 <dd>，并加入微格式增强语义。

<dl class="product-specs">
  <dt>型号</dt>
  <dd>X100 Pro</dd>

  <dt>处理器</dt>
  <dd>8核 3.2GHz</dd>

  <dt>内存</dt>
  <dd>16GB LPDDR5</dd>

  <dt>存储</dt>
  <dd>512GB UFS 4.0</dd>
  <dd>支持1TB扩展</dd>

  <dt>屏幕尺寸</dt>
  <dt>显示屏</dt>
  <dd>6.8英寸 AMOLED, 120Hz</dd>
</dl>

六、样式控制与布局技巧

默认情况下，浏览器会给 <dd>添加左边距。通过CSS可以自由调整布局，例如使用网格或弹性盒模型实现更美观的呈现。

dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 1rem;
}

dt {
  font-weight: bold;
}

dd {
  margin: 0;
}

若需实现多列布局或更复杂的样式，可在 <dl> 内部嵌套 <div>（HTML5允许），以便更灵活地控制布局而不破坏语义。

<dl>
  <div>
    <dt>术语</dt>
    <dd>定义</dd>
  </div>
</dl>

七、与其他列表元素的对比

  • <ul> / <ol>：适用于无序或有序的项目列表，不强调术语与定义的配对关系。

  • <div>：无任何语义，仅用于布局或分组，不应替代<dl> 表达定义内容。

  • <table>：用于展示表格数据，虽可模拟键值对，但语义不符且不够简洁。

八、可访问性增强建议

  • 使用aria-labelledby或aria-describedby为<dl>提供更明确的上下文。

  • 避免在<dl>中直接使用非语义化元素破坏结构。

  • 确保<dt>内容简洁明确，便于屏幕阅读器朗读。

<dl aria-label="产品技术规格">
  <dt>重量</dt>
  <dd>198克</dd>
</dl>

九、浏览器兼容性与现代支持

所有现代浏览器及IE 9及以上版本均完整支持<dl>、<dt>、<dd>。在响应式设计与CSS Grid/Flex布局中，这些元素同样表现良好。

总结

<dl>元素是HTML语义化体系中不可忽视的组成部分。它通过<dt>与<dd>的配对结构，精准表达了“术语-定义”的关系，在词汇表、FAQ、规格说明等场景中具备不可替代的优势。合理使用<dl>不仅能提升代码的可读性与可维护性，还能增强网页的可访问性与搜索引擎友好度。

在实际开发中，应优先考虑内容本身的语义关系来决定是否使用<dl>，并结合现代CSS布局技术，在保持语义纯净的同时实现灵活美观的界面。掌握<dl>，就是向高质量、语义化的前端实践又迈进了一步。

彩蛋

文中配有完整示例，点击《dl元素深度示例》即可查看。