HTML Description Lists

A description list is a special kind of list built for term–description pairs, not for plain bullet points or numbered steps. It groups a term (or several terms) with its definition, value, or explanation, using three elements that always work together: <dl> for the list container, <dt> for each term, and <dd> for its description. Browsers give this structure its own default rendering and its own place in the accessibility tree, so assistive technology can announce it as a set of associated name/value pairs rather than a generic list. You’ll reach for a description list any time you’re presenting a glossary, metadata (an article’s author and publish date), a FAQ, or any other content where each item has a "name" on one side and a "value" or explanation on the other.

Overview: How Description Lists Work

A description list has a simple but strict model: a <dl> element wraps one or more groups, and each group is made of one or more <dt> (description term) elements followed by one or more <dd> (description details) elements. Unlike <ul> or <ol>, which only hold <li> children, a <dl> holds two different kinds of children that must alternate in a meaningful way: a term always needs at least one description associated with it, and a description always belongs to the term (or terms) that precede it.

When the browser parses a <dl>, it builds a DOM subtree where the <dl> node has <dt> and <dd> elements as direct children, in source order. Since HTML5.1, the spec also allows you to wrap each term/description group in a <div> so the DOM makes each group explicit — this is useful when you need to style or script individual groups, and it stays valid because the association between a term and its description is still determined by document order, whether or not a wrapping <div> is present.

By default, browsers render a <dl> with top and bottom margin (like a paragraph) and render each <dd> with a left margin, so descriptions appear visually indented under their terms. Terms themselves receive no special font weight or size — a common misconception is that <dt> is bold by default, but that’s not part of any user-agent stylesheet; if you want bold terms, that’s a CSS decision, covered in the CSS course. Semantically, a description list tells assistive technology "this is a set of terms and their associated values," which is different information than a bullet list conveys, so choosing <dl> over <ul> is a meaningful semantic choice, not just a stylistic one.

Syntax

<dl>
  <dt>Term</dt>
  <dd>Description of the term</dd>
</dl>

Element	Purpose
<dl>	The description list container. Holds one or more term/description groups as direct children (optionally wrapped in <div> elements).
<dt>	A term, name, or question being defined. A group can have more than one <dt> in a row when several terms share the same description.
<dd>	The description, definition, or value for the preceding term(s). A single term can have more than one <dd> if it has multiple descriptions.
<div> (optional wrapper)	Since HTML5.1, you may wrap each <dt>/<dd> group in a <div> for styling or scripting hooks, without breaking the term–description association.

Examples

Example 1: A Simple Glossary

<dl>
  <dt>HTML</dt>
  <dd>A markup language used to structure content on the web.</dd>

  <dt>CSS</dt>
  <dd>A stylesheet language used to describe the presentation of HTML.</dd>
</dl>

Result: The browser displays "HTML" on its own line, followed by its indented definition on the next line, then "CSS" on its own line followed by its indented definition. No bullets or numbers appear; the indentation is the only visual cue that a <dd> belongs to the <dt> above it.

This is the most common use of a description list: a glossary where each term maps to exactly one definition. Screen readers announce each pair as a term with its associated description, which is more informative than reading two unrelated list items.

Example 2: Multiple Terms and Multiple Descriptions

<dl>
  <dt>Cat</dt>
  <dt>Kitty</dt>
  <dd>A small domesticated carnivorous mammal.</dd>

  <dt>Coffee</dt>
  <dd>A brewed drink made from roasted coffee beans.</dd>
  <dd>Slang for a break taken at work.</dd>
</dl>

Result: "Cat" and "Kitty" both appear as terms, one after another, sharing the single indented description beneath them. Then "Coffee" appears as a term followed by two separate indented description lines, one per <dd>.

This demonstrates the flexibility of the model: a group can have several synonymous terms sharing one description (like "Cat" and "Kitty"), or one term with several distinct meanings or values (like "Coffee" having two definitions). The DOM simply lists the elements in order; the browser groups them visually by proximity and indentation rules.

Example 3: A Realistic FAQ Section

<dl>
  <div>
    <dt>What payment methods do you accept?</dt>
    <dd>We accept all major credit cards and PayPal.</dd>
  </div>
  <div>
    <dt>How long does shipping take?</dt>
    <dd>Orders ship within 2 business days and arrive in 5–7 days.</dd>
  </div>
</dl>

Result: Two question-and-answer pairs render, each question followed by its indented answer directly beneath it. Visually this looks identical to the earlier examples without the <div> wrappers, because the wrapping elements don’t add any spacing of their own by default.

Wrapping each pair in a <div> is valid under the modern HTML specification and gives each FAQ entry its own DOM node, which is handy if a future script needs to toggle or highlight one question at a time. The term–description relationship is still defined by order within the <dl>, not by the wrapper.

How It Works Step by Step

When the parser reaches the opening <dl> tag, it creates a <dl> DOM node and pushes it onto the open-elements stack. As it encounters each <dt> and <dd> tag, it creates the corresponding element node and appends it as a child of the current open <dl> (or of the currently open wrapping <div>, if one is present). Text content inside each <dt> or <dd> becomes a text node child of that element. When the closing </dl> tag is reached, the browser pops the <dl> off the stack, and the resulting subtree is handed to the rendering engine.

During layout, the rendering engine applies the user-agent stylesheet: the <dl> gets block-level margins, each <dt> is rendered as a block with no extra indentation, and each <dd> is rendered as a block shifted right by a default left margin (commonly around 40 pixels). This is purely presentational and can be overridden entirely with CSS, which is why you’ll sometimes see description lists styled as two-column tables, inline key/value pairs, or accordion-style FAQs on real websites — the semantics stay the same even when the visual layout changes completely.

Common Mistakes

Mistake 1: Using a Description List Just for Indentation

<dl>
  <dt>Welcome to our site! This paragraph is only here to get some free indentation from the dl element's default styling.</dt>
</dl>

This is misusing <dl> as a layout trick rather than to describe a term/description relationship. There’s no real term being defined, and a <dt> with no matching <dd> is meaningless to assistive technology, which will announce a "term" that has no associated description. Fix it by using the right element for the content and controlling spacing with CSS instead:

<p>Welcome to our site! Any indentation should come from CSS, not from borrowing a description list's default styles.</p>

Mistake 2: Mismatched Opening and Closing Tags

<dl>
  <dt>HTML</dd>
  <dd>A markup language for structuring web content.</dt>
</dl>

Here the <dt> is closed with </dd> and the <dd> is closed with </dt>. Browsers and validators expect a closing tag to match its opening tag exactly; swapping them produces invalid, confusing markup that can lead to unpredictable parsing. The fix is simply to close each tag with its own matching closing tag:

<dl>
  <dt>HTML</dt>
  <dd>A markup language for structuring web content.</dd>
</dl>

Best Practices

• Use <dl> only when content is genuinely term/description pairs — glossaries, metadata, FAQs, or key/value data — not as a generic indentation shortcut.
• Keep each <dt> short and scannable; put the fuller explanation in the <dd>.
• Use multiple <dt> elements in a row when several terms genuinely share one description, and multiple <dd> elements when one term truly has more than one description.
• Wrap term/description groups in <div> elements when you need a per-group hook for styling, but don’t rely on the wrapper to establish the term–description relationship — document order still does that.
• Control appearance (bold terms, two-column layouts, spacing) with CSS rather than depending on default browser styling, since defaults vary slightly across browsers.
• Don’t use <dl> for a plain list of unrelated items; that’s what <ul> and <ol> are for.

Practice Exercises

1. Build a description list documenting three HTTP status codes (for example 200, 404, 500) where each code is the term and its meaning is the description.

2. Create a description list for a single term, "Browser," that has two <dd> descriptions: one general definition and one example sentence using the word.

3. Convert a two-column table of "Setting" and "Value" pairs (make up three settings, like "Theme: Dark") into a semantically correct description list.

Summary

• A description list uses <dl> as the container, <dt> for terms, and <dd> for their descriptions.
• A group can include multiple <dt> elements sharing one description, or one <dt> with multiple <dd> elements.
• Since HTML5.1, each term/description group can optionally be wrapped in a <div> without breaking the semantic association.
• Default rendering indents each <dd>; terms are not bold by default, and any visual customization belongs in CSS.
• Use <dl> for real term/description content like glossaries, metadata, and FAQs — not as a layout or indentation shortcut.