References

Beginner-friendly references for web development, with live, editable examples.

The HTML <dl> tag

Element All modern browsers Updated
Quick answer

The HTML <dl> element represents a description list — a series of term (<dt>) and description (<dd>) pairs. Ideal for glossaries, metadata, FAQs and key-value information.

Overview

The <dl> (description list) element groups terms and their descriptions. Each term goes in a <dt> and its description in one or more <dd> elements that follow it.

It suits any name-and-value content: glossaries, metadata blocks, FAQ-style term lists, and key-value pairs like product specifications. The relationship is flexible — a single term can have several descriptions, and several terms can share one description.

It is not a layout tool, but it styles beautifully: a common modern pattern is a two-column grid with terms on the left and descriptions on the right. Reach for it whenever your content is genuinely a set of name-value pairs rather than a sequence or a flat list.

Syntax

<dl>
  <dt>HTML</dt>
  <dd>The structure of web pages.</dd>
</dl>

Example

Live example 
<dl>
  <dt>CSS</dt>
  <dd>Styles the presentation of web pages.</dd>
  <dt>JS</dt>
  <dd>Adds interactivity.</dd>
</dl>

Best practices

  • Use <dl> for name-and-value content — glossaries, metadata, specifications.
  • Put each term in a <dt> and each description in a <dd>.
  • Remember a term can have multiple descriptions and a description can follow multiple terms.
  • Style it as a two-column grid for a clean term/description layout.

Frequently asked questions

What is the dl element?
A description list that groups terms (<dt>) with their descriptions (<dd>).
What is a description list used for?
Name-and-value content such as glossaries, metadata blocks and key-value pairs like product specs.
Can a term have more than one description?
Yes. A <dt> can be followed by several <dd> elements, and a description can follow multiple terms.
How do I style a description list?
CSS gives full control — a two-column grid with terms and descriptions is a common, clean pattern.
div dt