Simon Willison's Weblog

关于 <dl> 元素

6.5内容质量

TL;DR · AI 摘要

文章揭示了HTML中<dl>元素的实用特性，包括多<dd>支持、ARIA标签和屏幕阅读器兼容性。

核心要点

  • <dl>元素允许一个<dt>后跟多个<dd>标签
  • 可用<div>分组<dt>和<dd>用于样式，但仅限<div>
  • 可通过ARIA属性为<dl>添加语义标签

结构提纲

按章节快速跳转。

  1. §引言

    介绍文章来源及作者学习到的关于<dl>元素的新知识。

  2. ·HTML <dl>元素特性

    说明<dt>可跟随多个<dd>，并支持使用<div>进行分组。

  3. ›ARIA支持

    描述如何通过ARIA属性增强<dl>元素的语义表达。

  4. ·历史命名演变

    指出该元素从定义列表改名为描述列表的历史背景。

  5. ›无障碍访问支持

    提及Adrian Roselli关于描述列表屏幕阅读器支持的更新笔记。

思维导图

用一张图看清主题之间的关系。

查看大纲文本（无障碍 / 无 JS 友好）
  • HTML <dl> 元素
    • 基本特性
      • 多<dd>支持
      • 分组容器限制
    • 语义扩展
      • ARIA 标签
      • 命名演变
    • 无障碍支持
      • 屏幕阅读器兼容
      • 参考资源

金句 / Highlights

值得收藏与分享的关键句。

#HTML#前端#Web开发#无障碍访问
打开原文

2026年5月23日 - 链接博客

[关于 `<dl>`](https://benmyers.dev/blog/on-the-dl/) ([来源](https://news.ycombinator.com/item?id=48247325 "Hacker News")) 我从 Ben Meyer 的这篇文章中了解到了一些关于 <dl> 元素的新知识：

  1. 一个 <dt> 后面可以跟 _多个_ <dd>
  2. 你可以选择使用 <div> 将 <dt> 和 <dd> 元素分组以进行样式设置——但只能使用 <div>。
  3. 你可以使用 ARIA 来为它们添加标签。
  4. 自从 2008 年的 HTML5 草案以来，它们被称为“描述列表”而非“定义列表”。

所以这是有效的：

<h2 id="credits">Credits</h2> <dl aria-labelledby="credits"> <div> <dt>Author</dt> <dd>Jeffrey Zeldman</dd> <dd>Ethan Marcotte</dd> </div> </dl>

来自 Adrian Roselli 关于 描述列表的屏幕阅读器支持 的一条有用注释。