<dl> / <dt> / <dd>

<dl>
  <dt>Term 1</dt>
  <dd>Description of term 1</dd>
  <dt>Term 2</dt>
  <dd>Description of term 2</dd>
</dl>

sample_dl_dt_dd.html

<!-- Basic description list (glossary) -->
<dl>
  <dt>Variable</dt>
  <dd>A named container that stores a value. You can change the value any number of times during a program.</dd>

  <dt>Function</dt>
  <dd>A named block of code that performs a specific task. You can call it whenever needed and reuse it.</dd>

  <dt>Array</dt>
  <dd>A data structure that lets you store and manage multiple values under a single variable.</dd>
</dl>

<!-- One term with multiple descriptions -->
<dl>
  <dt>JavaScript</dt>
  <dd>A programming language that runs in web browsers.</dd>
  <dd>Can also run server-side using Node.js.</dd>
  <dd>Based on the ECMAScript specification.</dd>
</dl>

<!-- Used as an FAQ -->
<dl>
  <dt>Q. What is the difference between HTML and CSS?</dt>
  <dd>A. HTML defines the structure of a page; CSS handles its visual styling.</dd>

  <dt>Q. What do I need to start programming?</dt>
  <dd>A. A text editor and a browser are all you need to get started.</dd>
</dl>

<!-- Displaying product or profile metadata -->
<dl>
  <dt>Release date</dt>
  <dd>April 1, 2025</dd>

  <dt>Price</dt>
  <dd>$29.80 (tax included)</dd>

  <dt>Supported OS</dt>
  <dd>Windows 10 or later</dd>
  <dd>macOS 12 or later</dd>
</dl>

The description list is rendered in the browser. The <dt> (term) appears at the normal text level, and the <dd> (description) is indented slightly beneath it.

View sample page

Unlike a simple bullet list (<ul> / <li>), <dl> is designed to express paired structures such as term–definition, question–answer, or name–value. It is commonly used for FAQs and glossaries.

You can follow a single <dt> with multiple <dd> elements. You can also write multiple consecutive <dt> elements and close them with a single <dd>. However, the direct children of <dl> must be <dt>, <dd>, or (in HTML 5.2 and later) a <div> used for grouping — no other tags are allowed as direct children.

For <ul> and <ol>, see the ul / ol / li page.

Desktop

Chrome

1 and later ○

Firefox

1 and later ○

Safari

4 and later ○

3 and earlier ×

Edge

12 and later ○

IE

11 ○

10 ○

9 ○

8 ○

7 ○

6 ○

Opera

15 and later ○

14 and earlier ×

Mobile

iOS Safari

3.2 and later ○

Android Browser

4.4 and later ○

4 and earlier ×

Chrome Android

Latest ○

Same support as desktop version

Firefox Android

Latest ○

Same support as desktop version

* Version data based on MDN.

The default style of <dl> is plain, but CSS can turn it into a well-formatted layout for glossaries, FAQs, profiles, and more.

/* Display dl as a horizontal grid (term: description) */
dl {
  display: grid;
  grid-template-columns: max-content 1fr; /* term column fits content, description takes the rest */
  gap: 0.5em 1em;
  margin: 1em 0;
}

dt {
  font-weight: bold;
  color: #333;
}

dd {
  margin: 0; /* reset default indent */
  color: #555;
}

/* Add divider lines between terms and descriptions */
dl.with-border dt,
dl.with-border dd {
  border-bottom: 1px solid #eee;
  padding: 0.5em 0;
}

<!-- Profile display example -->
<dl class="profile">
  <dt>Name</dt>
  <dd>Kazuma Kiryu</dd>

  <dt>Role</dt>
  <dd>Front-end Engineer</dd>

  <dt>Favorite Languages</dt>
  <dd>TypeScript, Python</dd>
</dl>

<dl> is versatile for any content that represents "name-value pairs." Here are situations where <dl> is more appropriate than <ul> or <ol>.