<dt> Description term

A term, name or question in a dl.

<dt> holds the term, name or question in a <dl>. One or more <dd> elements follow it with the description.

Text and inline elements are fine inside it. Headings and sectioning elements are not. To mark the term as the word being defined, put a <dfn> inside.

How several terms can share one description is explained under the dt element in the HTML Living Standard (opens in a new tab). The full list structure is on the dl element page.

Syntax

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

When to use it

A <dt> is the label half of a pair. In a spec sheet it holds the field name (Weight, Battery). In a short FAQ it holds the question, in a cast list the actor, in a glossary the word. Keep it short, because the dd after it does the explaining.

Defining a term for the first time in the document? Put a dfn inside the dt to mark the defining instance. For a bold label in running text, a strong is enough; there is no need to build a description list.

Consecutive dt elements share the dd elements after them. Forget one dd and two terms silently merge into one group: leave out the value for Weight, and browsers and screen readers treat Weight and Battery as two names for the battery value. Check that each term is followed by its own description.

Live example

Edit the code and watch the preview.

<dl>
  <dt>Author</dt>
  <dd>Ana Lopez</dd>
  <dt>Published</dt>
  <dd><time datetime="2026-03-01">1 March 2026</time></dd>
</dl>

More examples

Short FAQ

Questions are dt elements and answers are dd elements. A shop page with five or six short questions stays compact this way, and one CSS rule makes all the questions bold.

<style>
dt{font-weight:bold;margin-top:.5em}
</style>
<dl>
  <dt>Do you ship abroad?</dt>
  <dd>Yes, to most countries in Europe.</dd>
  <dt>How long does delivery take?</dt>
  <dd>Three to five working days.</dd>
  <dt>Can I return an item?</dt>
  <dd>Yes, within 30 days of delivery.</dd>
</dl>

Glossary with defined terms

A dfn inside each dt marks where the term is defined, and an abbr spells out the abbreviation. You could mark up the glossary at the end of a technical article like this.

<dl>
  <dt><dfn>Viewport</dfn></dt>
  <dd>The visible area of a web page on the screen.</dd>
  <dt><dfn><abbr title="Search Engine Optimization">SEO</abbr></dfn></dt>
  <dd>Improving a page so search engines can find and rank it.</dd>
</dl>

Tip: Follow each dt with at least one dd.

Browser support

All browsers support dt and render it as a plain block. The indent goes on the dd. You may leave out the closing tag when another dt or dd follows, but writing </dt> reads better and saves you surprises when you edit the list later.

Accessibility

Keep dt terms short and clear on their own, since some users move through the list one item at a time. Why the pairing has to live in the markup is covered in the W3C note Understanding Info and Relationships (opens in a new tab).

Common mistakes

Wrong

<dl>
  <dt><h3>Price</h3></dt>
  <dd>19 USD</dd>
</dl>

Right

<dl>
  <dt>Price</dt>
  <dd>19 USD</dd>
</dl>

A dt cannot contain any heading.

Frequently asked questions

Can a dt have more than one dd?

Yes. A group can have one or more <dt> elements followed by one or more <dd> elements. A dictionary word with two meanings gets one dt and two dd elements. Synonyms that share a definition go the other way: several dt elements and one dd.

Can I put a heading inside a dt?

No. <dt> takes flow content minus headings, sectioning content, <header> and <footer>. If the terms belong in the page's heading outline, drop the description list and use headings with paragraphs. Or keep the dt and make it look like a heading with CSS.

Related lists elements