<dd> - Description Details

The `<dd>` Element

List description HTML 2.0

The <dd> element represents the description, definition, or value for a term defined by a <dt> element in a description list (<dl>). It provides the details or explanation for the associated term.

Quick Example

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

<dt>CSS</dt>
<dd>Cascading Style Sheets - used for styling web pages</dd>
</dl>

Result

Interactive code playground requires JavaScript. Here's the code:

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

<dt>CSS</dt>
<dd>Cascading Style Sheets - used for styling web pages</dd>
</dl>

Syntax

<dl>
  <dt>Term</dt>
  <dd>Description or definition</dd>
</dl>

The <dd> element must be a child of a <dl> element and typically follows a <dt> element.

Attributes

The <dd> element supports all global attributes like id, class, style, and lang.

<dd id="definition-1" class="important-description">
  Description text
</dd>

Common Use Cases

Definitions and Explanations

<h3>Programming Concepts</h3>
<dl>
<dt>Variable</dt>
<dd>A named storage location that holds a value which can change during program execution</dd>

<dt>Function</dt>
<dd>A reusable block of code that performs a specific task and can optionally return a value</dd>

<dt>Array</dt>
<dd>A data structure that stores a collection of elements in a specific order</dd>
</dl>

Result

Interactive code playground requires JavaScript. Here's the code:

<h3>Programming Concepts</h3>
<dl>
<dt>Variable</dt>
<dd>A named storage location that holds a value which can change during program execution</dd>

<dt>Function</dt>
<dd>A reusable block of code that performs a specific task and can optionally return a value</dd>

<dt>Array</dt>
<dd>A data structure that stores a collection of elements in a specific order</dd>
</dl>

Product Details

<h3>Product Information</h3>
<dl>
<dt>Brand</dt>
<dd>TechCorp Industries</dd>

<dt>Model Number</dt>
<dd>TC-X1000-2025</dd>

<dt>Warranty</dt>
<dd>2-year limited warranty covering manufacturing defects</dd>

<dt>Price</dt>
<dd>$299.99 (discounted from $399.99)</dd>
</dl>

Result

Interactive code playground requires JavaScript. Here's the code:

<h3>Product Information</h3>
<dl>
<dt>Brand</dt>
<dd>TechCorp Industries</dd>

<dt>Model Number</dt>
<dd>TC-X1000-2025</dd>

<dt>Warranty</dt>
<dd>2-year limited warranty covering manufacturing defects</dd>

<dt>Price</dt>
<dd>$299.99 (discounted from $399.99)</dd>
</dl>

Configuration Values

<h3>Application Settings</h3>
<dl>
<dt>database_host</dt>
<dd><code>localhost:5432</code></dd>

<dt>max_connections</dt>
<dd><code>100</code></dd>

<dt>cache_enabled</dt>
<dd><code>true</code></dd>

<dt>log_level</dt>
<dd><code>info</code> - Options: debug, info, warn, error</dd>
</dl>

Result

Interactive code playground requires JavaScript. Here's the code:

<h3>Application Settings</h3>
<dl>
<dt>database_host</dt>
<dd><code>localhost:5432</code></dd>

<dt>max_connections</dt>
<dd><code>100</code></dd>

<dt>cache_enabled</dt>
<dd><code>true</code></dd>

<dt>log_level</dt>
<dd><code>info</code> - Options: debug, info, warn, error</dd>
</dl>

Multiple Descriptions per Term

One term can have multiple <dd> elements:

<dl>
<dt>Python</dt>
<dd>A high-level programming language</dd>
<dd>Created by Guido van Rossum in 1991</dd>
<dd>Known for readable syntax and extensive libraries</dd>
<dd>Popular for web development, data science, and automation</dd>
</dl>

Result

Interactive code playground requires JavaScript. Here's the code:

<dl>
<dt>Python</dt>
<dd>A high-level programming language</dd>
<dd>Created by Guido van Rossum in 1991</dd>
<dd>Known for readable syntax and extensive libraries</dd>
<dd>Popular for web development, data science, and automation</dd>
</dl>

Rich Content in Descriptions

Descriptions can contain complex content:

<dl>
<dt>Features</dt>
<dd>
  <ul>
    <li>Fast performance</li>
    <li>Easy to use</li>
    <li>Secure by default</li>
  </ul>
</dd>

<dt>Pricing</dt>
<dd>
  <p><strong>Basic:</strong> $10/month</p>
  <p><strong>Pro:</strong> $25/month</p>
  <p><strong>Enterprise:</strong> Custom pricing</p>
</dd>
</dl>

Result

Interactive code playground requires JavaScript. Here's the code:

<dl>
<dt>Features</dt>
<dd>
  <ul>
    <li>Fast performance</li>
    <li>Easy to use</li>
    <li>Secure by default</li>
  </ul>
</dd>

<dt>Pricing</dt>
<dd>
  <p><strong>Basic:</strong> $10/month</p>
  <p><strong>Pro:</strong> $25/month</p>
  <p><strong>Enterprise:</strong> Custom pricing</p>
</dd>
</dl>

Styling DD Elements

Indented Descriptions

<style>
.indented-dd dt {
  font-weight: 700;
  color: #1f2937;
  margin-top: 1rem;
}
.indented-dd dt:first-of-type {
  margin-top: 0;
}
.indented-dd dd {
  margin-left: 2rem;
  color: #4b5563;
  line-height: 1.6;
}
</style>

<dl class="indented-dd">
<dt>Question</dt>
<dd>What is the difference between HTTP and HTTPS?</dd>

<dt>Answer</dt>
<dd>HTTPS is the secure version of HTTP. It uses SSL/TLS encryption to protect data transmitted between the browser and server.</dd>
</dl>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.indented-dd dt {
  font-weight: 700;
  color: #1f2937;
  margin-top: 1rem;
}
.indented-dd dt:first-of-type {
  margin-top: 0;
}
.indented-dd dd {
  margin-left: 2rem;
  color: #4b5563;
  line-height: 1.6;
}
</style>

<dl class="indented-dd">
<dt>Question</dt>
<dd>What is the difference between HTTP and HTTPS?</dd>

<dt>Answer</dt>
<dd>HTTPS is the secure version of HTTP. It uses SSL/TLS encryption to protect data transmitted between the browser and server.</dd>
</dl>

Styled with Background

<style>
.bg-dd dt {
  font-weight: 600;
  color: #1e40af;
  margin-top: 1rem;
}
.bg-dd dt:first-of-type {
  margin-top: 0;
}
.bg-dd dd {
  margin: 0.5rem 0 0 0;
  padding: 1rem;
  background: #f3f4f6;
  border-left: 4px solid #3b82f6;
  border-radius: 4px;
}
</style>

<dl class="bg-dd">
<dt>Installation</dt>
<dd>Run <code>npm install package-name</code> in your project directory</dd>

<dt>Usage</dt>
<dd>Import the package and use it in your code: <code>import pkg from 'package-name'</code></dd>
</dl>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.bg-dd dt {
  font-weight: 600;
  color: #1e40af;
  margin-top: 1rem;
}
.bg-dd dt:first-of-type {
  margin-top: 0;
}
.bg-dd dd {
  margin: 0.5rem 0 0 0;
  padding: 1rem;
  background: #f3f4f6;
  border-left: 4px solid #3b82f6;
  border-radius: 4px;
}
</style>

<dl class="bg-dd">
<dt>Installation</dt>
<dd>Run <code>npm install package-name</code> in your project directory</dd>

<dt>Usage</dt>
<dd>Import the package and use it in your code: <code>import pkg from 'package-name'</code></dd>
</dl>

Minimal Styling

<style>
.minimal-dd {
  line-height: 1.8;
}
.minimal-dd dt {
  font-weight: 600;
  color: #374151;
}
.minimal-dd dd {
  margin: 0 0 0.5rem 0;
  color: #6b7280;
}
</style>

<dl class="minimal-dd">
<dt>Name:</dt>
<dd>John Doe</dd>

<dt>Email:</dt>
<dd>john@example.com</dd>

<dt>Role:</dt>
<dd>Software Developer</dd>
</dl>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.minimal-dd {
  line-height: 1.8;
}
.minimal-dd dt {
  font-weight: 600;
  color: #374151;
}
.minimal-dd dd {
  margin: 0 0 0.5rem 0;
  color: #6b7280;
}
</style>

<dl class="minimal-dd">
<dt>Name:</dt>
<dd>John Doe</dd>

<dt>Email:</dt>
<dd>john@example.com</dd>

<dt>Role:</dt>
<dd>Software Developer</dd>
</dl>

Card-Style Descriptions

<style>
.card-dd dt {
  font-weight: 700;
  color: #1f2937;
  margin: 1.5rem 0 0.5rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #e5e7eb;
}
.card-dd dt:first-of-type {
  margin-top: 0;
}
.card-dd dd {
  margin: 0;
  padding: 1rem;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
</style>

<dl class="card-dd">
<dt>Overview</dt>
<dd>This tool helps you build modern web applications quickly and efficiently.</dd>

<dt>Benefits</dt>
<dd>Save time, reduce errors, and maintain consistency across your projects.</dd>
</dl>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.card-dd dt {
  font-weight: 700;
  color: #1f2937;
  margin: 1.5rem 0 0.5rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #e5e7eb;
}
.card-dd dt:first-of-type {
  margin-top: 0;
}
.card-dd dd {
  margin: 0;
  padding: 1rem;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
</style>

<dl class="card-dd">
<dt>Overview</dt>
<dd>This tool helps you build modern web applications quickly and efficiently.</dd>

<dt>Benefits</dt>
<dd>Save time, reduce errors, and maintain consistency across your projects.</dd>
</dl>

Accessibility

Screen readers announce descriptions in context with their terms:

<!-- Screen reader: "Description list. Term: API. Description: Application Programming Interface" -->
<dl>
  <dt>API</dt>
  <dd>Application Programming Interface</dd>
</dl>

Clear and Complete Descriptions

Provide thorough, understandable descriptions:

Good
Too Brief

<dl>
  <dt>Cache Duration</dt>
  <dd>The amount of time (in seconds) that cached data remains valid before being refreshed. Default: 3600 (1 hour)</dd>
</dl>

<dl>
  <dt>Cache Duration</dt>
  <dd>3600</dd>
</dl>

Logical Order

Keep terms and descriptions in logical order:

<dl>
<dt>Step 1: Install</dt>
<dd>Download and install the software from our website</dd>

<dt>Step 2: Configure</dt>
<dd>Edit the configuration file with your settings</dd>

<dt>Step 3: Launch</dt>
<dd>Start the application and begin using it</dd>
</dl>

Result

Interactive code playground requires JavaScript. Here's the code:

<dl>
<dt>Step 1: Install</dt>
<dd>Download and install the software from our website</dd>

<dt>Step 2: Configure</dt>
<dd>Edit the configuration file with your settings</dd>

<dt>Step 3: Launch</dt>
<dd>Start the application and begin using it</dd>
</dl>

Best Practices

<dt>Return Policy</dt>
<dd>Items can be returned within 30 days of purchase for a full refund. Items must be unused and in original packaging.</dd>

<dt>Return Policy</dt>
<dd>Yes</dd>

Don’t Use for Layout

Correct Use
Wrong Use

<dl>
  <dt>Username</dt>
  <dd>john_doe</dd>
</dl>

<dl>
  <dd>Left column content</dd>
  <dd>Right column content</dd>
</dl>

Avoid Empty Descriptions

Good
Avoid

<dt>Status</dt>
<dd>Active since January 2024</dd>

<dt>Status</dt>
<dd></dd>

Advanced Examples

With Code Examples

<dl>
<dt>GET /api/users</dt>
<dd>
  <p>Retrieves a list of all users</p>
  <pre style="background: #1e293b; color: #e2e8f0; padding: 1rem; border-radius: 4px;"><code>fetch('/api/users')
.then(res => res.json())
.then(data => console.log(data));</code></pre>
</dd>

<dt>POST /api/users</dt>
<dd>
  <p>Creates a new user</p>
  <pre style="background: #1e293b; color: #e2e8f0; padding: 1rem; border-radius: 4px;"><code>fetch('/api/users', {
method: 'POST',
body: JSON.stringify({ name: 'John' })
});</code></pre>
</dd>
</dl>

Result

Interactive code playground requires JavaScript. Here's the code:

<dl>
<dt>GET /api/users</dt>
<dd>
  <p>Retrieves a list of all users</p>
  <pre style="background: #1e293b; color: #e2e8f0; padding: 1rem; border-radius: 4px;"><code>fetch('/api/users')
.then(res => res.json())
.then(data => console.log(data));</code></pre>
</dd>

<dt>POST /api/users</dt>
<dd>
  <p>Creates a new user</p>
  <pre style="background: #1e293b; color: #e2e8f0; padding: 1rem; border-radius: 4px;"><code>fetch('/api/users', {
method: 'POST',
body: JSON.stringify({ name: 'John' })
});</code></pre>
</dd>
</dl>

With Lists

<dl>
<dt>Supported Platforms</dt>
<dd>
  <ul style="margin: 0;">
    <li>Windows 10/11</li>
    <li>macOS 11+</li>
    <li>Ubuntu 20.04+</li>
  </ul>
</dd>

<dt>System Requirements</dt>
<dd>
  <ul style="margin: 0;">
    <li>4GB RAM minimum</li>
    <li>2GB free disk space</li>
    <li>Internet connection</li>
  </ul>
</dd>
</dl>

Result

Interactive code playground requires JavaScript. Here's the code:

<dl>
<dt>Supported Platforms</dt>
<dd>
  <ul style="margin: 0;">
    <li>Windows 10/11</li>
    <li>macOS 11+</li>
    <li>Ubuntu 20.04+</li>
  </ul>
</dd>

<dt>System Requirements</dt>
<dd>
  <ul style="margin: 0;">
    <li>4GB RAM minimum</li>
    <li>2GB free disk space</li>
    <li>Internet connection</li>
  </ul>
</dd>
</dl>

With Links and Formatting

<dl>
<dt>Documentation</dt>
<dd>
  Read our <a href="#">complete guide</a> or browse the
  <a href="#">API reference</a> for detailed information.
</dd>

<dt>Support</dt>
<dd>
  <strong>Email:</strong> support@example.com<br>
  <strong>Phone:</strong> (555) 123-4567<br>
  <strong>Hours:</strong> Mon-Fri 9am-5pm EST
</dd>
</dl>

Result

Interactive code playground requires JavaScript. Here's the code:

<dl>
<dt>Documentation</dt>
<dd>
  Read our <a href="#">complete guide</a> or browse the
  <a href="#">API reference</a> for detailed information.
</dd>

<dt>Support</dt>
<dd>
  <strong>Email:</strong> support@example.com<br>
  <strong>Phone:</strong> (555) 123-4567<br>
  <strong>Hours:</strong> Mon-Fri 9am-5pm EST
</dd>
</dl>

Browser Support

Browser	Version	Notes
Chrome	1+	Full support
Firefox	1+	Full support
Safari	1+	Full support
Edge	12+	Full support
IE	3+	Full support

The <dd> element has been supported since early HTML versions.

Description list container. Learn more →

Term or name in a description list. Learn more →

Indicates the term being defined. Learn more →

Paragraph element for text content. Learn more →

<dd> - Description Details

The <dd> Element

Quick Example

Syntax

Attributes

Common Use Cases

Definitions and Explanations

Product Details

Configuration Values

Multiple Descriptions per Term

Rich Content in Descriptions

Styling DD Elements

Indented Descriptions

Styled with Background

Minimal Styling

Card-Style Descriptions

Accessibility

Screen Reader Behavior

Clear and Complete Descriptions

Logical Order

Best Practices

Meaningful Content

Don’t Use for Layout

Avoid Empty Descriptions

Advanced Examples

With Code Examples

With Lists

With Links and Formatting

Browser Support

Related Elements

Specifications

The `<dd>` Element