On the dl
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.
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>
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.
<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>
:
<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:
<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>
:
<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!
Why Do We Need Semantics For This Anyways?
Before we learned about the <dl>
, <dt>
, and <dd>
elements, we used to use nested <div>
s for this pattern all the time. It looked a lot like:
<div class="book-details">
<div class="book-details--item">
<div class="book-details--label">
Title
</div>
<div class="book-details--value">
Designing with Web Standards
</div>
</div>
<div class="book-details--item">
<div class="book-details--label">
Author
</div>
<div class="book-details--value">
Jeffrey Zeldman
</div>
<div class="book-details--value">
Ethan Marcotte
</div>
</div>
<div class="book-details--item">
<div class="book-details--label">
Publisher
</div>
<div class="book-details--value">
New Riders Pub; 3rd edition (October 19, 2009)
</div>
</div>
</div>
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?
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?
Answers to that question will be varied. 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.
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.
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.
Takeaways
Lists of name–value pairs (or, in some cases, name–value groups) are a common pattern across the web, in part due to their versatility. HTML lets us mark up these lists with a combination of three elements:
- The
<dl>
, or description list, element, which wraps the entire list of name–value pairs - The
<dt>
, or description term, element, which represents a name in our name–value pairs - The
<dd>
, or description detail, element, which represents a value in our name–value pairs
Ascribing semantics to patterns such as these gives our users’ devices the information they need to curate useful, usable experiences – oftentimes in ways that we as developers may not expect.
To learn more about description lists and what’s allowed or not allowed, I recommend the MDN docs on the <dl>
, or going directly to the specs!
Source: benmyers.dev – Author: Ben Myers