> Prior to HTML5, this was called a definition list. This is because the <dl> was originally only intended to represent glossaries of terms and their definitions.
I love DL. I think tables, at least in the past, were misused as DLs even more in the past and the inconvenience of the table markup is even worse than a bunch of divs.
I've used this a good amount of times, when I coded in front end projects. The first time gave me that satisfying feeling of using the right tool for the job, like completing a puzzle of HTML semantics. I remember JAWS not announcing it correctly in 2018, not sure if it's better now.
When I checked in 2024 or 2025, Windows Narrator announced it differently in Chrome, Firefox, Edge (Chromium mode) and Edge (IE mode), and none of them worked how I would expect them to. Adrian Roselli's verdict (https://adrianroselli.com/2025/01/updated-brief-note-on-desc...):
> Description list support continues to be generally good (with VoiceOver still the outlier), even if you may not like how it is supported.
You shouldn't try to fix this kind of thing by mangling the HTML, since (1) users tend to be used to their screen reader's quirks, and (2) in situations like these, making it juuuust right in one screen reader is likely to make it incomprehensible in another. But it is important to be aware of these quirks, so you don't accidentally design an interface that relies on less-quirky behaviour.
I was a bit surprised to see nested <div>s given as some sort of precursor pattern, when <dl> was part of HTML before 2.0 back in the days of table layout.
> Prior to HTML5, this was called a definition list. This is because the <dl> was originally only intended to represent glossaries of terms and their definitions.
TIL I’ve been naming it wrong for a decade.
Here's a useful note on how well screen readers support DL: https://adrianroselli.com/2025/01/updated-brief-note-on-desc...
it's on archive html5 .flac 16-bit 44.1kHz no <dl> flag.
I love DL. I think tables, at least in the past, were misused as DLs even more in the past and the inconvenience of the table markup is even worse than a bunch of divs.
You're right, but forcing tables to cosplay as DLs was far from the worst way that tables were abused.
The final example of the DnD statt sheet makes me think whether it's legal to nest <dl>s?
I.e. can we do
The GOV.UK Design System summary list component is a description list https://design-system.service.gov.uk/components/summary-list...
And... it also uses the wrapper div for styling
I'm curious if the spec actually says you can only wrap it with a div because I like to do semantic html and name my elements specific to my domain.
Yep, I was a little surprised about that too, seem like it is valid though https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...
Yes: https://html.spec.whatwg.org/multipage/grouping-content.html...
Seems like div is the only recommended wrapper element:
https://html.spec.whatwg.org/multipage/grouping-content.html...
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...
EDIT everyone replied at once lol. I'm surprised too about div.
Also, screen reader support: https://a11ysupport.io/tech/html/dl_element
What about multiple '<dt>' for one or more '<dd>'?
I've used this a good amount of times, when I coded in front end projects. The first time gave me that satisfying feeling of using the right tool for the job, like completing a puzzle of HTML semantics. I remember JAWS not announcing it correctly in 2018, not sure if it's better now.
When I checked in 2024 or 2025, Windows Narrator announced it differently in Chrome, Firefox, Edge (Chromium mode) and Edge (IE mode), and none of them worked how I would expect them to. Adrian Roselli's verdict (https://adrianroselli.com/2025/01/updated-brief-note-on-desc...):
> Description list support continues to be generally good (with VoiceOver still the outlier), even if you may not like how it is supported.
You shouldn't try to fix this kind of thing by mangling the HTML, since (1) users tend to be used to their screen reader's quirks, and (2) in situations like these, making it juuuust right in one screen reader is likely to make it incomprehensible in another. But it is important to be aware of these quirks, so you don't accidentally design an interface that relies on less-quirky behaviour.
Hoped to see CSS for the alternative, where <div> is not nested inside the <dl>. Too used to thinking of div as "layout containers."
I was a bit surprised to see nested <div>s given as some sort of precursor pattern, when <dl> was part of HTML before 2.0 back in the days of table layout.
blog looks beautiful. I really wish I had this kind of talent for frontend.
Good title