This post is part of my Today I learned series in which I share all my learnings regarding web development.
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
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.