<dt> - Description Term

The `<dt>` Element

List term HTML 2.0

The <dt> element represents a term or name in a description list (<dl>). It’s paired with one or more <dd> elements that provide the description or definition for the term.

Quick Example

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

<dt>CSS</dt>
<dd>Cascading Style Sheets</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>
</dl>

Syntax

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

The <dt> element must be a child of a <dl> element and is typically followed by one or more <dd> elements.

Attributes

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

<dt id="term-1" class="important-term">Term Name</dt>

Common Use Cases

Glossary Terms

<h3>Web Glossary</h3>
<dl>
<dt>API</dt>
<dd>Application Programming Interface</dd>

<dt>CDN</dt>
<dd>Content Delivery Network</dd>

<dt>DNS</dt>
<dd>Domain Name System</dd>
</dl>

Result

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

<h3>Web Glossary</h3>
<dl>
<dt>API</dt>
<dd>Application Programming Interface</dd>

<dt>CDN</dt>
<dd>Content Delivery Network</dd>

<dt>DNS</dt>
<dd>Domain Name System</dd>
</dl>

Product Specifications

<h3>Technical Specifications</h3>
<dl>
<dt>Processor</dt>
<dd>Intel Core i7-12700K</dd>

<dt>Memory</dt>
<dd>32GB DDR5 RAM</dd>

<dt>Storage</dt>
<dd>1TB NVMe SSD</dd>

<dt>Graphics</dt>
<dd>NVIDIA RTX 4070</dd>
</dl>

Result

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

<h3>Technical Specifications</h3>
<dl>
<dt>Processor</dt>
<dd>Intel Core i7-12700K</dd>

<dt>Memory</dt>
<dd>32GB DDR5 RAM</dd>

<dt>Storage</dt>
<dd>1TB NVMe SSD</dd>

<dt>Graphics</dt>
<dd>NVIDIA RTX 4070</dd>
</dl>

Metadata Labels

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

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

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

<dt>Tags</dt>
<dd>HTML, CSS, JavaScript</dd>
</dl>

Result

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

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

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

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

<dt>Tags</dt>
<dd>HTML, CSS, JavaScript</dd>
</dl>

Multiple Descriptions per Term

One term can have multiple descriptions:

<dl>
<dt>JavaScript</dt>
<dd>A programming language for web development</dd>
<dd>Created by Brendan Eich in 1995</dd>
<dd>Supports multiple programming paradigms</dd>
</dl>

Result

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

<dl>
<dt>JavaScript</dt>
<dd>A programming language for web development</dd>
<dd>Created by Brendan Eich in 1995</dd>
<dd>Supports multiple programming paradigms</dd>
</dl>

Multiple terms can share one description:

<dl>
<dt>Frontend</dt>
<dt>Client-side</dt>
<dd>Development that happens in the browser</dd>

<dt>Backend</dt>
<dt>Server-side</dt>
<dd>Development that happens on the server</dd>
</dl>

Result

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

<dl>
<dt>Frontend</dt>
<dt>Client-side</dt>
<dd>Development that happens in the browser</dd>

<dt>Backend</dt>
<dt>Server-side</dt>
<dd>Development that happens on the server</dd>
</dl>

Styling DT Elements

Bold and Colored

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

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

<dt>Answer</dt>
<dd>HTML that uses elements with clear meaning</dd>
</dl>

Result

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

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

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

<dt>Answer</dt>
<dd>HTML that uses elements with clear meaning</dd>
</dl>

Uppercase Labels

<style>
.uppercase-dt dt {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
  margin-bottom: 0.25rem;
}
.uppercase-dt dd {
  margin: 0 0 1rem 0;
  font-size: 1.1rem;
  color: #1f2937;
}
</style>

<dl class="uppercase-dt">
<dt>Full Name</dt>
<dd>John Michael Doe</dd>

<dt>Email Address</dt>
<dd>john.doe@example.com</dd>

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

Result

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

<style>
.uppercase-dt dt {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
  margin-bottom: 0.25rem;
}
.uppercase-dt dd {
  margin: 0 0 1rem 0;
  font-size: 1.1rem;
  color: #1f2937;
}
</style>

<dl class="uppercase-dt">
<dt>Full Name</dt>
<dd>John Michael Doe</dd>

<dt>Email Address</dt>
<dd>john.doe@example.com</dd>

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

Background and Padding

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

<dl class="bg-dt">
<dt>Step 1</dt>
<dd>Install the required dependencies</dd>

<dt>Step 2</dt>
<dd>Configure your environment variables</dd>

<dt>Step 3</dt>
<dd>Run the development server</dd>
</dl>

Result

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

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

<dl class="bg-dt">
<dt>Step 1</dt>
<dd>Install the required dependencies</dd>

<dt>Step 2</dt>
<dd>Configure your environment variables</dd>

<dt>Step 3</dt>
<dd>Run the development server</dd>
</dl>

Icon Before Term

<style>
.icon-dt dt {
  font-weight: 600;
  color: #1f2937;
  margin-top: 1rem;
}
.icon-dt dt:first-of-type {
  margin-top: 0;
}
.icon-dt dt::before {
  content: "▶ ";
  color: #3b82f6;
}
.icon-dt dd {
  margin-left: 1.5rem;
  color: #6b7280;
}
</style>

<dl class="icon-dt">
<dt>Installation</dt>
<dd>Download and run the installer</dd>

<dt>Configuration</dt>
<dd>Edit the settings file</dd>

<dt>Usage</dt>
<dd>Launch the application</dd>
</dl>

Result

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

<style>
.icon-dt dt {
  font-weight: 600;
  color: #1f2937;
  margin-top: 1rem;
}
.icon-dt dt:first-of-type {
  margin-top: 0;
}
.icon-dt dt::before {
  content: "▶ ";
  color: #3b82f6;
}
.icon-dt dd {
  margin-left: 1.5rem;
  color: #6b7280;
}
</style>

<dl class="icon-dt">
<dt>Installation</dt>
<dd>Download and run the installer</dd>

<dt>Configuration</dt>
<dd>Edit the settings file</dd>

<dt>Usage</dt>
<dd>Launch the application</dd>
</dl>

Grid Layout

<style>
.grid-dt {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 0.5rem 1.5rem;
}
.grid-dt dt {
  font-weight: 600;
  color: #374151;
  text-align: right;
}
.grid-dt dd {
  margin: 0;
  color: #6b7280;
}
</style>

<dl class="grid-dt">
<dt>Product Name:</dt>
<dd>Ultra Widget Pro</dd>

<dt>SKU:</dt>
<dd>UWP-2024-001</dd>

<dt>Price:</dt>
<dd>$99.99</dd>

<dt>Availability:</dt>
<dd>In Stock</dd>
</dl>

Result

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

<style>
.grid-dt {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 0.5rem 1.5rem;
}
.grid-dt dt {
  font-weight: 600;
  color: #374151;
  text-align: right;
}
.grid-dt dd {
  margin: 0;
  color: #6b7280;
}
</style>

<dl class="grid-dt">
<dt>Product Name:</dt>
<dd>Ultra Widget Pro</dd>

<dt>SKU:</dt>
<dd>UWP-2024-001</dd>

<dt>Price:</dt>
<dd>$99.99</dd>

<dt>Availability:</dt>
<dd>In Stock</dd>
</dl>

Semantic Usage

Proper Term Definition

<dl>
<dt>Semantic HTML</dt>
<dd>HTML markup that conveys meaning about the content, not just presentation</dd>

<dt>Accessibility</dt>
<dd>The practice of making websites usable by people with disabilities</dd>

<dt>Responsive Design</dt>
<dd>Websites that adapt their layout to different screen sizes</dd>
</dl>

Result

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

<dl>
<dt>Semantic HTML</dt>
<dd>HTML markup that conveys meaning about the content, not just presentation</dd>

<dt>Accessibility</dt>
<dd>The practice of making websites usable by people with disabilities</dd>

<dt>Responsive Design</dt>
<dd>Websites that adapt their layout to different screen sizes</dd>
</dl>

Configuration Options

<h3>Server Settings</h3>
<dl>
<dt>host</dt>
<dd><code>localhost</code></dd>

<dt>port</dt>
<dd><code>3000</code></dd>

<dt>protocol</dt>
<dd><code>http</code></dd>

<dt>timeout</dt>
<dd><code>30000</code> (milliseconds)</dd>
</dl>

Result

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

<h3>Server Settings</h3>
<dl>
<dt>host</dt>
<dd><code>localhost</code></dd>

<dt>port</dt>
<dd><code>3000</code></dd>

<dt>protocol</dt>
<dd><code>http</code></dd>

<dt>timeout</dt>
<dd><code>30000</code> (milliseconds)</dd>
</dl>

Accessibility

Screen readers announce terms in description lists:

<!-- Screen reader: "Description list. Term: Username. Description: john_doe" -->
<dl>
  <dt>Username</dt>
  <dd>john_doe</dd>
</dl>

Clear and Concise Terms

Use descriptive, unambiguous terms:

Good
Unclear

<dl>
  <dt>Email Address</dt>
  <dd>[email protected]</dd>

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

<dl>
  <dt>Email</dt>
  <dd>[email protected]</dd>

  <dt>Tel</dt>
  <dd>(555) 123-4567</dd>
</dl>

Proper Structure

Keep terms and descriptions properly paired:

Good
Confusing

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

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

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

Best Practices

<dl>
  <dt>Definition</dt>
  <dd>The meaning of a word or phrase</dd>
</dl>

<dl>
  <dt>Chapter 1</dt>
  <dt>Chapter 2</dt>
  <dt>Chapter 3</dt>
</dl>

Keep Terms Concise

Good
Too Verbose

<dt>API Key</dt>
<dd>Your unique authentication key for API access</dd>

<dt>The API Key that you will use to authenticate</dt>
<dd>abc123xyz</dd>

Avoid Empty Terms

Good
Avoid

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

<dt></dt>
<dd>Active</dd>

Advanced Examples

With Links

<dl>
<dt><a href="#html">HTML</a></dt>
<dd>Structure and content of web pages</dd>

<dt><a href="#css">CSS</a></dt>
<dd>Styling and layout of web pages</dd>

<dt><a href="#js">JavaScript</a></dt>
<dd>Interactivity and behavior</dd>
</dl>

Result

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

<dl>
<dt><a href="#html">HTML</a></dt>
<dd>Structure and content of web pages</dd>

<dt><a href="#css">CSS</a></dt>
<dd>Styling and layout of web pages</dd>

<dt><a href="#js">JavaScript</a></dt>
<dd>Interactivity and behavior</dd>
</dl>

With Emphasis

<dl>
<dt><strong>Important:</strong> Backup</dt>
<dd>Always backup your data before updating</dd>

<dt><em>Optional:</em> Analytics</dt>
<dd>Enable analytics for usage tracking</dd>
</dl>

Result

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

<dl>
<dt><strong>Important:</strong> Backup</dt>
<dd>Always backup your data before updating</dd>

<dt><em>Optional:</em> Analytics</dt>
<dd>Enable analytics for usage tracking</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 <dt> element has been supported since early HTML versions.

Description list container. Learn more →

Description or definition for a term. Learn more →

Indicates the term being defined. Learn more →

Abbreviation or acronym. Learn more →

<dt> - Description Term

The <dt> Element

Quick Example

Syntax

Attributes

Common Use Cases

Glossary Terms

Product Specifications

Metadata Labels

Multiple Descriptions per Term

Multiple Terms Sharing Description

Styling DT Elements

Bold and Colored

Uppercase Labels

Background and Padding

Icon Before Term

Grid Layout

Semantic Usage

Proper Term Definition

Configuration Options

Accessibility

Screen Reader Behavior

Clear and Concise Terms

Proper Structure

Best Practices

Don’t Use for Non-Terms

Keep Terms Concise

Avoid Empty Terms

Advanced Examples

With Links

With Emphasis

Browser Support

Related Elements

Specifications

The `<dt>` Element