Description Lists
A glossary pairs words with meanings. A product page pairs "Weight" with "1.3 kg". An FAQ pairs questions with answers. All of these are lists of pairs, and HTML has a list built exactly for that shape.
The rule
dl holds pairs: dt names it, dd describes it.
A description list has three elements:
<dl>wraps the whole list.<dt>holds a term: the name, label or question.<dd>holds the description: the definition, value or answer. It follows itsdt.
<dl>
<dt>Monsoon</dt>
<dd>A seasonal wind that brings heavy rain to South Asia from about June to September.</dd>
<dt>Retreating monsoon</dt>
<dd>The period when the rain-bearing winds withdraw, usually October and November.</dd>
</dl>You will often see it called a "definition list", its older name. The modern HTML standard calls it a description list because it is not only for definitions. Anything shaped like name → value fits:
<dl>
<dt>Processor</dt> <dd>8-core, 3.2 GHz</dd>
<dt>Memory</dt> <dd>16 GB</dd>
<dt>Weight</dt> <dd>1.3 kg</dd>
</dl>Pairs do not have to be one to one. One term can have several descriptions (a word with two meanings), and several terms can share one description (two spellings of the same word). Just keep each group's dt elements first, followed by its dd elements.
Browsers indent dd by default. As always, that is only styling; CSS can show the pairs side by side, in a table-like grid or as cards.
The shortcut
Look for a colon in your head. If each entry reads naturally as "something: its explanation", it is a description list.
Read the content as pairs
Date: 14 March. Venue: Town Hall. Entry: Free.
The trap is a ul full of items like "Venue: Town Hall". It displays fine, but the pairing exists only in the text, not in the structure.
A dd is not limited to a short phrase. It can hold paragraphs, links, images or even another list, so a glossary entry can have a full explanation with an example. A dt, on the other hand, should stay short: it is the label people scan for.
Drills
Answer fast — trust the rule.
In a description list, which element holds the term being described?
Which content suits a dl best?
A word has two meanings. How can a dl express it?
Which is correctly structured?
Remember
dlwraps pairs;dtis the term,ddis its description.- Shortcut: if each entry reads as "name: explanation", use a
dl. - Trap: a
ulfull of "Label: value" text, which hides the pairing from the structure.