Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
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.
When to Use
- Definitions for glossary terms
- Values in metadata displays
- Answers in FAQ sections
- Values in key-value pairs
- Product attribute values
When Not to Use
- Outside of a
<dl>element - Without a preceding
<dt>element - For regular list content — use
<li>
Basic Usage
Basic definition list
<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.
Multiple descriptions for one term
<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.
Multiple terms sharing a description
<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.
Description with nested list
<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>Rich content in description
<dl> <dt>Term</dt> <dd> <p>Introduction paragraph.</p> <ul> <li>Detail one</li> <li>Detail two</li> </ul> </dd></dl>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> - 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), dd + dt adds margin-block-start: var(--size-m) for visual separation.
Content Model
Permitted Content
- Flow content (paragraphs, lists, figures)
- Inline elements (links, code, emphasis)
- Nested definition lists
Required Parent
Must be a child of <dl>, optionally inside a <dl-item>.
Related
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