HTML Description List Definition: The `<dd>` Tag

HTML <dd> Tag

The <dd> tag is used to define the description, definition, or value of a term within a description list (<dl>). It's a fundamental element for creating semantic and structured lists where each term (<dt>) is associated with a corresponding description.

Syntax

<dd>Description text</dd>

Attributes

The <dd> tag supports the Global Attributes in HTML.

Example

<dl>
  <dt>Coffee</dt>
  <dd>A hot beverage made from roasted coffee beans.</dd>

  <dt>Tea</dt>
  <dd>A popular drink made by steeping the leaves of the tea plant.</dd>
</dl>

More Examples

Basic Use Case

This example demonstrates a typical definition list where each term has a corresponding description.

<dl>
  <dt>HTML</dt>
  <dd>Hypertext Markup Language, the foundation of web pages.</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets, used for styling and layout.</dd>

  <dt>JavaScript</dt>
  <dd>A scripting language for interactive web content.</dd>
</dl>

Multiple Descriptions for One Term

A single term can have multiple descriptions using multiple <dd> tags:

<dl>
  <dt>Apple</dt>
  <dd>A round fruit with red, green, or yellow skin.</dd>
  <dd>A large tech company known for its innovative products.</dd>
</dl>

Nested Lists within Descriptions

You can also nest other lists or elements within the <dd> for more complex structuring.

<dl>
  <dt>Web Development Tools</dt>
  <dd>
    <ul>
      <li>Code Editor</li>
      <li>Browser</li>
      <li>Version Control System</li>
    </ul>
  </dd>
  <dt>Web Design</dt>
  <dd>The process of planning, creating and maintaining website.</dd>
</dl>

Using Styles on Description

You can apply styles to the <dd> using classes and CSS:

<style>
  .custom-description {
    margin-left: 30px;
    font-style: italic;
    color: #555;
  }
</style>

<dl>
  <dt>Example Term</dt>
  <dd class="custom-description">This is a description with custom styling.</dd>
</dl>

Browser Support

The <dd> tag is supported in all modern browsers.
| Browser | Version |
| — | — |
| Chrome | Yes |
| Edge | Yes |
| Firefox | Yes |
| Safari | Yes |
| Opera | Yes |

Notes and Tips

• The <dd> tag must be placed inside a <dl> tag and should be preceded by a <dt> tag.
• It is semantically important to use description lists correctly, as they convey a clear relationship between terms and their descriptions.
• Avoid using <dd> tags for purposes other than defining descriptions within a description list, this will lead to improper HTML structure.
• Multiple <dd> tags can follow a single <dt> tag, allowing you to add multiple definitions or details for one term.
• Use CSS to control the visual appearance of <dd> elements, but avoid using styles to create layout effects which should ideally be done through proper semantic HTML.
• Description lists are particularly useful for glossaries, FAQ pages, or any other content where you have terms and associated descriptions.