On The <dl> (2021)

benmyers.dev442 pointsby ravenical125 comments

Join the discussion

Write your take first — we'll ask for email only when you're ready to publish.

Hacker News
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.
by rickstanley
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.
by wizzwizz4
Great post. Very minor nitpick: ‘The small element must not be used for subheadings; for that purpose, use the hgroup element.’
‘The small element represents side comments such as small print. Small print typically features disclaimers, caveats, legal restrictions, or copyrights. Small print is also sometimes used for attribution, or for satisfying licensing requirements.’
(https://html.spec.whatwg.org/multipage/text-level-semantics....)
by currysausage
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.
by phyzix5761
Custom-named elements are divs.
by moron4hire
Yes: https://html.spec.whatwg.org/multipage/grouping-content.html...
by Tomte
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/...
by philo23
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
by wonger_
As others have noted only the div is allowed. This isn't a unique situation either, the HTML spec despite being lenient in syntax is quite restrictive in behavior. It's unfortunate that XHTML (and XML parsing) didn't become the default as it's the opposite, more restrictive syntax, but lenient behavior.
For example in XHTML you can use custom elements as table rows or cells (provided you give them the correct role and CSS display property). This is because XHTML does not modify the tree during parsing, unlike HTML which will hoist out custom element children of the table to the table's parent.
by notnullorvoid
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.
by Demiurge
I always thought the DL as a single row of a table.
by egeozcan
You're right, but forcing tables to cosplay as DLs was far from the worst way that tables were abused.
by bdcravens
It's not that inconvenient if you omit unnecessary closing tags:
```
    <tr>
    <td> first
    <td> second
    <tr>
    <td> what
    <td> ever
```
I find it simpler and cleaner than any of the markdown table markups
by enriquto
We've always used this in our ebooks for abbreviation and glossary lists. The problem I've always had is that you need to use a bit of css to make two lined-up columns. I've done it with floats. Now, some ebook readers will support grid and flex-box, which give better results, but the Kindle still does not. Kindle is sort of the IE6 of the ebook world.
by Finnucane
The final example of the DnD statt sheet makes me think whether it's legal to nest <dl>s?
I.e. can we do
```
    <dl>
      <dt>Actions</dt>
      <dd><dl>...</dl></dd>
    </dl>
```
by cloud-oak
Yes. Any flow content is permitted inside a <dd>. See:
https://html.spec.whatwg.org/#the-dd-element
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...
by perilunar
Here's a useful note on how well screen readers support DL: https://adrianroselli.com/2025/01/updated-brief-note-on-desc...
by simonw
> 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.
by captn3m0
I don’t want to check what year html5 was standardized because I think it may be north of a decade ;)
by xp84
You’re not alone. This is the second time this week I’ve seen that, and thought it was a mistake the first time.
by Ancapistani
TIL The name was changed from a definition list.
by jasonlotito
Bleh. <b> is apparently now bring attention to. As if.
by sunshowers
The world's first website makes heavy use of <dl>s.
https://info.cern.ch/hypertext/WWW/TheProject.html
https://info.cern.ch/ (A landing page of sorts to give context and orientation about the actual first website.)
by jimbosis
Good website. It's responsive.
by AlienRobot
List history (listory?) lesson, kids: As the link below to a 1985 IBM mainframe DCF/GML manual shows, DL-DT-DD have been a thing since before the web. In addition to Definition lists (DL), the 40+ year-old documentation describes Glossary lists (GL), Ordered lists (OL), Unordered lists (UL), and Simple lists (SL).
ibm :: 370 :: DCF :: SH35-0050-2 Document Composition Facility Generalized Markup Language Implementation Guide Rel 3 Mar85
https://archive.org/details/bitsavers_ibm370DCFSpositionFaci...
by theodpHN
Isn't it description list?
by JohnKemeny
GML dates to 1969, SGML from the 1970s. Internally we used something called BookMaster which kind of? looks like a precursor to HTML (you had :p. instead of <p>, :li. instead of <li>). There was an effort circa 1990-1991 (as TBL was developing HTML and HTTP) called HyTime which was an SGML application focused on hypermedia. HTML killed that fairly quickly.
See https://en.wikipedia.org/wiki/Charles_Goldfarb who shepherded GML/SGML and https://en.wikipedia.org/wiki/Standard_Generalized_Markup_La...
by epc
I believe IBM Generalized Markup Language evolved into SGML (Standard Generalized Markup Language) which was used heavily at CERN when Tim Berners-Lee was working on HTML, which is heavily derived from it. I find this interesting about HTML: some form of the markup language had been floating around for decades until Berners-Lee added hyperlinks to it.
by skgough
This is going to be unpopular here, but life became easier when I quit trying to write semantic HTML. It’s just poorly designed, I’m sorry. Every time I’ve reached for a <dl> I’ve eventually regretted it because I wanted multiple levels of wrappers, or a divider between sections, or an icon, or a heading spanning multiple key-value pairs, etc. They make this stuff with some flexibility but nowhere near enough to actually cover the generalized concept it purports to. I still use the corresponding elements when there are observable benefits, of course, like <button>, <h1>, etc, but when all it’s going to do is not quite fit the data model and force me to override everything, it’s just not a practical choice.
It shouldn’t be so controversial to say that if 99% of usage routes around your API, it’s probably the API’s fault.
by kqp
Sounds like it's CSS' fault then. I think that just like they introduced `display:contents` to remove wrappers, they should also introduce a way to group elements as if they had a common ancestor.
```
    :wrap(dt, dt+dd) {border: solid 1px}
```
by halapro