You might think of the <dl> element as the definition list element, but as of HTML5 it’s actually called a “Description List”. Apparently it’s good for more than just definitions!

But the real HTML buddies here are <dt> (Description Term) and <dd> (Description Details). They can be very satisfying HTML elements to use, as so few HTML elements have such a strong semantic pairing.

Your challenge this week: get crafty with these little typographic buddies!

How To participate

Create a Pen and tag it codepenchallenge and cpc-dt-dd. We’ll be watching and sharing the best stuff on our blog, Twitter, and Instagram (Use the #CodePenChallenge tag on Twitter and Instagram as well).

Thanks to Our Sponsor

The HTML Buddies challenge is sponsored by An Event Apart!

Learn from the best: An Event Apart’s speakers aren’t merely industry leaders with years of experience and deep insight. They’re also engaging, inspiring thinkers who are passionate about sharing what they’ve learned and helping you level up your skills.


  • You could make an FAQ list for any subject and make the questions the dt’s and the answers the dl’s. Sadly you get no fancy styling or functionality with these elements… can you give them some?
  • Go old school and actually use it as a definition list, like a list of insects that start with D and their habitats.
  • Since you’re defining things, these elements seem like a natural fit for documentation.


  • MDN docs: dt and dd
  • Blog posts on CSS-Tricks and HTML5 Doctor
  • There are some design patterns that are a natural fit for this pairing, like accordions, and designed documents that could really use them, like resumes.