divs are valid elements inside of a description list
- Published at
- Updated at
- Reading time
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:
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.
If you want to read more about the decision to allow
div elements inside
dl, this GitHub issue goes into it in massive detail.