Description Lists: <dl>, <dt>, and <dd>

A description list is a different kind of list — not a collection of equal items, but a set of terms paired with their definitions or descriptions. HTML uses three elements for this: <dl>, <dt>, and <dd>.

The three elements

• <dl> — description list — the container
• <dt> — description term — the label, name, or key
• <dd> — description details — the definition, explanation, or value

<dl>
  <dt>Trailhead</dt>
  <dd>The starting point of a hiking trail, often marked with a sign or parking area.</dd>

  <dt>Switchback</dt>
  <dd>A sharp zigzag in a trail used to reduce the steepness of a climb.</dd>
</dl>

The browser renders <dt> elements bold and <dd> elements indented by default (visual styling comes from CSS later).

Multiple <dd> for one <dt>

A single term can have more than one definition:

<dl>
  <dt>Elevation gain</dt>
  <dd>The total amount of uphill climbing on a trail.</dd>
  <dd>Often listed in feet or meters in trail guides.</dd>
</dl>

Multiple term-definition pairs

A single <dl> can hold many pairs:

<dl>
  <dt>Trail rating: Easy</dt>
  <dd>Generally flat, well-maintained, under 5 miles round trip.</dd>

  <dt>Trail rating: Moderate</dt>
  <dd>Some elevation change, may be longer or rougher terrain.</dd>

  <dt>Trail rating: Strenuous</dt>
  <dd>Significant elevation gain, longer distance, or difficult footing.</dd>
</dl>

When to use a description list

<dl> is not a substitute for <ul> or <ol>. Use it specifically when content is structured as name–value pairs:

Good use case	Example
Glossary	Term and its definition
FAQ	Question and its answer
Metadata	Author: Jane Smith
Specs or attributes	Weight: 2.4 kg

If items are not paired — just a list of things — use <ul> or <ol>.

Inside semantic structure

Like any content, <dl> belongs inside the appropriate container:

<section>
  <h2>Trail Glossary</h2>
  <dl>
    <dt>Blaze</dt>
    <dd>A painted mark on a tree or rock that indicates the trail route.</dd>

    <dt>Cairn</dt>
    <dd>A stack of rocks used to mark a trail, especially above the tree line.</dd>
  </dl>
</section>

Exercise

Open index.html in VS Code.

Add a new <section> inside <main> that uses a <dl> to present a small glossary or set of facts related to your page’s topic.

1. Add a new <section> after your existing sections.
2. Give it a heading: <h2>Key Terms</h2> (or a heading that fits your topic).
3. Inside the section, add a <dl> with at least three term-definition pairs.

Example:

<section>
  <h2>Key Terms</h2>
  <dl>
    <dt>Trailhead</dt>
    <dd>The starting point of a hiking trail.</dd>

    <dt>Switchback</dt>
    <dd>A zigzag section of trail that reduces the grade of a steep slope.</dd>

    <dt>Leave No Trace</dt>
    <dd>A set of outdoor ethics focused on minimizing impact on natural environments.</dd>
  </dl>
</section>

4. Save and open index.html in your browser. The terms should appear bold and the definitions indented below them.

Recap

• <dl> is the description list container.
• <dt> is the term or label.
• <dd> is the definition or value.
• One <dt> can have multiple <dd> elements.
• Use <dl> for name–value pairs: glossaries, FAQs, metadata, specs.
• Do not use <dl> as a replacement for <ul> or <ol>.