On The <dl> (2021)

On The `<dl>` (2021)

Introduction

The <dl>, or description list, element is underrated. It’s used to represent a list of name–value pairs. This is a common UI pattern that, at the same time, is incredibly versatile. For instance, you’ve probably seen these layouts out in the wild… Each of these examples shows a list (or lists!) of name–value pairs. You might have also seen lists of name–value pairs to describe lodging amenities, or to list out individual charges in your monthly rent, or in glossaries of technical terms. Each of these is a candidate to be represented with the <dl> element. So what does that look like?

简介

<dl>（描述列表）元素常被低估。它用于表示一组“名称-值”对。这是一种常见的 UI 模式，同时又极其通用。例如，你可能在现实中见过这些布局……每一个示例都展示了一个（或多个！）“名称-值”对列表。你可能还见过用“名称-值”对来描述住宿设施、列出每月租金的各项费用，或是技术术语表。这些场景都可以使用 <dl> 元素来表示。那么它看起来是什么样的呢？

The Anatomy of a Description List

I’ve been saying “<dl>,” when really, I’m talking about three separate elements: <dl>, <dt>, and <dd>. We start with our <dl>. This is the description list, akin to using a <ul> for an unordered list or an <ol> for an ordered list.

描述列表的结构

我一直在说“<dl>”，但实际上我指的是三个独立的元素：<dl>、<dt> 和 <dd>。我们从 <dl> 开始。这是描述列表，类似于使用 <ul> 表示无序列表，或使用 <ol> 表示有序列表。

<dl>
</dl>

Fancy. Next up, we want to add a name–value pair. We’ll use a <dt>, short for description term, for the name, and we’ll use a <dd>, short for description detail, for the value.

很棒。接下来，我们要添加一个“名称-值”对。我们将使用 <dt>（description term 的缩写）来表示名称，使用 <dd>（description detail 的缩写）来表示值。

<dl>
  <dt>Title</dt>
  <dd>Designing with Web Standards</dd>
</dl>

To add another name–value pair to our list, we add another <dt> and <dd>:

要向列表中添加另一个“名称-值”对，我们只需再添加一个 <dt> 和 <dd>：

<dl>
  <dt>Title</dt>
  <dd>Designing with Web Standards</dd>
  <dt>Publisher</dt>
  <dd>New Riders Pub; 3rd edition (October 19, 2009)</dd>
</dl>

But wait — what if I have a term that has multiple values? For instance, what if this book has multiple authors? That’s fine! One <dt> can have multiple <dd>s:

等等——如果一个术语有多个值怎么办？例如，如果这本书有多个作者？没问题！一个 <dt> 可以对应多个 <dd>：

<dl>
  <dt>Title</dt>
  <dd>Designing with Web Standards</dd>
  <dt>Author</dt>
  <dd>Jeffrey Zeldman</dd>
  <dd>Ethan Marcotte</dd>
  <dt>Publisher</dt>
  <dd>New Riders Pub; 3rd edition (October 19, 2009)</dd>
</dl>

There’s one last piece of the description list anatomy to look at for most basic use cases: what if I want to wrap a <dt> and its <dd>(s) for styling reasons? In this case, the specs allow you to wrap a <dt> and its <dd>(s) in a <div>:

对于大多数基本用例，描述列表结构中还有最后一点需要注意：如果为了样式原因，我想把 <dt> 及其对应的 <dd> 包裹起来怎么办？在这种情况下，规范允许你使用 <div> 来包裹 <dt> 及其 <dd>：

<dl>
  <div>
    <dt>Title</dt>
    <dd>Designing with Web Standards</dd>
  </div>
  <div>
    <dt>Author</dt>
    <dd>Jeffrey Zeldman</dd>
    <dd>Ethan Marcotte</dd>
  </div>
  <div>
    <dt>Publisher</dt>
    <dd>New Riders Pub; 3rd edition (October 19, 2009)</dd>
  </div>
</dl>

A wrapper <div> like this is the only element that can wrap those <dt>/<dd> groups. And that’s it! That’s the anatomy of the description list, HTML’s semantic way to mark up a list of name–value groups!

像这样的包裹 <div> 是唯一可以包裹这些 <dt>/<dd> 组的元素。就是这样！这就是描述列表的结构，它是 HTML 中标记“名称-值”组列表的语义化方式！

Why Do We Need Semantics For This Anyways?

Before we learned about the <dl>, <dt>, and <dd> elements, my team used to use nested <div>s for this pattern all the time. This has all the information about the book, right? Why do we need semantics for a list of name–value groups in the first place if something like a series of nested <div>s could get the job done?

为什么我们需要为此使用语义化标签？

在我们了解 <dl>、<dt> 和 <dd> 元素之前，我的团队过去一直使用嵌套的 <div> 来实现这种模式。这包含了关于书籍的所有信息，对吧？如果一系列嵌套的 <div> 就能完成任务，我们为什么还要为“名称-值”组列表使用语义化标签呢？

When determining whether a semantic element might be appropriate for a given pattern, I find it helpful to ask, “What benefits — even theoretical — could we get if computers could recognize this pattern?” In this case, what lift could we get if browsers could somehow recognize a list of name–value groups?

在确定某个语义元素是否适用于特定模式时，我发现问自己一个问题很有帮助：“如果计算机能够识别这种模式，我们能获得什么好处（哪怕是理论上的）？”在这种情况下，如果浏览器能够识别“名称-值”组列表，我们能获得什么提升？

I tend to spend a lot of time advocating for web accessibility, so my first thought tends to be how screenreaders could interpret the pattern. Off the top of my head, I can think of a couple of benefits screenreader users could get from their screenreaders recognizing this pattern:

The screenreader could tell the user how many name–value groups are in the list.
The screenreader could tell the user how far into the list they are.
The screenreader could treat the list as one block that the user could skip over if they’re uninterested in it.

我花了很多时间倡导 Web 无障碍访问，所以我的第一反应通常是屏幕阅读器如何解读这种模式。我能立刻想到屏幕阅读器用户在设备识别出这种模式后可以获得的一些好处：

屏幕阅读器可以告诉用户列表中有多少个“名称-值”组。
屏幕阅读器可以告诉用户他们当前在列表中的位置。
屏幕阅读器可以将列表视为一个整体，如果用户不感兴趣，可以跳过它。

All of these could make the list more usable than a series of nested <div>s, which would treat each name and value in the list as nothing more than a standalone text node. If you can come up with a couple of even theoretical lifts from the user’s device recognizing a pattern, then there’s a good chance that the pattern is a strong candidate for having some associated semantics.

所有这些都能使列表比一系列嵌套的 <div> 更易用，因为后者会将列表中的每个名称和值仅仅视为独立的文本节点。如果你能想到用户设备识别模式后带来的哪怕一点点理论上的提升，那么该模式就很可能是一个非常适合使用语义化标签的候选对象。

For what it’s worth, these screenreader experiences aren’t hypothetical — they’re benefits that screenreader users really get from using <dl> in most browser/screenreader combinations. Admittedly, however, support for the <dl> element is not yet universal. You may decide that screenreaders’ fallback experience — treating the list as standalone text nodes — isn’t sufficient for your use case, and instead opt for something like a <ul> until support improves.

值得一提的是，这些屏幕阅读器的体验并非假设——它们是屏幕阅读器用户在大多数浏览器/屏幕阅读器组合中使用 <dl> 时真正能获得的好处。不过不可否认的是，对 <dl> 元素的支持尚未普及。你可能会认为屏幕阅读器的回退体验（将列表视为独立的文本节点）无法满足你的需求，从而选择使用 <ul> 等其他方式，直到支持度有所改善。

Okay, Okay, One Last Example!

My favorite example, the one that really takes the cake for me, is Dungeons & Dragons statblocks, which are really “Oops! All Name–Value Pairs!” No, really: just how many candidates for <dl>s do you see in this statblock alone? I counted five possible description lists, personally.

好吧，最后一个例子！

我最喜欢的例子，也是我认为最典型的例子，是《龙与地下城》的属性块（statblocks），它们简直就是“天哪！全是名称-值对！”真的：仅在这个属性块中，你就能看到多少个 <dl> 的候选对象？我个人数出了五个可能的描述列表。