<dd>

Defines a description/value of a term in a description list

Quick Answer

What is the HTML <dd> tag?

The <dd> tag defines the description/definition in a description list (<dl>). It follows the <dt> (term) element and provides details or explanations. Multiple <dd> elements can follow a single <dt>, and vice versa. This semantic structure is ideal for glossaries, metadata, and FAQs.

Definition and Usage

The <dd> tag is used to describe a term/name in a description list.

The <dd> tag is used in conjunction with <dl> (defines a description list) and <dt> (defines terms/names).

Inside a <dd> tag you can put paragraphs, line breaks, images, links, lists, etc.

Tip: A <dt> tag can have multiple <dd> tags that provide different descriptions of the same term.

Note: The <dd> tag is typically indented in the browser by default.

Browser support and standards

Browser rendering and modern HTML conformance are different questions. Check the current element reference for the browsers and features your project needs; the older source version table is not a current compatibility guarantee.

Read the MDN element reference

Attributes

The <dd> tag supports the Global Attributes in HTML.

The <dd> tag also supports the Event Attributes in HTML.

Examples

Basic Description List

Create a simple description list:

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>

  <dt>JavaScript</dt>
  <dd>A programming language used to create interactive web pages</dd>
</dl>

Multiple Descriptions

One term with multiple descriptions:

Example
<dl>
  <dt>Coffee</dt>
  <dd>A hot drink made from roasted coffee beans</dd>
  <dd>Popular morning beverage worldwide</dd>
  <dd>Contains caffeine which provides energy</dd>
</dl>

Nested Description Lists

Create nested description lists:

Example
<dl>
  <dt>Front-end Technologies</dt>
  <dd>
    <dl>
      <dt>HTML</dt>
      <dd>Structure and content</dd>
      <dt>CSS</dt>
      <dd>Styling and layout</dd>
      <dt>JavaScript</dt>
      <dd>Interactivity and behavior</dd>
    </dl>
  </dd>
</dl>

Styled Description List

Add CSS styling to description lists:

Example
<style>
  dl {
    background: #f4f4f4;
    padding: 20px;
    border-radius: 8px;
  }

  dt {
    font-weight: bold;
    color: #745af2;
    margin-top: 10px;
  }

  dd {
    margin-left: 20px;
    margin-bottom: 10px;
    color: #555;
  }
</style>

<dl>
  <dt>HTML</dt>
  <dd>Creates web page structure</dd>

  <dt>CSS</dt>
  <dd>Styles web pages</dd>
</dl>

Glossary Example

Create a glossary with description lists:

Example
<h2>Web Development Glossary</h2>
<dl
  >
  <dt>API</dt>
  <dd>Application Programming Interface - a set of rules that allows programs to communicate</dd>

  <dt>DOM</dt>
  <dd>Document Object Model - a programming interface for HTML documents</dd>

  <dt>REST</dt>
  <dd>Representational State Transfer - an architectural style for web services</dd>

  <dt>JSON</dt>
  <dd>JavaScript Object Notation - a lightweight data-interchange format</dd>
</dl
>

Product Specifications

Use description lists for product details:

Example
<h3>Laptop Specifications</h3>
<dl>
  <dt>Processor</dt>
  <dd>Intel Core i7-12700H (12th Gen)</dd>

  <dt>RAM</dt>
  <dd>16GB DDR5</dd>

  <dt>Storage</dt>
  <dd>512GB NVMe SSD</dd>

  <dt>Display</dt>
  <dd>15.6" Full HD (1920x1080)</dd>

  <dt>Graphics</dt>
  <dd>NVIDIA GeForce RTX 3060</dd>
</dl>

FAQ Section

Create an FAQ with description lists:

Example
<h2>Frequently Asked Questions</h2>
<dl
  >
  <dt>What is HTML?</dt>
  <dd>HTML stands for HyperText Markup Language. It's the standard markup language for creating web pages.</dd>

  <dt>Is HTML a programming language?</dt>
  <dd>No, HTML is a markup language, not a programming language. It structures content but doesn't have logic or algorithms.</dd>

  <dt>Do I need to know CSS to use HTML?</dt>
  <dd>While not required, learning CSS alongside HTML is highly recommended for styling your web pages.</dd>
</dl
>

Description with Rich Content

Include multiple elements in descriptions:

Example
<dl
  >
  <dt>Contact Information</dt>
  <dd
    >
    <p
      ><strong>Email:</strong> info@example.com</p
    >
    <p
      ><strong>Phone:</strong> (555) 123-4567</p
    >
    <p
      ><strong>Address:</strong
      ><br />
    123 Web Street<br />
    Internet City, IC 12345</p
    >
  </dd
  >

  <dt>Office Hours</dt>
  <dd>
    <ul>
      <li>Monday - Friday: 9:00 AM - 5:00 PM</li>
      <li>Saturday: 10:00 AM - 2:00 PM</li>
      <li>Sunday: Closed</li>
    </ul>
  </dd>
</dl
>

Description List Structure

Understanding the relationship between <dl>, <dt>, and <dd>:

<dl>: Description List - The container for the entire list
<dt>: Description Term - The term or name being described
<dd>: Description Definition - The description or value of the term

Structure Rules:

A <dd> must be inside a <dl>
A <dd> typically follows a <dt>
Multiple <dd> elements can follow a single <dt>
You can have multiple term-description pairs in one <dl>

Styling Description Lists with CSS

Common CSS techniques for styling description lists:

Horizontal Layout
<style>
  dl {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 10px 20px;
  }

  dt {
    font-weight: bold;
    text-align: right;
  }

  dd {
    margin: 0;
  }
</style>

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

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

Card Style

Approved-page light CSS-variable defaults are supplied: --bg-primary. The snippet includes CSS inside its HTML.

<style>
  dl {
    background: var(--bg-primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-radius: 8px;
    padding: 20px;
  }

  dt {
    font-size: 18px;
    font-weight: 600;
    color: #745af2;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 8px;
    margin-bottom: 12px;
  }

  dd {
    margin-left: 0;
    margin-bottom: 20px;
    color: #555;
  }
</style>

When to Use dl/dt/dd

Description lists are ideal for:

Glossaries and dictionaries
Metadata and specifications
Key-value pairs
FAQ sections
Product details and specifications
Contact information
Configuration settings
Any content with terms and their descriptions

When NOT to use: Don't use description lists for navigation menus, generic lists, or data tables. Use <ul>/<ol> for lists and <table> for tabular data.

Try it Yourself

Interactive Example

Here's a live example of a styled description list:

HTML: HyperText Markup Language - structures web content
CSS: Cascading Style Sheets - styles and layouts web pages
JavaScript: Programming language for web interactivity

Try in Code Playground

Best Practices

Always use <dd> inside a <dl> element
Each <dd> should follow at least one <dt>
Use description lists for term-definition pairs, not generic content
You can include multiple <dd> elements for one <dt>
Rich content (paragraphs, lists, images) can be placed inside <dd>
Use CSS to customize the appearance and layout
Consider accessibility - screen readers handle description lists well
Nest description lists when you need hierarchical definitions

Accessibility

Screen readers announce description lists and their structure
Properly structured dl/dt/dd helps users understand relationships
Use semantic HTML - don't use divs to recreate description lists
Ensure adequate color contrast when styling
Keep term-description relationships clear and logical

Default CSS Settings

Most browsers will display the <dd> element with the following default values:

Default CSS

Unavailable or blocked: markup context “Matching lesson markup is not supplied; this fragment uses a generic HTML scaffold.”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

dd {
  display: block;
  margin-left: 40px;
}

Related Tags

<dl>
Defines a description list
<dt>
Defines a term in a description list
<ul>
Defines an unordered list
<ol>
Defines an ordered list