HTML <dl> Tag

Q: What is the HTML dl tag used for?

The dl element creates a description list — a group of terms (dt) and their descriptions or values (dd). Use it for glossaries, FAQs, and name-value metadata.

Q: What is the difference between dl and ul?

ul is a bulleted list of items. dl pairs terms with descriptions using dt and dd — it is for name-value or term-description content, not generic bullet points.

Q: Is dl still called a definition list?

HTML5 uses the name description list. It works for glossaries, metadata, and FAQs — not only dictionary-style definitions.

Q: Can one dt have multiple dd elements?

Yes. Several dd elements can follow a single dt to provide multiple descriptions or details for one term.

Q: Should I use dl for page layout?

No. Use dl only for semantic term-description content. Use CSS layout tools like flexbox or grid for visual structure.

Beginner

⏱️ 5 min read

📚 Updated: Jun 2026

🎯 4 Examples

Text & Semantics

HTML dl tag tutorial — description lists with dt and dd

Overview

What You’ll Learn

By the end of this tutorial, you’ll build semantic description lists with <dl>, <dt>, and <dd> in real projects.

Core Syntax

Write valid <dl> lists with correct dt and dd pairing.

dt & dd Roles

Understand how terms and descriptions work together inside a description list.

dl vs ul / ol

Know when to use description lists instead of bullet or numbered lists.

Glossaries & Metadata

Build glossaries, FAQs, and name–value metadata with semantic markup.

CSS Styling

Style terms and descriptions with CSS grid, spacing, and typography.

Production Tips

Apply accessibility best practices for term–description relationships.

Fundamentals

What Is the `<dl>` Tag?

The <dl> element represents a description list (HTML5 name; formerly called definition list). It groups dt terms with their matching dd descriptions—ideal for glossaries, FAQs, and name–value metadata.

💡

Description list, not just definitions

HTML5 renamed this from “definition list” to “description list.” Use it whenever content has a clear term–description or name–value relationship—not only dictionary-style definitions.

Combined with <dt> and <dd>, the dl element gives assistive technologies and search engines a clear semantic structure for paired content.

Foundation

📝 Syntax

Wrap dt and dd pairs inside a dl element:

syntax.html

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

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

Syntax Rules

<dl> is a block-level container for term–description groups.
Each dt (term) should be followed by at least one dd (description).
Multiple dd elements can follow a single dt when one term needs several details.
Do not nest dl inside another dl—keep lists flat and semantic.

Cheat Sheet

⚡ Quick Reference

Feature	Syntax / Rule	Notes
Tag-specific attrs	`None`	Global attributes apply
<dt>	`Term / label`	Name, keyword, or question
<dd>	`Description / value`	Explanation or answer
Multiple dd	`Allowed`	Several descriptions per dt
HTML5 name	`Description list`	Not only dictionary definitions
Use cases	`Glossary, metadata, FAQ`	Term–description pairs

Comparison

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

These three elements work together to form a description list:

Element	Role	Content
`<dl>`	Container	Wraps the whole description list
`<dt>`	Term	Label, name, keyword, or question
`<dd>`	Description	Detail, value, or answer for the term
Order	`dt then dd`	Term always comes before its description(s)

Comparison

⚖️ `<dl>` vs `<ul>` and `<ol>`

Choose the right list type based on your content structure:

Element	Structure	When to use
`<dl>`	Term + description	Glossaries, metadata, FAQs with paired content
`<ul>`	Bulleted items	Unordered list of equal items with `li`
`<ol>`	Numbered items	Ordered sequence of steps or ranked items
Choose dl when	`Each item has a matching detail`	Name–value or term–description relationships

Reference

🧰 Attributes

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

class Global

CSS hook for styling the whole list or individual terms and descriptions.

class="glossary"

id Global

Unique identifier for linking to a specific description list on the page.

id="tech-glossary"

lang Global

Language of the list content when it differs from the document.

lang="en-US"

title Global

Advisory tooltip for the entire description list section.

title="Web technology glossary"

Apply classes to dl, dt, and dd separately for fine-grained CSS control over terms and descriptions.

Hands-On

Examples Gallery

Basic description lists, glossaries, metadata pairs, and FAQ-style multiple dd elements 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 List

One dl with dt terms and dd descriptions.

basic-dl.html

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

Try It Yourself

📚 Common Use Cases

Use <dl> for glossaries, FAQ-style Q&A, product specifications, author and publish metadata, API field documentation, and any content where a label needs a clear matching value.

Web Technology Glossary

Multiple term–description pairs in one list.

glossaries-and-definitions.html

<dl>
  <dt>JavaScript</dt>
  <dd>A scripting language for interactive web pages.</dd>
  <dt>CSS</dt>
  <dd>Styles the look and layout of HTML documents.</dd>
  <dt>API</dt>
  <dd>Lets applications communicate and exchange data.</dd>
</dl>

Try It Yourself

Metadata Name–Value Pairs

Present properties and values such as author and publish date.

metadata-presentation.html

<dl>
  <dt>Author</dt>
  <dd>Mari Selvan</dd>
  <dt>Published</dt>
  <dd>June 10, 2026</dd>
  <dt>Category</dt>
  <dd>HTML Tutorial</dd>
</dl>

Try It Yourself

FAQ with Multiple dd

Add several dd elements after one dt when a term needs multiple details.

faq-dl.html

<dl>
  <dt>What is HTML?</dt>
  <dd>A markup language for structuring web content.</dd>
  <dt>What do I need to learn first?</dt>
  <dd>Start with HTML basics and page structure.</dd>
  <dd>Then add CSS for styling and JavaScript for interactivity.</dd>
</dl>

Try It Yourself

Design

Styling <dl> with CSS

Browsers apply default spacing to description lists. Customize terms and descriptions with CSS grid, typography, and spacing:

font-weight Bold terms (dt)

margin / padding Indent descriptions (dd)

display: grid Metadata name–value layout

color Distinguish terms from values

dl-styles.css

/* Description list styling */
dl {
  margin: 0;
}

dt {
  font-weight: 600;
  color: #1e40af;
}

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

/* Grid metadata layout */
dl.metadata {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 1rem;
}

Live styled description list

HTML: HyperText Markup Language
CSS: Cascading Style Sheets

A11y

♿ Accessibility

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

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

Author creates a dl list

Open a description list container with dl.

Markup

dt names each term

Add the keyword, label, or name with dt.

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 <dl> element is fully supported in all browsers, including legacy Internet Explorer.

✓ Baseline · Since HTML 4

Semantic description lists everywhere

From legacy Internet Explorer to the latest mobile browsers — the dl element is fully supported for glossaries, metadata, and FAQs.

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

<dl> tag 100% supported

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

Wrap Up

Conclusion

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

View Examples Gallery Try glossary list

Pro Tips

💡 Best Practices

✅ Do

Pair dt with at least one dd
Use for glossaries and metadata
Allow multiple dd when needed
Style terms and values with CSS

❌ Don’t

Use dl for bullet lists (use ul)
Use description lists only for layout
Put dd before its dt
Confuse dl with ol or ul

Summary

Key Takeaways

Knowledge Unlocked

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

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

Core concepts

📖 01

Description List

<dl> groups term–description pairs semantically.

Foundation

🔗 02

dt + dd

Terms in dt, descriptions in dd.

Structure

📝 03

HTML5 Name

Description list—not only dictionary definitions.

Semantics

➕ 04

Multiple dd

Several dd elements can follow one dt.

Pattern

📋 05

Not ul / ol

Use ul for bullets, dl for pairs.

Comparison

🌐 06

Universal Support

Works in every browser, including legacy IE.

Compatibility

❓ Frequently Asked Questions

What is the HTML dl tag used for?

It creates a description list—a group of dt terms and dd descriptions for glossaries, FAQs, and metadata.

What is the difference between dl and ul?

ul is a bulleted list. dl pairs terms with descriptions using dt and dd.

Is dl still called a definition list?

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

Can one dt have multiple dd elements?

Yes. Several dd elements can follow a single dt.

Should I use dl for page layout?

No. Use dl 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 div Tag HTML DOCTYPE

HTML <dl> Tag

What You’ll Learn

Core Syntax

dt & dd Roles

dl vs ul / ol

Glossaries & Metadata

CSS Styling

Production Tips

What Is the <dl> Tag?

📝 Syntax

Syntax Rules

⚡ Quick Reference

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

⚖️ <dl> vs <ul> and <ol>

🧰 Attributes

Examples Gallery

Live Preview

Basic Description List

📚 Common Use Cases

Web Technology Glossary

Metadata Name–Value Pairs

FAQ with Multiple dd

Styling <dl> with CSS

♿ Accessibility

🧠 How <dl> Works

Author creates a dl list

dt names each term

dd provides the description

Clear, semantic lists

Universal Browser Support

Semantic description lists everywhere

Conclusion

💡 Best Practices

✅ Do

❌ Don’t

Key Takeaways

Six truths every developer should know about <dl>

Description List

dt + dd

HTML5 Name

Multiple dd

Not ul / ol

Universal Support

❓ Frequently Asked Questions

🧩 Related HTML Topics

HTML <div> Tag

HTML DOCTYPE

HTML <dd> Tag

Try glossary list

Build Description Lists

About the author

What Is the `<dl>` Tag?

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

⚖️ `<dl>` vs `<ul>` and `<ol>`

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