Creating Description Lists with the HTML `<dl>` Element: Structuring Term-Definition Pairs

Learn how to create and style description lists in HTML using the `<dl>`, `<dt>`, and `<dd>` elements. This tutorial explains their usage, demonstrates creating term-definition pairs, and shows how to enhance the presentation of description lists using CSS for improved readability and visual appeal.

Creating Description Lists with the HTML `<dl>` Element

Understanding Description Lists

HTML description lists are a way to present terms and their definitions or descriptions. They're particularly useful for creating glossaries, dictionaries, or any situation where you need to clearly associate terms with their meanings. Description lists use a structured approach, making information easier to scan and understand than using a simple list.

Building a Description List

Description lists use three HTML elements:

• <dl>: The container for the entire description list.
• <dt>: Defines a description term (the term being defined).
• <dd>: Provides the description or definition of the term.

<dl>
  <dt>Coffee</dt>
  <dd>A caffeinated beverage.</dd>
  <dt>Tea</dt>
  <dd>An infused beverage.</dd>
</dl>

Each `<dt>` element is a term, and the following `<dd>` element is its description. You can have multiple term-description pairs within a single `<dl>` element.

Browser Support and Default Styling

The `<dl>`, `<dt>`, and `<dd>` elements are supported by all major modern browsers. Browsers typically render description lists with the terms styled distinctly from the descriptions.

You can customize the appearance of description lists using CSS.