TIL: divs are valid elements inside of a definition list

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, "Okay Stefan what's the deal?". If you do web development for a few years already (before we had flexbox and grid), you might know that styling of description lists was always a little annoying. The possibility to include div elements makes it way easier to apply row based styles.

That would have saved me so much time. I wish I'd have known that 5 years ago. :D

Edited: Turns out it's not that old. It was added to the WHATWG spec Oct 2016 and made it into HTML 5.2 W3C Recommendation.

If you want to read more about the decision to allow div elements inside of dl this GitHub issue goes into it in massive details.