On the | Ben Myers

Links

Settings

Theme<br>Light<br>Dark<br>System

Animations<br>On<br>Off<br>System

Scrolling<br>Smooth<br>Instant

Skip to Content

Introduction

The , 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…

@import url(https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap);:root{color-scheme:light;font-family:Lato,Tahoma,Arial,sans-serif;background-color:none transparent;background-color:#ffe56a;padding-block:3rem;padding-inline:1rem}body>div{outline:2px solid transparent;background-color:#f5f5f5;padding:1rem 2rem;box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04);min-width:40ch;max-width:50ch;margin-inline:auto}#h-product-details{font-size:1.25rem;font-weight:400;margin-block-end:10px}dl{font-family:Lato,Tahoma,Arial,sans-serif;font-size:1rem;line-height:2;margin-inline-start:1rem}dd,dt{display:inline}dt,dt::after{font-weight:700}dt:after{content:': '}dd{margin-inline-start:0}@media only screen and (max-width:445px){body>div{font-size:.75rem}}:root{-webkit-text-size-adjust:100%}Product detailsPublisherNew Riders Pub; 3rd edition (October 19, 2009)LanguageEnglishPaperback411 pagesISBN-100321616952ISBN-13978-0321616951Item Weight1.72 poundsDimensions7 &times; 0.75 &times; 9 inches" allowtransparency="true" class="iframe-demo" frameborder="0" onload="resizeIframe(this)" scrolling="auto" width="100%">

:root{background-color:#ff6a5b;padding:3rem;font-family:system-ui,sans-serif}body>div{outline:2px solid transparent;background-color:#f5f5f5;box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04);padding:25px 50px}.avatar{border-radius:50%;width:5em;margin:auto;display:block}p#h-contact-card{font-weight:900;font-size:2rem;text-align:center;margin-top:20px}dl{margin-top:20px}dl>div:not(:last-child){border-bottom:1px solid #d3d3d3;padding-bottom:10px;margin-bottom:10px}dt{color:#036be2}dd p{margin-block:3px}:root{-webkit-text-size-adjust:100%}Ben Myersmobile(555) 555-5555emailben@example.comaddress42 Wallaby WaySydney, NSWAustralia" allowtransparency="true" class="iframe-demo" frameborder="0" onload="resizeIframe(this)" scrolling="auto" width="100%">

:root{padding-block:3rem;padding-inline:1rem;background-color:#ffe56a}div.wiki-infobox{outline:2px solid transparent;font-family:sans-serif;max-width:22em;margin:auto;background-color:#f8f9fa;color:#000;padding:.5em;line-height:1.5em;box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04)}div>*+*{margin-top:.8em}.wiki-heading{background:#ccf;padding:.25em 1em;font-size:110%;font-weight:700;text-align:center}dl.wikipedia>div{display:grid;grid-template-columns:1fr 1fr;margin-top:.5em}dt{font-weight:700;grid-column:1}dd{grid-column:2;margin-block-start:0}p#h-wikipedia{font-size:125%;margin-block-start:0}:root{-webkit-text-size-adjust:100%}SharknadoGenreDark comedyWritten byThunder LevinDirected byAnthony C. FerranteStarringTara ReidIan ZieringJohn HeardCassie ScerboTheme music composerRamin KoushaCountry of originUnited StatesOriginal languageEnglishProductionProducerDavid Michael LattCinematographyBen DemareeEditorWilliam BoodellRunning time85 minutesProduction companySyfy FilmsDistributorThe AsylumBudget$2 million" allowtransparency="true" class="iframe-demo" frameborder="0" onload="resizeIframe(this)" scrolling="auto" width="100%">

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 element.

So what does that look like?

The Anatomy of a Description List

I’ve been saying “,” when really, I’m talking about three separate elements: , , and .

We start with our . This is the description list,[note 1] akin to using a for an unordered list or an for an ordered list.

Copy code<br>dl>

dl>

Fancy.

Next up, we want to add a name–value pair. We’ll use a , short for description term, for the name, and we’ll use a , short for description detail, for the value.[note 2]

Copy code<br>dl><br>dt>Titledt><br>dd>Designing with Web Standardsdd><br>dl>

To add another name–value pair to our list, we add another and :

Copy code<br>dl><br>dt>Titledt><br>dd>Designing with Web Standardsdd><br>dt>Publisherdt><br>dd>New Riders Pub; 3rd edition (October 19, 2009)dd><br>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 can have multiple s:

Copy code<br>dl><br>dt>Titledt><br>dd>Designing with Web Standardsdd><br>dt>Authordt><br>dd>Jeffrey Zeldmandd><br>dd>Ethan Marcottedd><br>dt>Publisherdt><br>dd>New Riders Pub; 3rd edition (October 19, 2009)dd><br>dl>

There’s one last piece of the description list anatomy to look at for most basic use cases: what if...