<dd>

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

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

The <dd> tag is supported in all browsers:

Chrome

Yes

Firefox

Yes

Safari

Yes

Edge

Yes

Opera

Yes

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
<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
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