On The <dl>

Summary

Introduction The <dl>, or description list, element is underrated. It’s used to represent a list of name–value pairs. This is a common UI pattern that, at the same time, is incredibly versatile. For instance, you’ve probably seen these layouts out in the wild… Each of these examples shows a list (or lists!) of name–value pairs. You might have also seen lists of name–value pairs to describe lodging amenities, or to list out individual charges in your monthly rent, or in glossaries of technical terms. Each of these is a candidate to be represented with the <dl> element. So what does that look like? The Anatomy of a Description List I’ve been saying “<dl>,” when really, I’m talking about three separate elements: <dl>, <dt>, and <dd>. We start with our <dl>. This is the description list, akin to using a <ul> for an unordered list or an <ol> for an ordered list. Copy code <dl> </dl> Fancy. Next up, we want to add a name–value pair. We’ll use a <dt>, short for description term, for the name, and we’ll use a <dd>, short for description detail, for the value. Copy code <dl> <dt>Title</dt> <dd>Designing with Web Standards</dd> </dl> To add another name–value pair to our list, we add another <dt> and <dd>: Copy code <dl> <dt>Title</dt> <dd>Designing with Web Standards</dd> <dt>Publisher</dt> <dd>New Riders Pub; 3rd edition (October 19, 2009)</dd> </dl> But wait — what if I have a term that has multiple values? For instance, what if this book has multiple authors? That’s fine! One <dt> can have multiple <dd>s: Copy code <dl> <dt>Title</dt> <dd>Designing with Web Standards</dd> <dt>Author</dt> <dd>Jeffrey Zeldman</dd> <dd>Ethan Marcotte</dd> <dt>Publisher</dt> <dd>New Riders Pub; 3rd edition (October 19, 2009)</dd> </dl> There’s one last piece of the description list anatomy to look at for most basic use cases: what if I want to wrap a <dt> and its <dd>(s) for styling reasons? In this case, the specs allow you to wrap a <dt> and its <dd>(s) in a <div>: Copy code <dl> <div> <dt>...