On The <dl>

117

rravenical about 3 hours ago 39 commentsRead Article on benmyers.dev

ES version is available. Content is displayed in original English for accuracy.

⚡ Community Insights

Discussion Sentiment

75% Positive

Analyzed from 864 words in the discussion.

Discussion (39 Comments)Read Original on HackerNews

chrismorgan•37 minutes ago

> <dl aria-label="Ability Scores">

This is incorrect:

1. <dl> has no corresponding (viz. implicit) role, but can be given the role group, list, none or presentation <https://w3c.github.io/html-aria/#el-dl>.

2. You’re only allowed to define aria-label on elements that have a compatible role, implicit or explicit <https://w3c.github.io/html-aria/#docconformance-naming>.

3. aria-label is allowed on all but a handful of roles <https://www.w3.org/TR/wai-aria-1.2/#aria-label>, which in this case knocks out presentation and none, leaving group and list.

4. group doesn’t feel right, list feels acceptable.

In summary: either ditch the aria-label, or add role="list" (meaning also role="listitem" on children).

—⁂—

One thing the article misses is that you can have multiple <dt> in a row too, not just <dd>. The spec has a good example: https://html.spec.whatwg.org/multipage/grouping-content.html...

They’re not name–value pairs, they’re name–value groups.

jimbosis•38 minutes ago

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.)

captn3m0•about 2 hours ago

> 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.

jasonlotito•2 minutes ago

TIL The name was changed from a definition list.

xp84•18 minutes ago

I don’t want to check what year html5 was standardized because I think it may be north of a decade ;)

Demiurge•about 1 hour ago

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.

enriquto•44 minutes ago

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

myfonj•11 minutes ago

Fair point, though /DT and /DD are also optional just like /TH, /TD and /TR are. So in effect, def…scription list could structurally save you one TR for each entry and two "BLE"s:

    <table><tr><th>Term 1<td>Definition 1
           <tr><th>Term 2<td>Definition 2
    </table>
    <dl><dt>Term 1<dd>Definition 1
        <dt>Term 2<dd>Definition 2
    </dl>

debesyla•40 minutes ago

Isn't markdown table just a bunch of | ?

zufallsheld•38 minutes ago

That's the problem.

egeozcan•31 minutes ago

I always thought the DL as a single row of a table.

bdcravens•about 1 hour ago

You're right, but forcing tables to cosplay as DLs was far from the worst way that tables were abused.

sodapopcan•43 minutes ago

At least <td>s could easily centre things vertically ;)

cloud-oak•about 1 hour ago

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>

perilunar•about 1 hour ago

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/...

myfonj•6 minutes ago

Plus, when curious about formal syntactic correctness, there is the validator.w3.org [1].

[1] https://validator.w3.org/nu/?showsource=yes&showoutline=yes&...

moron4hire•24 minutes ago

I do it to render nested JSON objects, for example.

shermantanktop•31 minutes ago

The <dl> tag seems to cover a subset of a broad semantic space, but doesn’t easily extend beyond adding another <dd>.

I dunno, I guess I’m a caveman. If it looks right and works (including accessibility) then I figure I’m pursuing something that doesn’t matter a lot.

simonw•about 1 hour ago

Here's a useful note on how well screen readers support DL: https://adrianroselli.com/2025/01/updated-brief-note-on-desc...

michalc•about 1 hour ago

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

9dev•42 minutes ago

The wrapper div is making me a bit sad. These days, using grid layout, you don’t actually need it in most cases

rickstanley•about 2 hours ago

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.

wizzwizz4•about 2 hours ago

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.

Telemakhos•about 2 hours ago

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.

phyzix5761•about 2 hours ago

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.

philo23•about 2 hours ago

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/...

wonger_•about 2 hours ago

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

moron4hire•23 minutes ago

Custom-named elements are divs.

Tomte•about 2 hours ago

Yes: https://html.spec.whatwg.org/multipage/grouping-content.html...

tln•about 1 hour ago

> Admittedly, however, support for the <dl> element is not yet universal.

Wait what? <DL> has been in HTML since.. the first draft in 1993!

I like DL's but they can be challenging to style. This article is using a lot of fixed pixel widths which would break on really small screens or larger data.

jazzypants•7 minutes ago

That line was referencing support for the <dl> element in accessibility software. The "yet" still doesn't make sense considering the timeline, but I think they were just being hopeful for future support.

turtleyacht•about 2 hours ago

Hoped to see CSS for the alternative, where <div> is not nested inside the <dl>. Too used to thinking of div as "layout containers."

gbeardish•about 1 hour ago

What about multiple '<dt>' for one or more '<dd>'?

smitty1e•41 minutes ago

This seems a clear enough win for things that would fit into a simple python dictionary.

Why is it preferred over <table> for laying out columns via a the character attributes at the bottom of TFA?

mockbuild•about 1 hour ago

it's on archive html5 .flac 16-bit 44.1kHz no <dl> flag.

jdw64•about 1 hour ago

blog looks beautiful. I really wish I had this kind of talent for frontend.

MattRix•about 2 hours ago

Good title