HTML Academy · Lesson

Description Lists dl dt dd

Mark up term-definition pairs with description lists.

Description Lists dl dt dd is a free HTML Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What Is a Description List?

A description list groups terms with their descriptions:

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language — the structure of the web.</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets — the presentation of the web.</dd>

  <dt>JavaScript</dt>
  <dd>The programming language of the web.</dd>
</dl>

The dl, dt, and dd Elements

Three elements make up a description list:

<dl> — description list container
<dt> — description term (the key)
<dd> — description details (the value)

Multiple dd per dt

One term can have multiple descriptions:

<dl>
  <dt>HTML</dt>
  <dd>Stands for HyperText Markup Language.</dd>
  <dd>First published as HTML 2.0 in 1995.</dd>
  <dd>Current version: HTML5 (Living Standard).</dd>
</dl>

Multiple dt per dd

Multiple terms can share one description (synonyms, aliases):

<dl>
  <dt>Username</dt>
  <dt>Login</dt>
  <dt>Handle</dt>
  <dd>The unique identifier used to log in to your account.</dd>
</dl>

Real-World Use Cases

Description lists are perfect for:

Glossaries and definitions
FAQ sections (question → answer)
Product metadata (Author: Jane, Published: 2024)
Recipe details (Prep time: 10 min, Serves: 4)
API parameter documentation

FAQ with dl

Build an FAQ with description lists:

<dl class="faq">
  <dt>Is HTML a programming language?</dt>
  <dd>No. HTML is a markup language. It defines structure and meaning, not logic or computation.</dd>

  <dt>Do I need to close void elements?</dt>
  <dd>In HTML5, void elements like &lt;img&gt; and &lt;br&gt; do not need a closing slash.</dd>
</dl>

dl for Metadata

Display article or product metadata:

<article>
  <h1>Responsive Images Guide</h1>

  <dl class="metadata">
    <dt>Author</dt>
    <dd>Jane Smith</dd>

    <dt>Published</dt>
    <dd><time datetime="2024-03-15">March 15, 2024</time></dd>

    <dt>Reading time</dt>
    <dd>8 minutes</dd>
  </dl>
</article>

Styling dl

Style description lists with CSS:

/* Two-column layout */
dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem 1rem;
}

dt {
  font-weight: bold;
  color: #555;
}

dd {
  margin: 0;  /* Remove browser default dd margin */
}

Nesting dl

Description lists can be nested for hierarchical definitions:

<dl>
  <dt>HTML Elements</dt>
  <dd>
    <dl>
      <dt>Block elements</dt>
      <dd>Take full width: div, p, h1-h6</dd>
      <dt>Inline elements</dt>
      <dd>Flow with text: span, a, strong</dd>
    </dl>
  </dd>
</dl>

dl vs table for Key-Value

When to use <dl> vs <table> for key-value data:

dl — associations between terms and descriptions (name-value pairs)
table — tabular data with rows and columns (multiple attributes per item)

<dl>
  <dt>Name</dt><dd>Jane</dd>
  <dt>Role</dt><dd>Developer</dd>
</dl>
<!-- vs table for multiple users with same attributes -->

Divs Inside dl

Wrapping dt/dd groups in <div> inside <dl> is valid HTML5:

<dl>
  <div>
    <dt>HTML</dt>
    <dd>Markup language for web pages.</dd>
  </div>
  <div>
    <dt>CSS</dt>
    <dd>Styling language for web pages.</dd>
  </div>
</dl>
<!-- Useful for zebra-striping or grouping with CSS -->

Quick Check

Which element contains the definition/value in a description list?

Recap: Description Lists

Description list essentials:

<dl> — description list container
<dt> — term (key, question, name)
<dd> — description (value, answer, definition)
One dt can have multiple dd; multiple dt can share one dd
Perfect for glossaries, FAQs, and metadata
Wrap groups in <div> for styling flexibility

Frequently asked questions

Is the “Description Lists dl dt dd” lesson free?

Yes — the full text of “Description Lists dl dt dd” is free to read here on the web, and the HTML Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML Academy course, upgrade to CoddyKit PRO.

What will I learn in “Description Lists dl dt dd”?

Mark up term-definition pairs with description lists. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start HTML Academy?

No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Description Lists dl dt dd” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this HTML Academy lesson?

Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to HTML Academy