HTML Description Lists: `<dl>`, `<dt>`, and `<dd>` Explained

Learn how to create HTML description lists using `<dl>`, `<dt>`, and `<dd>` tags. Perfect for defining terms and their meanings, this tutorial provides a clear explanation and example code for creating structured key-value pairs in your HTML.

HTML Description Lists

In addition to unordered and ordered lists, HTML provides description lists, perfect for presenting terms and their definitions or explanations. They're a structured way to present key-value pairs.

Creating Description Lists

Description lists are built using three elements:

<dl>: The description list container.
<dt>: Defines a description term (the name or key).
<dd>: Defines the description of the term (the value or definition).

Example: Description List


<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

Output

            Coffee
            - black hot drink

            Milk
            - white cold drink

Summary Table

Tag	Description
`<dl>`	Defines a description list.
`<dt>`	Defines a term in a description list.
`<dd>`	Describes the term (definition).