divs are valid elements inside of a description list

Written by Stefan Judis
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. 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.

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

Related Topics

Related Articles

About the author

Stefan standing in the park in front of a green background

Frontend nerd with over ten years of experience, "Today I Learned" blogger, conference speaker, Tiny helpers maintainer, and DevRel at Checkly.