divs are valid elements inside of a description list
- Published at
- Updated at
- Reading time
- 2min
I'm a big believer in semantic markup, and that's why I use description lists whenever it makes sense. After reading the dl spec I discovered something I wished I knew years ago.
Here's an example from the spec:
<dl>
<div>
<dt> Last modified time </dt>
<dd> 2004-12-23T23:33Z </dd>
</div>
<div>
<dt> Recommended update interval </dt>
<dd> 60s </dd>
</div>
<div>
<dt> Authors </dt>
<dt> Editors </dt>
<dd> Robert Rothman </dd>
<dd> Daniel Jackson </dd>
</div>
</dl>
div elements are allowed inside of dl elements? What?
The spec defines it as follows:
In order to annotate groups with microdata attributes, or other global attributes that apply to whole groups, or just for styling purposes, each group in a dl element can be wrapped in a div element. This does not change the semantics of the dl element.
You might now say "Stefan, what's the deal?". If you've been doing web development for a while (before we had flexbox and grid), you might know that styling of description lists was always annoying. Including div elements makes it way easier to apply row-based styles.
It turns out that div elements weren't always valid in description lists. The WHATWG spec was edited in October 2016, leading to the HTML 5.2 W3C Recommendation change.
If you want to read more about the decision to allow div elements inside dl, this GitHub issue goes into it in massive detail.
Join 5.4k readers and learn something new every week with Web Weekly.
Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.