Description Lists (<dl>, <dt>, <dd>) — HTML

Description Lists

A description list pairs terms with their descriptions—a glossary entry, a metadata field, or an FAQ. It uses three elements: <dl> (the wrapping list), <dt> (a term), and <dd> (its description).

Basic Syntax

dl-basic.html

HTML

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language — the standard markup language for web pages.</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets — the language used to style HTML documents.</dd>
</dl>

Browsers indent each <dd> under its <dt> by default, visually grouping the term and its explanation.

Use Case: Glossaries

glossary.html

HTML

<dl>
  <dt>API</dt>
  <dd>Application Programming Interface — a contract that lets software components communicate.</dd>

  <dt>DOM</dt>
  <dd>Document Object Model — the browser's in-memory tree representation of a page.</dd>
</dl>

Use Case: Metadata

<dl> also works well for key-value metadata such as product specifications, author information, or document properties.

metadata.html

HTML

<dl>
  <dt>Author</dt>
  <dd>Ada Lovelace</dd>

  <dt>Published</dt>
  <dd>March 2026</dd>

  <dt>Format</dt>
  <dd>PDF, 24 pages</dd>
</dl>

Use Case: FAQs

faq.html

HTML

<dl>
  <dt>Do you offer refunds?</dt>
  <dd>Yes, within 30 days of purchase, no questions asked.</dd>

  <dt>Is there a free trial?</dt>
  <dd>Yes, a 14-day trial is available on all plans.</dd>
</dl>

FAQ pages and SEO

Search engines sometimes understand FAQ pages built with <dl>, although structured data (JSON-LD) is a more reliable way to qualify for FAQ rich results. <dl> is still the correct semantic HTML element for visible FAQ content.

Multiple <dd> per <dt>

A single term can have multiple descriptions. This is useful when a word has several meanings or when a field contains multiple values.

multiple-dd.html

HTML

<dl>
  <dt>Bank</dt>
  <dd>A financial institution that accepts deposits and offers loans.</dd>
  <dd>The land alongside a river or lake.</dd>
</dl>

Multiple <dt> per <dd>

The reverse is also valid—multiple terms can share the same description, such as synonyms or aliases.

multiple-dt.html

HTML

<dl>
  <dt>Front-end developer</dt>
  <dt>Client-side developer</dt>
  <dd>An engineer who builds the parts of an application that run in the user's browser.</dd>
</dl>

Quick Reference

Element	Role
<dl>	Wraps the entire description list
<dt>	A term (or name) being described
<dd>	The description (or value) for the preceding term(s)

Use <dl> for glossaries, metadata, and FAQ content.
A <dt> may have multiple <dd> elements, and multiple <dt> elements may share one <dd>.
Do not use <dl> purely for visual two-column layouts.

Not for arbitrary key-value UI

If you simply need a two-column layout without a real term/description relationship, use CSS Grid or Flexbox with <div> elements instead of repurposing <dl>.