dd

The definition description element provides the description, definition, or value associated with a term in a definition list.

Description

The <dd> element (definition description) provides the description, definition, or value for the preceding <dt> element(s) in a <dl> (definition list).

By default, <dd> elements are indented from the left margin to visually distinguish them from their associated terms.

Semantic Meaning

A definition description conveys that:

  • The content is a definition, explanation, or value
  • It is associated with one or more preceding terms (<dt>)
  • It represents the "value" part of a name-value pair
  • Multiple descriptions can be associated with the same term

Screen readers announce the relationship between descriptions and their terms, helping users understand the data structure.

When to Use

  • Definitions for glossary terms
  • Values in metadata displays
  • Answers in FAQ sections
  • Values in key-value pairs
  • Product attribute values
  • Any description associated with a term

When Not to Use

  • Outside of a <dl> element
  • Without a preceding <dt> element
  • For regular list content - use <li>
  • For standalone paragraphs - use <p>

Basic Usage

Accessibility
The practice of making websites usable by as many people as possible, including those with disabilities.
Responsive Design
An approach to web design that makes web pages render well on a variety of devices and window or screen sizes.
<dl> <dt>Accessibility</dt> <dd>The practice of making websites usable by as many people as possible.</dd> <dt>Responsive Design</dt> <dd>An approach to web design that makes web pages render well on various devices.</dd> </dl>

Multiple Descriptions

A term can have multiple <dd> elements, each providing a different definition, meaning, or aspect.

Port
A harbor or haven for ships.
A virtual point where network connections start and end.
A type of fortified wine from Portugal.
To transfer software from one system or environment to another.
<dl> <dt>Port</dt> <dd>A harbor or haven for ships.</dd> <dd>A virtual point where network connections start and end.</dd> <dd>A type of fortified wine from Portugal.</dd> <dd>To transfer software from one system or environment to another.</dd> </dl>

Shared Description

Multiple terms can share the same <dd> description. This is useful for synonyms or alternate names.

RGB
Red Green Blue
A color model in which red, green, and blue light are combined to reproduce a wide array of colors.
CMYK
Cyan Magenta Yellow Key
A subtractive color model used in color printing, referring to the four ink plates used.
<dl> <dt>RGB</dt> <dt>Red Green Blue</dt> <dd>A color model in which red, green, and blue light are combined.</dd> </dl>

Rich Content

Definition descriptions can contain any flow content, including paragraphs, lists, links, and more.

With Paragraphs

Progressive Enhancement

A strategy for web design that emphasizes core webpage content first.

Additional functionality and styling are layered on top for browsers that support them.

With Lists

Key Features
  • Lightweight and fast
  • No dependencies
  • Fully accessible
  • Mobile-first design
<dl> <dt>Key Features</dt> <dd> <ul> <li>Lightweight and fast</li> <li>No dependencies</li> <li>Fully accessible</li> <li>Mobile-first design</li> </ul> </dd> </dl>

With Links and Code

Documentation
See the official documentation for more details. Use npm install to get started.

As Metadata Values

Definition descriptions work well as values in metadata displays.

Status
Active
Last Updated
Contributors
Alice, Bob, Carol
Downloads
50,000
<dl> <dt>Status</dt> <dd><span style="color: green;">Active</span></dd> <dt>Last Updated</dt> <dd><time datetime="2024-01-15">January 15, 2024</time></dd> <dt>Contributors</dt> <dd><a href="#">Alice</a>, <a href="#">Bob</a>, <a href="#">Carol</a></dd> </dl>

FAQ Pattern

Definition lists are excellent for FAQ sections where questions are terms and answers are descriptions.

What is Vanilla Breeze?
Vanilla Breeze is a layered HTML component system that uses native elements as a foundation, enhanced with CSS custom properties and optional JavaScript for interactive components.
Do I need JavaScript to use it?
No. The core styling works with pure HTML and CSS. JavaScript is only required for interactive components like accordions and dialogs.
Is it accessible?
Yes. Vanilla Breeze follows WCAG 2.1 AA guidelines and uses semantic HTML with appropriate ARIA attributes where needed.

Accessibility

Screen Reader Behavior

  • Announced as the description or definition for preceding terms
  • Associated with <dt> elements in the list context
  • Multiple descriptions announced sequentially
  • Rich content within descriptions is fully accessible

Best Practices

  • Write clear, meaningful descriptions
  • Use appropriate semantic elements within descriptions
  • Ensure every <dd> is associated with at least one <dt>
  • Keep descriptions focused and relevant to their terms
  • Use lists or paragraphs within <dd> for complex content

CSS Properties

Property Value Description
margin-inline-start var(--size-l) Left indentation to distinguish from terms

When a <dd> is followed by a <dt> (starting a new term group), the dd + dt selector adds margin-block-start: var(--size-m) to create visual separation between groups.

Content Model

Permitted Content

  • Flow content (paragraphs, lists, figures, etc.)
  • Inline elements (links, code, emphasis, etc.)
  • Text content
  • Nested definition lists
  • Any valid HTML that makes sense in context

Required Parent

Must be a child of <dl>, optionally wrapped in a <div>.

Required Siblings

Must be preceded by one or more <dt> elements (or another <dd> that shares the same <dt>).

Common Patterns

Simple Key-Value

<dl> <dt>Name</dt> <dd>John Smith</dd> </dl>

Term with Multiple Definitions

<dl> <dt>Term</dt> <dd>First definition.</dd> <dd>Second definition.</dd> </dl>

Multiple Terms, Single Definition

<dl> <dt>Term One</dt> <dt>Term Two</dt> <dd>Shared definition for both terms.</dd> </dl>

Rich Description Content

<dl> <dt>Term</dt> <dd> <p>Introduction paragraph.</p> <ul> <li>Detail one</li> <li>Detail two</li> </ul> </dd> </dl>

Related Elements

  • <dl> - Definition list container (required parent)
  • <dt> - Definition term (required sibling)
  • <dl-item> - Custom element for grouping dt/dd pairs
  • <ul> - Can be nested inside <dd> for detailed lists
  • <ol> - Can be nested inside <dd> for sequential details

Patterns Using This Element

The <dd> element is used in these patterns:

Key-Value / Description List

Display key-value pairs in horizontal or stacked layouts