HTML <dt> Tag

Q: What is the HTML dt tag used for?

The dt element represents a term or name in a description list. It pairs with dd (description) inside a dl container for glossaries, FAQs, and metadata.

Q: What is the difference between dt and dd?

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

Q: Can dt be used outside of dl?

No. The dt element must be a child of dl. Using dt alone is invalid HTML and breaks the semantic meaning of description lists.

Q: What does dt stand for?

dt stands for description term. HTML5 uses the name description list for the parent dl element.

Q: Can one dt have multiple dd elements?

Yes. Several dd elements can follow a single dt when one term needs multiple descriptions or details.

Beginner

⏱️ 5 min read

📚 Updated: Jun 2026

🎯 4 Examples

Text & Semantics

HTML dt tag tutorial — description terms in dl lists with dd

Overview

What You’ll Learn

By the end of this tutorial, you’ll use the <dt> element correctly inside description lists for glossaries, FAQs, and metadata.

Understanding HTML list elements helps you structure content clearly. The <dt> tag plays a key role in description lists—together with <dl> and <dd>, it presents terms and their matching definitions in a semantic, accessible way.

Core Syntax

Write valid <dt> terms inside a dl container.

dt & dd Roles

Understand how terms pair with descriptions in description lists.

Parent dl Required

Know why dt cannot be used outside a description list.

Glossaries & FAQs

Use dt for term labels and FAQ-style questions.

CSS Styling

Style description terms with classes and typography.

Production Tips

Apply accessibility best practices for term–description markup.

Fundamentals

What Is the `<dt>` Tag?

The <dt> element represents a term or name in an HTML description list. Browsers typically render dt in bold by default. Each dt should be followed by one or more <dd> elements that describe it.

💡

Description term

dt stands for description term. It names the keyword, label, or question—the dd element provides the matching detail or answer.

Always nest dt inside dl. Using it alone breaks the semantic meaning of description lists and produces invalid HTML.

Foundation

📝 Syntax

Place <dt> inside <dl>, followed by its matching <dd>:

syntax.html

<dl>
  <dt>Your Term Here</dt>
  <dd>Description for the term</dd>
</dl>

Syntax Rules

<dt> must be a direct or indirect child of <dl>.
Each dt should be followed by at least one dd element.
Put the term before its description—never place dd before dt.
Use global attributes like class and id to style individual terms.

Cheat Sheet

⚡ Quick Reference

Feature	Syntax / Rule	Notes
Stands for	`Description term`	HTML5 name for dt
Tag-specific attrs	`None`	Global attributes apply
Required parent	`dl`	Cannot be used alone
Pairs with	`dd`	Term before description
Default style	`Bold`	Browsers emphasize terms
Use cases	`Glossary, FAQ, metadata`	Term labels and questions

Comparison

⚖️ `<dt>` vs `<dd>`

These sibling elements work together inside a description list:

Element	Role	Content
`<dt>`	Term	Name, label, keyword, or question
`<dd>`	Description	Explanation, value, or answer
Order	`dt first`	Term always comes before its description(s)
Container	`dl`	Both live inside the description list

Comparison

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

The three elements form a complete description list structure:

Element	Role	When to use
`<dl>`	Container	Wraps the whole description list
`<dt>`	Term	What you are naming or asking
`<dd>`	Description	What the term means or the answer
HTML5 name	`Description list`	Not only dictionary definitions

Reference

🧰 Attributes

The <dt> tag has no tag-specific attributes. Style terms with global attributes such as class and id:

class Global

CSS hook for styling description terms consistently across a glossary.

class="highlight"

style Global

Inline CSS for one-off term styling—prefer classes for reusable design.

style="color: #0066cc;"

id Global

Unique identifier so links can jump to a specific term definition.

id="def-html"

lang Global

Language of the term when it differs from the document language.

lang="fr"

title Global

Advisory tooltip for expanded context on abbreviated terms.

title="HyperText Markup Language"

attributes.html

<dl>
  <dt class="highlight" style="color: #0066cc;">Your Styled Term Here</dt>
  <dd>Matching description for the term.</dd>
</dl>

Style dt with CSS for visual emphasis—but use it for semantic term labeling, not as a bold-text shortcut.

Hands-On

Examples Gallery

Basic terms, multiple dt/dd pairs, styled terms, and FAQ-style questions with copy-ready code and live previews.

Live Preview

A simple term with its description:

CSS: Cascading Style Sheets for styling web pages.

Basic Description Term

A single dt term with one matching dd description.

basic-dt.html

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language for structuring web pages.</dd>
</dl>

Try It Yourself

📚 Common Use Cases

Use <dt> to label terms in glossaries, FAQ questions, product specification names, author and publish metadata keys, API field names, and any content where a clear label needs a matching description.

Multiple Terms in One List

Several dt/dd pairs inside one dl element.

definition-lists.html

<dl>
  <dt>Term 1</dt>
  <dd>Definition for Term 1</dd>

  <dt>Term 2</dt>
  <dd>Definition for Term 2</dd>
</dl>

Try It Yourself

Styled Description Terms

Apply a CSS class to dt elements for consistent visual emphasis.

styling.html

<dl>
  <dt class="highlight">Styled Term 1</dt>
  <dd>Definition for Styled Term 1</dd>

  <dt class="highlight">Styled Term 2</dt>
  <dd>Definition for Styled Term 2</dd>
</dl>

Try It Yourself

FAQ with dt Questions

Use dt for questions and dd for answers in a simple FAQ list.

faq-dt.html

<dl>
  <dt>What is HTML?</dt>
  <dd>A markup language for structuring web content.</dd>

  <dt>What is CSS?</dt>
  <dd>A stylesheet language for visual design.</dd>
</dl>

Try It Yourself

Design

Styling <dt> with CSS

Browsers render dt in bold by default. Customize description terms with font weight, color, and spacing:

font-weight Bold terms by default

color Highlight glossary terms

margin-top Space between term groups

font-size FAQ question sizing

dt-styles.css

/* Description term styling */
dt {
  font-weight: 600;
  color: #0f172a;
}

dt.highlight {
  color: #0066cc;
}

dl.faq dt {
  margin-top: 0.75rem;
  font-size: 1rem;
}

Live styled description term

HTML: HyperText Markup Language
CSS: Cascading Style Sheets

A11y

♿ Accessibility

Semantic description lists help assistive technologies understand term–description relationships:

Write clear dt labels — screen readers announce the dt/dd relationship.
Keep dt inside dl — never use dt alone or outside a description list.
Pair each dt with dd — every term should have at least one description.
Use for meaning, not layout — dt is semantic, not a styling shortcut.

🧠 How <dt> Works

Author opens a dl list

Wrap term–description groups in dl.

Markup

dt names the term

Add the keyword, label, or question with dt.

Term

dd provides the description

One or more dd elements explain the term.

Detail

Clear, labeled content

Organized terms with matching descriptions for users and assistive tech.

Compatibility

Universal Browser Support

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

✓ Baseline · Since HTML 4

Description terms that work everywhere

From legacy Internet Explorer to the latest mobile browsers — the dt element is fully supported inside description lists.

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

<dt> tag 100% supported

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

Wrap Up

Conclusion

The <dt> tag names terms in HTML description lists. Combined with <dl> and <dd>, it creates clear glossaries, FAQs, and metadata—use it for semantic labeling, not layout.

View Examples Gallery Try multiple terms

Pro Tips

💡 Best Practices

✅ Do

Always place dt inside dl
Follow each dt with at least one dd
Use clear, concise term labels
Style terms with CSS classes

❌ Don’t

Use dt outside a dl element
Use dt only for bold text styling
Put dd before its dt
Confuse dt with heading tags

Summary

Key Takeaways

Knowledge Unlocked

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

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

Core concepts

📖 01

Description Term

<dt> names the term or label in a description list.

Foundation

🔗 02

Inside dl Only

dt must be a child of a description list.

Structure

📝 03

Pairs with dd

Each term is followed by one or more descriptions.

Pattern

📋 04

dt Before dd

Term always comes before its description(s).

Order

🎯 05

No Tag Attrs

Use global class and id for styling.

Attributes

🌐 06

Universal Support

Works in every browser, including legacy IE.

Compatibility

❓ Frequently Asked Questions

What is the HTML dt tag used for?

It marks a term or name in a description list. Pair it with dd inside dl for glossaries, FAQs, and metadata.

What is the difference between dt and dd?

dt is the term or label. dd is the description or value that explains it.

Can dt be used outside of dl?

No. dt must be a child of dl. Using it alone is invalid HTML.

What does dt stand for?

Description term. HTML5 uses “description list” for the parent dl element.

Can one dt have multiple dd elements?

Yes. Several dd elements can follow a single dt when one term needs multiple details.

Build Description Lists

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

Try 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 DOCTYPE Declaration HTML em Tag

HTML <dt> Tag

What You’ll Learn

Core Syntax

dt & dd Roles

Parent dl Required

Glossaries & FAQs

CSS Styling

Production Tips

What Is the <dt> Tag?

📝 Syntax

Syntax Rules

⚡ Quick Reference

⚖️ <dt> vs <dd>

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

🧰 Attributes

Examples Gallery

Live Preview

Basic Description Term

📚 Common Use Cases

Multiple Terms in One List

Styled Description Terms

FAQ with dt Questions

Styling <dt> with CSS

♿ Accessibility

🧠 How <dt> Works

Author opens a dl list

dt names the term

dd provides the description

Clear, labeled content

Universal Browser Support

Description terms that work everywhere

Conclusion

💡 Best Practices

✅ Do

❌ Don’t

Key Takeaways

Six truths every developer should know about <dt>

Description Term

Inside dl Only

Pairs with dd

dt Before dd

No Tag Attrs

Universal Support

❓ Frequently Asked Questions

🧩 Related HTML Topics

HTML DOCTYPE

HTML <em> Tag

HTML <dl> Tag

HTML <dd> Tag

Try multiple terms

Build Description Lists

About the author

What Is the `<dt>` Tag?

⚖️ `<dt>` vs `<dd>`

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

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