Menu
Lists & Tables

<dl>, <dt>, <dd>

Description lists for term/definition pairs.

1Description Lists

<dl> contains <dt> (term) and <dd> (description) pairs. Great for glossaries, FAQs, or metadata.

Example Code
css
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

2Put the element in context

A description list pairs terms with descriptions, making it suitable for a short glossary or a set of metadata labels. It does not have to behave like a two-column table. Keep the relationship clear when the presentation becomes a stacked mobile layout.

3Practice with a small page

Create three glossary terms with explanations using dt and dd. Style them as columns, then stack them at a narrow width. Check that every description remains associated with the correct term in the source order.

Finished reading?

Mark this topic as complete to track progress.

Previous
<ol> Ordered List
Next Topic
<table>, <tr>, <th>, <td>