<dl> - Description List

The `<dl>` Element

Block-level HTML 2.0

The <dl> element represents a description list containing groups of terms (<dt>) and their descriptions (<dd>). It’s perfect for glossaries, metadata, key-value pairs, and any content that pairs terms with definitions.

Quick Example

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

<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>

<dt>JavaScript</dt>
<dd>Programming language for web interactivity</dd>
</dl>

Result

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

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

<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>

<dt>JavaScript</dt>
<dd>Programming language for web interactivity</dd>
</dl>

Syntax

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

  <dt>Another term</dt>
  <dd>Another description</dd>
</dl>

The <dl> element contains alternating <dt> (term) and <dd> (description) elements.

Attributes

The <dl> element supports all global attributes like id, class, style, and role.

<dl id="glossary" class="definition-list">
  <!-- Terms and definitions -->
</dl>

Common Use Cases

Glossary

<h3>Web Development Glossary</h3>
<dl>
<dt>API</dt>
<dd>Application Programming Interface - a set of rules for building software applications</dd>

<dt>CDN</dt>
<dd>Content Delivery Network - a distributed network of servers that deliver web content</dd>

<dt>SEO</dt>
<dd>Search Engine Optimization - improving website visibility in search engines</dd>
</dl>

Result

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

<h3>Web Development Glossary</h3>
<dl>
<dt>API</dt>
<dd>Application Programming Interface - a set of rules for building software applications</dd>

<dt>CDN</dt>
<dd>Content Delivery Network - a distributed network of servers that deliver web content</dd>

<dt>SEO</dt>
<dd>Search Engine Optimization - improving website visibility in search engines</dd>
</dl>

Product Specifications

<h3>Product Details</h3>
<dl>
<dt>Model</dt>
<dd>XPS-2000</dd>

<dt>Dimensions</dt>
<dd>15" × 10" × 2"</dd>

<dt>Weight</dt>
<dd>3.2 lbs</dd>

<dt>Battery Life</dt>
<dd>Up to 12 hours</dd>

<dt>Warranty</dt>
<dd>2 years limited warranty</dd>
</dl>

Result

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

<h3>Product Details</h3>
<dl>
<dt>Model</dt>
<dd>XPS-2000</dd>

<dt>Dimensions</dt>
<dd>15" × 10" × 2"</dd>

<dt>Weight</dt>
<dd>3.2 lbs</dd>

<dt>Battery Life</dt>
<dd>Up to 12 hours</dd>

<dt>Warranty</dt>
<dd>2 years limited warranty</dd>
</dl>

Metadata

<article>
<h2>Article Title</h2>

<dl>
  <dt>Author</dt>
  <dd>Jane Smith</dd>

  <dt>Published</dt>
  <dd>December 11, 2025</dd>

  <dt>Category</dt>
  <dd>Web Development</dd>

  <dt>Reading Time</dt>
  <dd>8 minutes</dd>
</dl>

<p>Article content...</p>
</article>

Result

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

<article>
<h2>Article Title</h2>

<dl>
  <dt>Author</dt>
  <dd>Jane Smith</dd>

  <dt>Published</dt>
  <dd>December 11, 2025</dd>

  <dt>Category</dt>
  <dd>Web Development</dd>

  <dt>Reading Time</dt>
  <dd>8 minutes</dd>
</dl>

<p>Article content...</p>
</article>

Configuration Settings

<h3>Server Configuration</h3>
<dl>
<dt>hostname</dt>
<dd>example.com</dd>

<dt>port</dt>
<dd>8080</dd>

<dt>protocol</dt>
<dd>https</dd>

<dt>timeout</dt>
<dd>30 seconds</dd>
</dl>

Result

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

<h3>Server Configuration</h3>
<dl>
<dt>hostname</dt>
<dd>example.com</dd>

<dt>port</dt>
<dd>8080</dd>

<dt>protocol</dt>
<dd>https</dd>

<dt>timeout</dt>
<dd>30 seconds</dd>
</dl>

Multiple Descriptions

A single term can have multiple descriptions:

<dl>
<dt>HTTP</dt>
<dd>HyperText Transfer Protocol</dd>
<dd>A protocol for transferring web pages</dd>
<dd>Operates on port 80 by default</dd>

<dt>HTTPS</dt>
<dd>HyperText Transfer Protocol Secure</dd>
<dd>Encrypted version of HTTP</dd>
<dd>Operates on port 443 by default</dd>
</dl>

Result

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

<dl>
<dt>HTTP</dt>
<dd>HyperText Transfer Protocol</dd>
<dd>A protocol for transferring web pages</dd>
<dd>Operates on port 80 by default</dd>

<dt>HTTPS</dt>
<dd>HyperText Transfer Protocol Secure</dd>
<dd>Encrypted version of HTTP</dd>
<dd>Operates on port 443 by default</dd>
</dl>

Multiple Terms

Multiple terms can share one description:

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

<dt>CSS</dt>
<dt>Cascading Style Sheets</dt>
<dd>A stylesheet language for describing web page presentation</dd>
</dl>

Result

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

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

<dt>CSS</dt>
<dt>Cascading Style Sheets</dt>
<dd>A stylesheet language for describing web page presentation</dd>
</dl>

Styling Description Lists

Basic Styling

<style>
.styled-dl dt {
  font-weight: bold;
  color: #1f2937;
  margin-top: 1rem;
}
.styled-dl dd {
  margin-left: 2rem;
  color: #6b7280;
}
</style>

<dl class="styled-dl">
<dt>Frontend</dt>
<dd>Client-side development with HTML, CSS, and JavaScript</dd>

<dt>Backend</dt>
<dd>Server-side development with databases and APIs</dd>

<dt>Full-Stack</dt>
<dd>Both frontend and backend development</dd>
</dl>

Result

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

<style>
.styled-dl dt {
  font-weight: bold;
  color: #1f2937;
  margin-top: 1rem;
}
.styled-dl dd {
  margin-left: 2rem;
  color: #6b7280;
}
</style>

<dl class="styled-dl">
<dt>Frontend</dt>
<dd>Client-side development with HTML, CSS, and JavaScript</dd>

<dt>Backend</dt>
<dd>Server-side development with databases and APIs</dd>

<dt>Full-Stack</dt>
<dd>Both frontend and backend development</dd>
</dl>

Two-Column Layout

<style>
.two-column {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 1.5rem;
  max-width: 600px;
}
.two-column dt {
  font-weight: 600;
  color: #374151;
}
.two-column dd {
  margin: 0;
  color: #6b7280;
}
</style>

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

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

<dt>Phone:</dt>
<dd>(555) 123-4567</dd>

<dt>Location:</dt>
<dd>San Francisco, CA</dd>
</dl>

Result

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

<style>
.two-column {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 1.5rem;
  max-width: 600px;
}
.two-column dt {
  font-weight: 600;
  color: #374151;
}
.two-column dd {
  margin: 0;
  color: #6b7280;
}
</style>

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

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

<dt>Phone:</dt>
<dd>(555) 123-4567</dd>

<dt>Location:</dt>
<dd>San Francisco, CA</dd>
</dl>

Card Style

<style>
.card-dl {
  background: #f9fafb;
  border-radius: 8px;
  padding: 1.5rem;
}
.card-dl dt {
  font-weight: 700;
  color: #1f2937;
  margin-top: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #e5e7eb;
}
.card-dl dt:first-of-type {
  margin-top: 0;
}
.card-dl dd {
  margin: 0.75rem 0 0 0;
  color: #4b5563;
  line-height: 1.6;
}
</style>

<dl class="card-dl">
<dt>Question</dt>
<dd>What is HTML?</dd>

<dt>Answer</dt>
<dd>HTML is the standard markup language for creating web pages. It describes the structure of web content using elements and tags.</dd>
</dl>

Result

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

<style>
.card-dl {
  background: #f9fafb;
  border-radius: 8px;
  padding: 1.5rem;
}
.card-dl dt {
  font-weight: 700;
  color: #1f2937;
  margin-top: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #e5e7eb;
}
.card-dl dt:first-of-type {
  margin-top: 0;
}
.card-dl dd {
  margin: 0.75rem 0 0 0;
  color: #4b5563;
  line-height: 1.6;
}
</style>

<dl class="card-dl">
<dt>Question</dt>
<dd>What is HTML?</dd>

<dt>Answer</dt>
<dd>HTML is the standard markup language for creating web pages. It describes the structure of web content using elements and tags.</dd>
</dl>

Horizontal List

<style>
.horizontal-dl {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
}
.horizontal-dl dt {
  font-weight: 600;
  color: #374151;
}
.horizontal-dl dt::after {
  content: ":";
}
.horizontal-dl dd {
  margin: 0;
  color: #6b7280;
}
</style>

<dl class="horizontal-dl">
<dt>Status</dt>
<dd>Active</dd>

<dt>Version</dt>
<dd>2.4.1</dd>

<dt>Updated</dt>
<dd>Dec 11, 2025</dd>
</dl>

Result

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

<style>
.horizontal-dl {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
}
.horizontal-dl dt {
  font-weight: 600;
  color: #374151;
}
.horizontal-dl dt::after {
  content: ":";
}
.horizontal-dl dd {
  margin: 0;
  color: #6b7280;
}
</style>

<dl class="horizontal-dl">
<dt>Status</dt>
<dd>Active</dd>

<dt>Version</dt>
<dd>2.4.1</dd>

<dt>Updated</dt>
<dd>Dec 11, 2025</dd>
</dl>

Colored Terms

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

<dl class="colored-dl">
<dt>Installation</dt>
<dd>Download and run the installer from our website</dd>

<dt>Configuration</dt>
<dd>Edit the config file with your preferences</dd>

<dt>Usage</dt>
<dd>Launch the application and follow the wizard</dd>
</dl>

Result

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

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

<dl class="colored-dl">
<dt>Installation</dt>
<dd>Download and run the installer from our website</dd>

<dt>Configuration</dt>
<dd>Edit the config file with your preferences</dd>

<dt>Usage</dt>
<dd>Launch the application and follow the wizard</dd>
</dl>

Semantic Grouping

Group related terms with <div>:

<style>
.grouped-dl > div {
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: #f9fafb;
  border-radius: 8px;
}
.grouped-dl dt {
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 0.5rem;
}
.grouped-dl dd {
  margin: 0;
  color: #6b7280;
}
</style>

<dl class="grouped-dl">
<div>
  <dt>HTML</dt>
  <dd>Markup language for web structure</dd>
</div>

<div>
  <dt>CSS</dt>
  <dd>Stylesheet language for presentation</dd>
</div>

<div>
  <dt>JavaScript</dt>
  <dd>Programming language for interactivity</dd>
</div>
</dl>

Result

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

<style>
.grouped-dl > div {
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: #f9fafb;
  border-radius: 8px;
}
.grouped-dl dt {
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 0.5rem;
}
.grouped-dl dd {
  margin: 0;
  color: #6b7280;
}
</style>

<dl class="grouped-dl">
<div>
  <dt>HTML</dt>
  <dd>Markup language for web structure</dd>
</div>

<div>
  <dt>CSS</dt>
  <dd>Stylesheet language for presentation</dd>
</div>

<div>
  <dt>JavaScript</dt>
  <dd>Programming language for interactivity</dd>
</div>
</dl>

Real-World Examples

FAQ Format

<h3>Frequently Asked Questions</h3>
<dl>
<dt>How do I reset my password?</dt>
<dd>Click "Forgot Password" on the login page and follow the instructions sent to your email.</dd>

<dt>Can I use this on mobile devices?</dt>
<dd>Yes! Our application is fully responsive and works on all modern mobile browsers.</dd>

<dt>Is my data secure?</dt>
<dd>Absolutely. We use industry-standard encryption and never share your data with third parties.</dd>
</dl>

Result

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

<h3>Frequently Asked Questions</h3>
<dl>
<dt>How do I reset my password?</dt>
<dd>Click "Forgot Password" on the login page and follow the instructions sent to your email.</dd>

<dt>Can I use this on mobile devices?</dt>
<dd>Yes! Our application is fully responsive and works on all modern mobile browsers.</dd>

<dt>Is my data secure?</dt>
<dd>Absolutely. We use industry-standard encryption and never share your data with third parties.</dd>
</dl>

API Documentation

<h3>API Response Fields</h3>
<dl>
<dt>id</dt>
<dd><code>string</code> - Unique identifier for the resource</dd>

<dt>name</dt>
<dd><code>string</code> - Display name of the resource</dd>

<dt>created_at</dt>
<dd><code>timestamp</code> - ISO 8601 creation timestamp</dd>

<dt>status</dt>
<dd><code>enum</code> - One of: "active", "pending", "archived"</dd>
</dl>

Result

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

<h3>API Response Fields</h3>
<dl>
<dt>id</dt>
<dd><code>string</code> - Unique identifier for the resource</dd>

<dt>name</dt>
<dd><code>string</code> - Display name of the resource</dd>

<dt>created_at</dt>
<dd><code>timestamp</code> - ISO 8601 creation timestamp</dd>

<dt>status</dt>
<dd><code>enum</code> - One of: "active", "pending", "archived"</dd>
</dl>

Contact Information

<style>
.contact-dl {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 1.5rem;
  max-width: 400px;
}
.contact-dl dt {
  font-size: 0.85rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 1rem;
}
.contact-dl dt:first-of-type {
  margin-top: 0;
}
.contact-dl dd {
  margin: 0.25rem 0 0 0;
  font-size: 1.1rem;
  color: #1f2937;
}
</style>

<dl class="contact-dl">
<dt>Company Name</dt>
<dd>Acme Corporation</dd>

<dt>Email</dt>
<dd>info@acme.com</dd>

<dt>Phone</dt>
<dd>(555) 123-4567</dd>

<dt>Address</dt>
<dd>123 Main Street<br>San Francisco, CA 94105</dd>
</dl>

Result

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

<style>
.contact-dl {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 1.5rem;
  max-width: 400px;
}
.contact-dl dt {
  font-size: 0.85rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 1rem;
}
.contact-dl dt:first-of-type {
  margin-top: 0;
}
.contact-dl dd {
  margin: 0.25rem 0 0 0;
  font-size: 1.1rem;
  color: #1f2937;
}
</style>

<dl class="contact-dl">
<dt>Company Name</dt>
<dd>Acme Corporation</dd>

<dt>Email</dt>
<dd>info@acme.com</dd>

<dt>Phone</dt>
<dd>(555) 123-4567</dd>

<dt>Address</dt>
<dd>123 Main Street<br>San Francisco, CA 94105</dd>
</dl>

Accessibility

Screen readers announce description lists:

<!-- Screen reader: "Description list. Term: HTML. Description: HyperText Markup Language." -->
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
</dl>

Clear Associations

Keep terms and descriptions clearly paired:

Good
Confusing

<dl>
  <dt>Term</dt>
  <dd>Clear, direct description</dd>

  <dt>Another term</dt>
  <dd>Another clear description</dd>
</dl>

<dl>
  <dt>Term</dt>
  <dd>First part of description</dd>
  <dt>Another term</dt> <!-- Breaks the association -->
  <dd>Second part of first description</dd>
</dl>

Best Practices

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

  <dt>Member Since</dt>
  <dd>January 2024</dd>
</dl>

<!-- Use ul or ol for simple lists -->
<dl>
  <dt>Item 1</dt>
  <dt>Item 2</dt>
  <dt>Item 3</dt>
</dl>

Proper Nesting

Valid
Invalid

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

<dl>
  <p>Term</p> <!-- Only dt and dd allowed -->
  <span>Description</span>
</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 <dl> element has been supported since early HTML versions.

Term in a description list. Learn more →

Description in a description list. Learn more →

Unordered list for non-sequential items. Learn more →

Ordered list for sequential items. Learn more →

<dl> - Description List

The <dl> Element

Quick Example

Syntax

Attributes

Common Use Cases

Glossary

Product Specifications

Metadata

Configuration Settings

Multiple Descriptions

Multiple Terms

Styling Description Lists

Basic Styling

Two-Column Layout

Card Style

Horizontal List

Colored Terms

Semantic Grouping

Real-World Examples

FAQ Format

API Documentation

Contact Information

Accessibility

Screen Reader Behavior

Clear Associations

Best Practices

Use for Term-Description Pairs

Proper Nesting

Browser Support

Related Elements

Specifications

The `<dl>` Element