Using the HTML `<dd>` Element to Create Clear and Concise Descriptions

Learn how to create well-structured description lists in HTML using the `<dd>` (description definition) element. This tutorial explains how to use `<dd>` within `<dl>` (description list) and `

` (description term) elements to present definitions and explanations clearly, improving the readability and accessibility of your web content.

Using the HTML `<dd>` Element to Define Descriptions

Understanding the `<dd>` Element

In HTML, the `<dd>` (description definition) element is used to provide a description or definition for a term within a description list. Description lists are created using the `<dl>` (description list) tag, with terms defined using `<dt>` (description term) tags and their corresponding descriptions in `<dd>` tags. This structured approach is ideal for presenting definitions, glossaries, or any situation requiring clear association between terms and their explanations. The descriptions are visually set apart from the terms to improve readability.

Using the `<dd>` Element

The `<dd>` element is always used within a `<dl>` element, and each `<dd>` element should follow a `<dt>` (description term) element. You can include various HTML elements inside a `<dd>` tag (paragraphs, images, lists, etc.) to create rich and informative descriptions.

Example: Basic Description List


<dl>
  <dt>Coffee</dt>
  <dd>A hot, caffeinated drink.</dd>
  <dt>Milk</dt>
  <dd>A dairy beverage.</dd>
</dl>

Browser Support for `<dd>`

The `<dd>` element is supported by all major modern browsers.

Browser	Support
Chrome	Yes
Edge	Yes
Firefox	Yes
Opera	Yes
Safari	Yes

Default Styling and CSS Customization

Browsers generally render `<dd>` elements with some default styling (often indentation). You can customize this using CSS. For example:

Example: Custom CSS for `<dd>`


dd {
  margin-left: 40px; /* Adjust as needed */
}