HTML Other Lists / Description Lists

Beyond bullets and numbers, HTML has a third list type built for a very specific job: pairing a term with its definition or description, like a glossary entry or a set of metadata labels next to their values. The description list (<dl>) uses <dt> for each term and <dd> for its corresponding description, giving that term-value relationship real semantic meaning instead of faking it with generic divs.

In this page:

Creating a Basic Description List
One Term with Multiple Descriptions
Multiple Terms Sharing One Description
Using Description Lists for Metadata
Styling Description Lists with CSS

Creating a Basic Description List

<dl> wraps the whole list, <dt> (description term) marks the term being defined, and <dd> (description details) marks its definition -- browsers indent the dd content by default, visually separating the term from its explanation.

Note: Use dl specifically when content is genuinely a term-value pair, like a glossary word and its meaning, not for arbitrary two-column layouts.

Warning: dt and dd must both be direct children of dl; wrapping them in an extra div breaks the description list's semantic structure.

Example: Creating a Basic Description List

markup

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
</dl>

One Term with Multiple Descriptions

A single <dt> can be followed by more than one <dd> element when a term has multiple distinct meanings, synonyms, or values -- each dd is announced as a separate description for that same term rather than needing to repeat the dt.

Note: Use multiple dd elements under one dt for terms with several genuinely distinct meanings, rather than cramming them into one dd separated by commas.

Warning: Multiple dd elements only apply to the single dt immediately preceding them; a new dt resets the term being described.

Example: One Term with Multiple Descriptions

markup

<dl>
  <dt>Bank</dt>
  <dd>A financial institution</dd>
  <dd>The edge of a river</dd>
</dl>

Multiple Terms Sharing One Description

Conversely, more than one <dt> can appear consecutively before a single <dd>, meaning that one description applies equally to all of the preceding terms -- useful when several related terms share the exact same definition.

Note: Group truly synonymous terms under a shared dd rather than duplicating the same description text for each one separately.

Warning: Consecutive dt elements without a dd between them are only valid when they are genuinely meant to share the single following description.

Example: Multiple Terms Sharing One Description

markup

<dl>
  <dt>Big</dt>
  <dt>Large</dt>
  <dd>Of considerable size</dd>
</dl>

Using Description Lists for Metadata

Beyond glossaries, description lists are the semantically correct choice for any label-value pairing, such as displaying a product's metadata (SKU, weight, dimensions) or a person's profile details (name, role, location), where each label clearly corresponds to one specific value.

Note: Reach for dl over a table or a series of divs whenever content is fundamentally a list of labeled values, since it carries more accessible semantic meaning.

Warning: Using dl for content that is not really a label-value relationship, purely to get its default indentation styling, misuses the element's semantics.

Example: Using Description Lists for Metadata

markup

<dl>
  <dt>SKU</dt>
  <dd>A1234</dd>
  <dt>Weight</dt>
  <dd>2kg</dd>
</dl>

Styling Description Lists with CSS

By default, dd is indented from its dt using the browser's default margin, but CSS gives full control to restyle a description list into a two-column grid layout, a compact inline FAQ format, or any other visual arrangement while keeping the underlying term-description semantics intact.

Note: Use CSS Grid on the dl element to align terms and descriptions into a clean two-column layout for larger metadata lists.

Warning: Removing the default margin on dd without adding new spacing can leave terms and their descriptions looking visually cramped together.

Example: Styling Description Lists with CSS

markup

<style>
  dl {
    display: grid;
    grid-template-columns: 100px 1fr;
  }
</style>
<dl>
  <dt>Name</dt>
  <dd>Alex</dd>
</dl>

Common Mistakes

Using a description list purely for visual two-column layout when the content is not actually a term-and-definition relationship.
Forgetting that a single <dt> can be followed by multiple <dd> elements when one term has several separate descriptions or synonyms.
Nesting dt and dd directly under something other than dl, when both must be direct children of a dl element to be valid.

Chapter Summary

<dl> wraps a description list, with <dt> marking each term and <dd> marking its corresponding description.
A single dt can be followed by multiple dd elements when a term has more than one definition or value.
Description lists are the correct semantic choice for glossaries, metadata, FAQs, and key-value pairs -- not a generic layout tool.

Browser Support

<dl>, <dt>, and <dd> have been part of HTML since its earliest versions and are supported in every browser.

🔒

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson HTML Ordered Lists Next Lesson → HTML Block & Inline

HTML Other Lists / Description Lists

Creating a Basic Description List

One Term with Multiple Descriptions

Multiple Terms Sharing One Description

Using Description Lists for Metadata

Styling Description Lists with CSS

Chapter Quiz — Complete all 26 topics to unlock

Login to run this code