Description lists: dl, dt, and dd

What it is

A description list associates names with values. Each group holds one or more dt elements (the term) followed by one or more dd elements (its description):

<dl>
  <dt>Canonical URL</dt>
  <dd>The address you nominate as the authoritative version of a page.</dd>

  <dt>Viewport</dt>
  <dd>The visible area a browser gives a page to render into.</dd>
</dl>

Glossaries are the obvious case. The same shape fits metadata panels (author, published date, reading time), product specification tables that are really name–value pairs, and question-and-answer content where each question has one answer.

Choosing between the three lists

ul says these items belong together and order is not meaningful. ol says order carries meaning. dl says each item is a pair: a name and the thing it names. If you find yourself writing a ul where every item is "term: its meaning", the colon is the markup asking to be a dl.

The reverse misuse also happens: a dl used purely because its default indentation looked right. Layout is CSS's job; the element choice should survive the styling being deleted.

Native behavior and structure rules

Browsers indent dd by default and nothing more; there is no built-in interactivity. The content model allows several patterns: a single dt with multiple dd descriptions (a word with more than one definition), multiple dt elements sharing a single dd (synonyms), and, when a group needs a styling wrapper, div elements directly inside dl wrapping each dt/dd group. That last allowance exists specifically so layout hooks do not require breaking the pairing.

dt cannot contain heading elements, and only dt and dd (or the wrapping div) may be direct children of dl. Stray paragraphs directly inside a dl are invalid and parse unpredictably.

Accessibility

Screen readers generally announce description lists as lists and keep terms associated with their descriptions, though the announcement detail varies between screen readers more than it does for ul and ol. The association is still worth having: a sighted reader infers the pairing from proximity, and the markup gives everyone else the same inference. Do not rely on the default indentation to convey the pairing visually after restyling; keep terms and descriptions visibly related in your own CSS too.

Common failures

• A ul of "term: definition" items, discarding the pairing the content already has.
• A dl chosen for its indentation rather than its meaning.
• Direct children of dl that are neither dt, dd, nor a wrapping div.
• Headings placed inside dt and rejected by validation.
• Pairs broken during a redesign so terms visually drift from their descriptions.

Verify it

Delete the CSS and read the list: every term should sit immediately before its description and the pairing should survive with no styling at all. Then run the page through a validator, which catches illegal children of dl reliably.