HTML描述列表dl元素：4个你不知道的用法与最佳实践

你以为自己很了解 HTML 吗？即便是最基础的元素，也可能藏着你不知道的细节。最近 Ben Myers 的一篇文章揭示了关于 <dl> 元素的几个鲜为人知的事实，引发了开发者社区的广泛讨论。

它叫"描述列表"，不是"定义列表"

很多前端开发者至今仍将 <dl> 称为"definition list"（定义列表），但实际上早在 2008 年的 HTML5 草案中，它就已经被重新命名为"description list"（描述列表）了。

这个名称变更并非无关紧要——它反映了语义上的重大扩展。<dl> 不再局限于术语定义的场景，而是适用于任何"名称-值"对的描述关系。比如产品参数、人物档案、FAQ 列表等，都是 HTML 描述列表的合法使用场景。

背景：HTML5 语义化革命

这次重命名是整个 HTML5 语义化运动的缩影。2004 年至 2014 年间，WHATWG（网页超文本应用技术工作小组）和 W3C 对 HTML 规范进行了大规模重构，核心目标之一就是让标签的语义更贴近现实使用场景，而非局限于早期 Web 的文档出版模型。在这一时期，<b>、<i> 等表现性标签被赋予了新的语义含义，<article>、<section>、<nav> 等全新语义标签被引入，<dl> 的重命名正是这场"语义化革命"的组成部分。这种转变的深层逻辑是：HTML 标签应该描述内容是什么，而不是内容长什么样，从而让机器（搜索引擎、屏幕阅读器）和人类都能更准确地理解页面结构。

四个你可能不知道的 <dl> 元素特性

1. 一个 <dt> 可以对应多个 <dd>

这是最让人意外的一点。大多数开发者习惯了一对一的写法，但 HTML 规范明确允许一个术语（<dt>）后面跟随多个描述（<dd>）。例如一个"作者"字段对应多位作者，完全合法：

<dt>Author</dt>
<dd>Jeffrey Zeldman</dd>
<dd>Ethan Marcotte</dd>

这在实际开发中非常实用，比如展示一部电影的多位导演、一个项目的多位贡献者等场景。规范同样允许多个连续的 <dt> 共享同一个 <dd>，适用于多个同义词共享同一解释的词汇表场景，这种灵活性使 <dl> 能够精确建模现实世界中复杂的多对多描述关系。

2. 可以用 <div> 包裹 <dt> 和 <dd>，但只能用 <div>

为了方便 CSS 样式控制，HTML 规范允许你将 <dt> 和 <dd> 组合包裹在 <div> 中。但这里有一个严格的限制：只能使用 <div>，不能用 <section>、<span> 或其他任何元素。

<dl>
  <div>
    <dt>Author</dt>
    <dd>Jeffrey Zeldman</dd>
    <dd>Ethan Marcotte</dd>
  </div>
</dl>

这个设计是为了在不破坏语义结构的前提下，给开发者提供布局上的灵活性。比如你想用 CSS Grid 或 Flexbox 对每组 dt/dd 进行排版，<div> 包裹就是最佳方案。

为什么只允许 <div>？

这一限制背后有严谨的语义考量。<div> 在 HTML 规范中被定义为"无语义的通用容器"（generic container with no semantic meaning），它的存在纯粹服务于样式和脚本需求，不会向文档的语义层引入任何额外含义。相比之下，<section> 暗示一个独立的内容区块，<article> 暗示可独立分发的内容，<span> 则是行内级别的容器——将这些元素插入 <dl> 内部会破坏描述列表的内容模型（content model），导致解析器行为不一致，并可能误导辅助技术对列表结构的理解。HTML 规范通过精确定义每个元素的"允许内容"（permitted content）和"允许父元素"（permitted parents）来维护这种语义一致性，<div> 的特殊豁免地位正是这一设计哲学的体现。

3. 使用 ARIA 标签增强可访问性

<dl> 元素支持通过 ARIA 属性进行标注，这对提升 Web 可访问性至关重要。例如使用 aria-labelledby 将描述列表与一个标题关联：

<h2 id="credits">Credits</h2>
<dl aria-labelledby="credits">
  ...
</dl>

这对屏幕阅读器用户来说意义重大，能帮助他们快速理解这个描述列表的上下文和用途。

ARIA 技术背景

ARIA（Accessible Rich Internet Applications，无障碍富互联网应用）是 W3C 于 2008 年首次发布、2017 年推出 1.1 版本的技术规范。它通过在 HTML 元素上添加 role（角色）、aria-* 状态和属性，弥补原生 HTML 语义在复杂交互场景下的不足，帮助辅助技术（如屏幕阅读器、盲文显示器）更准确地解读页面内容。ARIA 的核心原则是"第一原则"（First Rule of ARIA Use）：如果能用原生 HTML 元素或属性实现所需语义，就不要使用 ARIA。因此，为 <dl> 添加 aria-labelledby 并非替代原生语义，而是在原生语义基础上的增强——为列表提供一个机器可读的标签，使屏幕阅读器在导航时能够播报"Credits，描述列表"这样的完整上下文信息，而非仅仅宣告"描述列表"。

4. 屏幕阅读器的支持情况参差不齐

无障碍专家 Adrian Roselli 专门撰文分析了各主流屏幕阅读器对描述列表的支持情况。现实并不乐观——不同屏幕阅读器对 <dl> 的处理方式差异较大，有些甚至会忽略其语义结构。

屏幕阅读器生态现状

目前主流屏幕阅读器包括：Windows 平台的 NVDA（NonVisual Desktop Access，免费开源，市场占有率最高）和 JAWS（Job Access With Speech，Freedom Scientific 出品的商业软件，企业环境主流）；Apple 生态内置的 VoiceOver（覆盖 macOS、iOS、iPadOS）；Android 内置的 TalkBack；以及面向 Chrome 用户的 ChromeVox。各工具对 HTML 语义的解析依赖操作系统提供的可访问性 API（Windows 上为 UIA 或 IAccessible2，macOS 上为 NSAccessibility），再经由浏览器的可访问性树（Accessibility Tree）传递。这条链路上的任何一个环节实现不一致，都会导致同一段 HTML 在不同屏幕阅读器中产生截然不同的播报行为。WebAIM 每年发布的屏幕阅读器用户调查显示，约 40% 的用户同时使用多款屏幕阅读器，这使得跨平台测试成为无障碍开发的必要环节而非可选项。

这意味着如果你的项目对无障碍有较高要求，在使用 <dl> 时需要额外进行跨平台测试，并考虑是否需要 ARIA 属性作为补充。

什么时候该用 <dl>？

HTML 描述列表最适合以下场景：

• 元数据展示：文章的作者、发布日期、分类标签等
• 术语表与词汇表：术语及其解释说明
• 键值对信息：产品规格参数、个人资料卡片
• FAQ 页面：问题与回答的结构化配对

相比用 <table> 或纯 <div> 来实现这些布局，<dl> 提供了更准确的 HTML 语义化表达，对 SEO 和可访问性都有正面影响。

语义化与 SEO 的关联

搜索引擎爬虫（如 Googlebot）在解析页面时，会构建一个类似于浏览器可访问性树的内部表示，用于理解内容的结构和重要性层级。使用语义化标签（如 <dl> 而非嵌套 <div>）能够向爬虫传递明确的内容关系信号：这是一组相互关联的名称-值对，而非孤立的文本块。Google 的结构化数据指南也鼓励开发者使用语义化 HTML 作为 Schema.org JSON-LD 标注的补充，两者协同能够提升富摘要（Rich Snippets）的生成概率。值得注意的是，语义化对 SEO 的提升是间接的、长期的——它通过改善可爬取性、降低内容歧义来积累权重，而非直接触发排名提升，因此不应将其视为 SEO 技巧，而应视为工程质量的基础投入。

小结

HTML 的基础元素看似简单，但深入了解后往往会发现被忽视的能力。<dl> 作为一个存在了二十多年的语义化标签，其灵活性和语义价值远超多数前端开发者的认知。下次当你需要展示"名称-值"对的结构化信息时，不妨优先考虑 <dl> 描述列表，而不是习惯性地堆砌 <div>。

核心要点