HTML dd Tag - Learn HTML

The HTML <dd> tag (description details) supplies the description for a term in a description list. It works only inside a <dl> (description list), paired with one or more <dt> (description term) elements that name what is being described.

The grouping inside a <dl> is flexible — you can have:

one term followed by one description,
one term followed by several descriptions,
several terms (synonyms) followed by one description,
several terms followed by several descriptions.

The <dd> element can contain other content: paragraphs, lists, images, links, and so on. It is placed within <body>, as a child of <dl>. By default browsers indent <dd> with a left margin so the description sits visually under its term.

When to use a description list

Use <dl>/<dt>/<dd> for name-value pairs — content where each item is a label and an associated description. Good fits include:

Glossaries — a word and its meaning.
FAQs — a question (<dt>) and its answer (<dd>).
Product spec sheets / metadata — properties such as "Weight", "Material", "SKU" and their values.

Do not reach for a description list just because you want indentation, or for an arbitrary sequence of items with no label. For ordered steps use an ordered list (<ol>); for a plain set of items use an unordered list (<ul>). Pick a description list only when each entry genuinely is a term paired with a description.

Syntax

The <dd> tag comes in pairs. The content is written between the opening (<dd>) and closing (</dd>) tags, and it must sit inside a <dl> following one or more <dt> elements.

Example: a glossary

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Coffee glossary</h1>
    <dl>
      <dt>Espresso</dt>
      <dd>A concentrated coffee brewed by forcing hot water through finely-ground beans.</dd>
      <dt>Latte</dt>
      <dd>Espresso with a large amount of steamed milk and a light layer of foam.</dd>
      <dt>Americano</dt>
      <dd>Espresso diluted with hot water for a lighter, longer drink.</dd>
    </dl>
  </body>
</html>

Try it Yourself »

Example: a product spec sheet

A single term can also have several <dd> descriptions, and several <dt> terms can share one <dd>:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Backpack specifications</h2>
    <dl>
      <dt>Capacity</dt>
      <dd>28 liters</dd>
      <dt>Material</dt>
      <dd>Recycled polyester</dd>
      <dd>Water-resistant coating</dd>
      <dt>Color</dt>
      <dt>Colour</dt>
      <dd>Charcoal grey</dd>
    </dl>
  </body>
</html>

Try it Yourself »

Accessibility

The <dd> element has an implicit ARIA role of definition, and <dt> has the role term. Assistive technologies use the <dl> structure to announce each description together with the term it belongs to, so keeping the markup semantic (rather than faking a list with <div>s and CSS) makes the content easier to navigate. Do not add an explicit role attribute — the implicit role is already correct.

Attributes

The <dd> tag has no element-specific attributes. It supports only the Global Attributes and the Event Attributes.

How to style an HTML `<dd>` tag

Browsers apply a default left margin (typically 40px) to <dd>. You can remove or replace it with CSS — for example, drop the indent and add your own padding and styling:

dd {
  margin-left: 0;      /* remove the default left indent */
  padding-left: 1rem;  /* add your own spacing instead */
  color: #555;
}

dt {
  font-weight: bold;
}

Practice

What is the function of the dd tag in HTML?

It provides the description for a term in a description list.It names the term being described in a description list.It creates an ordered list of steps.It defines a hyperlink to another page.It adds video content to a webpage.