HTML dl Tag - Learn HTML

The HTML <dl> tag defines a description list (formerly called a definition list). It groups together terms and their descriptions as name–value pairs. The <dl> element is the container; inside it, each <dt> tag specifies a term (the name), and each <dd> tag specifies the description of that term (the value).

This page covers when to reach for <dl> instead of an unordered or ordered list, how to group items for styling and microdata, how the markup behaves for accessibility, and runnable examples for the common patterns.

When to use `<dl>`

Use a description list whenever your content is a set of name–value pairs rather than a flat sequence of items. Reach for <dl> for:

Glossaries and dictionaries — a term followed by its definition.
FAQs — each question is a <dt>, each answer is a <dd>.
Metadata — key–value pairs such as Author, Published, Status.
Dialogue or scripts — the speaker is the term, the line spoken is the description.
Product specs — Weight, Dimensions, Material, each with a value.

Prefer a <ul> when items have no inherent order and no associated value, and a <ol> when the order or numbering matters. The defining trait of <dl> is the pairing of a name with one or more values.

Do not use <dl> just to indent text. It carries semantic meaning, and using it for visual layout obscures that meaning. To indent content visually, use the CSS margin or padding property instead.

Syntax

The <dl> tag comes in pairs. The terms and descriptions are written between the opening (<dl>) and closing (</dl>) tags.

Example of the HTML `<dl>` tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <dl>
      <dt>Hypertext</dt>
      <dd>A system of text pages that have cross-references.</dd>
      <dt>Hyperlink</dt>
      <dd>A part of a hypertext document that references another item.</dd>
    </dl>
  </body>
</html>

Try it Yourself »

Multiple terms and descriptions

A single <dt> can have several <dd> descriptions, and several <dt> terms can share one <dd> description. This lets you model synonyms, alternatives, and grouped definitions.

<dl>
  <!-- One term, multiple descriptions -->
  <dt>Firefox</dt>
  <dd>A free, open source, cross-platform web browser.</dd>
  <dd>Developed and maintained by the Mozilla Foundation.</dd>

  <!-- Multiple terms sharing one description -->
  <dt>JS</dt>
  <dt>JavaScript</dt>
  <dt>ECMAScript</dt>
  <dd>The programming language of the web.</dd>
</dl>

Grouping pairs with `<div>`

HTML5 lets you wrap each name–value group in a <div> placed directly inside the <dl>. This is valid markup and is useful when you want to:

apply CSS to a whole pair at once (for example, with Flexbox or Grid),
attach microdata or global attributes such as class or data-* to a single group.

The <div> is the only element other than <dt> and <dd> allowed as a direct child of <dl>.

<dl>
  <div class="row">
    <dt>Name</dt>
    <dd>Ada Lovelace</dd>
  </div>
  <div class="row">
    <dt>Field</dt>
    <dd>Mathematics</dd>
  </div>
  <div class="row">
    <dt>Known for</dt>
    <dd>The first published algorithm for a computer.</dd>
  </div>
</dl>

.row {
  display: flex;
  gap: 1rem;
}
.row dt {
  width: 8rem;
  font-weight: bold;
}

Accessibility

A description list is an accessible way to expose key–value relationships, but only when the markup is used semantically.

<dt> elements have an implicit term role and <dd> elements an implicit definition role, so assistive technologies understand which item is the name and which is the value.
Screen readers typically announce a count, such as "description list, 3 terms," and then read each term followed by its description. Pairing should be obvious from the text alone, so write each <dd> so its relationship to the preceding <dt> is clear out of context.
The optional <div> grouping does not break this. The term and definition roles still apply because the <dt> and <dd> elements remain valid descendants of the <dl>.

Attributes

The <dl> tag supports the Global attributes and the Event Attributes.

How to style the HTML `<dl>` tag

By default, browsers indent each <dd> and stack terms and descriptions vertically. You can reset and restyle them with CSS:

dl {
  margin: 0;
  padding: 0;
}
dt {
  font-weight: bold;
}
dd {
  margin-left: 20px;
}

Practice

Which statements about the HTML dl tag are correct?

The dl tag creates a description list of term and value pairs.The dl tag is used to create a dropdown list in HTML.The dt tag specifies a term and the dd tag specifies its description inside a dl.The dl tag cannot be combined with any other tags.A div can group a dt and dd pair as a direct child of dl in valid HTML5.A single dt can only ever have exactly one dd.

When to use <dl>