HTML <dd> Tag

Q: What is the HTML dd tag used for?

The dd element represents the description, definition, or value for the term in the preceding dt element within a dl description list.

Q: What is the difference between dt and dd?

dt is the term or name. dd is the description or value that explains that term. Both must be inside a dl element.

Q: Can one dt have multiple dd elements?

Yes. You can use several dd elements after a single dt to provide multiple descriptions or details for one term.

Q: Is dl still called a definition list?

HTML5 calls it a description list. It works for glossaries, FAQs, and name-value metadata pairs — not only dictionary definitions.

Q: Should I use dd for page layout?

No. Use dd only for semantic description list content. Use CSS layout tools like flexbox or grid for visual structure.

Beginner

⏱️ 5 min read

📚 Updated: Jun 2026

🎯 4 Examples

Text & Semantics

HTML dd tag tutorial — description list details with dl and dt

Overview

What You’ll Learn

By the end of this tutorial, you’ll mark description list details with <dd> inside semantic <dl> lists.

dd Syntax

Place <dd> after its <dt> term inside <dl>.

Description Role

Represents the value or explanation for a term.

dl + dt + dd

Understand how the three elements work together.

Multiple dd

Add several descriptions for one term when needed.

Metadata Pairs

Build name–value specs and profile details.

CSS Styling

Style terms and descriptions with classes and grid.

Fundamentals

What Is the `<dd>` Tag?

The dd element (<dd>) represents a description, definition, or value associated with the preceding <dt> term inside a <dl> description list. Browsers typically indent dd content slightly by default.

💡

Description list, not layout

HTML5 calls <dl> a description list—use it for glossaries, FAQs, and metadata pairs, not for arbitrary page layout.

Common uses include glossaries, FAQ answers, product specifications, author bios, and any name–value content where a term needs a clear description.

Foundation

📝 Syntax

Place <dd> after its <dt> term, both inside <dl>:

syntax.html

<dl>
  <dt>Term</dt>
  <dd>Description or value for the term</dd>
</dl>

Syntax Rules

<dd> must be inside a <dl> element.
Each dd describes the most recent preceding dt.
Multiple dd elements can follow a single dt.
Do not use description lists purely for CSS layout—use flexbox or grid instead.

Cheat Sheet

⚡ Quick Reference

Feature	Syntax / Rule	Notes
Parent	`<dl>`	Description list container
Pairs with	`<dt>`	Term comes before dd
Element type	`Block`	Block-level content
Multiple dd	`Allowed`	Several descriptions per dt
Tag-specific attrs	`None`	Global attributes only
Use cases	`Glossary, FAQ, metadata`	Name–value semantic pairs

Comparison

⚖️ `<dl>`, `<dt>`, and `<dd>`

These three elements work together in a description list:

Element	Role	Example
`<dl>`	Container wrapper	The description list
`<dt>`	Term, name, or label	HTML
`<dd>`	Description or value	HyperText Markup Language
Order	`dt` then `dd`	Term before its description

Reference

🧰 Attributes

The <dd> tag has no tag-specific attributes. Global attributes apply:

class Global

Style descriptions separately from terms.

class="description"

id Global

Unique identifier for linking or scripting.

id="css-desc"

lang Global

Language of the description text if different from page.

lang="en"

title Global

Extra tooltip context on hover.

title="Full name"

Parent dl Required

Must be nested inside a description list.

<dl>...</dl>

Preceding dt Required

Each dd describes the nearest preceding dt.

<dt>...<dd>

Example: <dt class="term">CSS</dt><dd class="description">Cascading Style Sheets</dd>

Hands-On

Examples Gallery

Basic descriptions, glossaries, multiple dd elements, and metadata pairs with copy-ready code and live previews.

Live Preview

A simple term and description pair:

HTML: HyperText Markup Language for structuring web pages.

Basic Description

One dt term with one dd description.

basic-dd.html

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

Try It Yourself

📚 Common Use Cases

Use <dd> in glossaries, FAQ answers, product specifications, author bios, and any name–value content where a term needs a clear description.

Web Technology Glossary

Multiple dt/dd pairs in one dl list.

glossary-dd.html

<dl>
  <dt>HTML</dt>
  <dd>A markup language for structuring web content.</dd>
  <dt>CSS</dt>
  <dd>A stylesheet language for visual design.</dd>
  <dt>JavaScript</dt>
  <dd>A programming language for interactive pages.</dd>
</dl>

Try It Yourself

Multiple dd for One dt

Add several dd elements when one term needs multiple descriptions.

multiple-dd.html

<dl>
  <dt>Web Development</dt>
  <dd>Creating websites and applications for the internet.</dd>
  <dd>Typically involves HTML, CSS, and JavaScript.</dd>
</dl>

Try It Yourself

Metadata Name–Value Pairs

Use dl/dt/dd for product specs or profile details with CSS grid layout.

metadata-dd.html

<dl>
  <dt>Brand</dt>
  <dd>CodeToFun</dd>
  <dt>Category</dt>
  <dd>Education</dd>
  <dt>Level</dt>
  <dd>Beginner</dd>
</dl>

Try It Yourself

Design

Styling <dd> with CSS

Style terms and descriptions separately. Use CSS grid on dl for metadata-style name–value layouts:

dt Bold term labels

dd Indented descriptions

grid Metadata two-column layout

margin Spacing between pairs

dd-styles.css

/* Glossary-style description list */
dl dt {
  font-weight: 600;
  color: #1e40af;
  margin-top: 0.75rem;
}

dl dd {
  margin: 0.25rem 0 0;
  padding-left: 1rem;
  color: #475569;
}

/* Metadata grid layout */
.spec-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 1rem;
}

Live styled metadata list

Author: Mari Selvan
Topic: HTML Description Lists

A11y

♿ Accessibility

Semantic description lists help assistive technologies:

Use dl for true term–description pairs — not for arbitrary layout.
Keep dt and dd associated — each term should have at least one dd.
Write clear dt labels — screen readers announce the dt/dd relationship.
Style with CSS — distinguish terms from descriptions visually.

🧠 How <dd> Works

Author creates a dl list

Wrap term–description groups in dl.

Markup

dt names the term

The keyword, label, or name comes first.

Term

dd provides the description

One or more dd elements explain the term.

Detail

Clear, semantic lists

Organized term–description content for users and assistive tech.

Compatibility

Universal Browser Support

The <dd> element is fully supported in all browsers, including legacy Internet Explorer.

✓ Baseline · Since HTML 2

Description lists that work everywhere

From legacy Internet Explorer to the latest mobile browsers — the dd element is fully supported for semantic term–description content.

100% Core tag support

Google Chrome All versions · Desktop & Mobile

Full support

Mozilla Firefox All versions · Desktop & Mobile

Full support

Apple Safari All versions · macOS & iOS

Full support

Microsoft Edge All versions · Chromium & Legacy

Full support

Internet Explorer IE 6+ · Legacy environments

Full support

Opera All modern versions

Full support

<dd> tag 100% supported

Bottom line: Ship semantic description lists with confidence. The <dd> element is safe to use in every production environment today.

Wrap Up

Conclusion

The <dd> tag provides descriptions in HTML description lists. Combined with <dl> and <dt>, it creates clear glossaries, FAQs, and metadata—use it for meaning, not layout.

View Examples Gallery Try dl + dt + dd

Pro Tips

💡 Best Practices

✅ Do

Wrap groups in dl
Put dt before its dd elements
Use multiple dd when needed
Style terms and descriptions with CSS

❌ Don’t

Use dd outside a dl
Use description lists only for layout
Leave a dt without a dd
Confuse dd with dl or dt

Summary

Key Takeaways

Knowledge Unlocked

Six truths every developer should know about `<dd>`

Bookmark these before you ship — they’ll keep your description list markup semantic and accessible.

Core concepts

📖 01

Description Role

<dd> holds the value or explanation for a term.

Foundation

📦 02

Inside dl

Must be nested within a description list container.

Essential

🔗 03

Follows dt

Each dd describes the nearest preceding dt element.

Syntax

➕ 04

Multiple dd

Several dd elements can follow one dt when needed.

Pattern

📝 05

Description List

HTML5 name—not just dictionary definitions.

Semantics

📊 06

Glossaries & Metadata

Perfect for FAQs, specs, and name–value pairs.

Use Case

❓ Frequently Asked Questions

What is the HTML dd tag used for?

It provides the description or value for a dt term inside a dl description list.

What is the difference between dt and dd?

dt is the term or name. dd is the description that explains it.

Can one dt have multiple dd elements?

Yes. Several dd elements can follow a single dt.

Is dl still called a definition list?

HTML5 uses “description list.” It works for glossaries, FAQs, and metadata—not only dictionary definitions.

Should I use dd for page layout?

No. Use dd only for semantic term–description content. Use CSS for layout.

Build Description Lists

Practice dl, dt, and dd in the interactive HTML editor.

Try dl + dt + dd →

About the author

Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

Experience 12 years building web and cloud systems
Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

6 people found this page helpful

HTML datalist Tag HTML del Tag

HTML <dd> Tag

What You’ll Learn

dd Syntax

Description Role

dl + dt + dd

Multiple dd

Metadata Pairs

CSS Styling

What Is the <dd> Tag?

📝 Syntax

Syntax Rules

⚡ Quick Reference

⚖️ <dl>, <dt>, and <dd>

🧰 Attributes

Examples Gallery

Live Preview

Basic Description

📚 Common Use Cases

Web Technology Glossary

Multiple dd for One dt

Metadata Name–Value Pairs

Styling <dd> with CSS

♿ Accessibility

🧠 How <dd> Works

Author creates a dl list

dt names the term

dd provides the description

Clear, semantic lists

Universal Browser Support

Description lists that work everywhere

Conclusion

💡 Best Practices

✅ Do

❌ Don’t

Key Takeaways

Six truths every developer should know about <dd>

Description Role

Inside dl

Follows dt

Multiple dd

Description List

Glossaries & Metadata

❓ Frequently Asked Questions

🧩 Related HTML Topics

HTML <datalist> Tag

HTML <del> Tag

HTML <dl> Tag

Try glossary list

Build Description Lists

About the author

What Is the `<dd>` Tag?

⚖️ `<dl>`, `<dt>`, and `<dd>`

Six truths every developer should know about `<dd>`