Artboard 16light, inspiration, solution, idea, innovation,ionicons-v5_logosGoogle Sheets iconSwift icon
Published at
Updated at
Reading time
2min
This post is part of my Today I learned series in which I share all my web development learnings.

I'm a big believer in semantic markup, and that's why I use description lists whenever it makes sense. Today I was reading the spec of the dl element and discovered something that I wished I knew years ago.

The surprising example in the spec I discovered looks as follows:

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

Was this TIL post helpful?
Yes? Cool! You might want to check out Web Weekly for more quick learnings. The last edition went out 14 days ago.

Related Topics

Related Articles