Description Lists

HTML data structures

Description lists connect terms with details.

A description list uses dl, dt and dd. It is useful for glossaries, metadata, specifications, key-value pairs and compact explanations.

A dt is the term or label. A dd is the description or value. A single term can have multiple descriptions, and multiple terms can share one description.

Use description lists when labels and details belong together. Do not use them only because you want a two-column layout.

dl

The description list wrapper.

dt

The term, name or label.

dd

The description, value or explanation.

metadata

A common use case for compact label-value information.

Syntax and structure

Pair dt labels with dd details.

Description lists are excellent for definitions, specs and structured metadata.

Course glossary

<dl>
  <dt>HTML</dt>
  <dd>The structure and meaning of a web page.</dd>
  <dt>CSS</dt>
  <dd>The visual styling of that structure.</dd>
</dl>

Labels and values as random paragraphs

<p><strong>HTML:</strong> The structure of a page.</p>
<p><strong>CSS:</strong> The visual styling.</p>

Rules that matter

Data HTML should preserve relationships, not only appearance.

Tables and lists are small elements with big structural value. They help users scan, compare, follow steps and understand how pieces of information belong together.

Use for term-detail relationships

The list should connect labels and explanations.

Do not force layout

If the content is not label-value data, a dl may be the wrong element.

Allow multiple dd items

One dt can have more than one detail when needed.

Keep labels clear

A dt should be concise enough to act as a label.

Style with CSS grid if needed

Two-column appearance belongs in CSS, not fake markup.

Use for specs and metadata

Product specs, course facts and glossaries are strong use cases.

Production thinking

Structured data markup affects accessibility, SEO and maintainability.

Why does this matter?

This matters because many pages contain small structured facts. A description list gives those facts real relationships.

Accessibility

Description lists communicate that labels and descriptions are connected, which is stronger than separate paragraphs.

Production note

Use dl for compact content such as product details, account metadata, API facts and course glossary sections.

SEO note

Clear label-detail content can help users and crawlers understand definitions, specifications and structured page facts.

Live code lab

Change the code and run the example.

Edit the HTML or CSS, then use Run to refresh the preview. The preview is isolated, so links and forms stay inside this practice area.

Mini assignment

Try this now.

Add one extra dt and dd pair.
Add a second dd under one dt.
Change the CSS grid width for the label column.

Practice assignment

Do this before moving to the next lesson.

Create a glossary with at least four terms.
Create a metadata block with label-value pairs.
Explain why dl fits better than paragraphs here.

HTML CSS

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  font-family: Inter, system-ui, sans-serif;
  background: #07111f;
  color: white;
}

.demo-card {
  width: min(820px, calc(100% - 32px));
  padding: 34px;
  border-radius: 24px;
  background: #101a2d;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
}

h1 {
  margin: 0 0 18px;
  font-size: clamp(32px, 6vw, 54px);
  line-height: 1;
}

table {
  width: 100%;
  border-collapse: collapse;
  color: #f7f7f4;
}

caption {
  caption-side: top;
  margin-bottom: 12px;
  color: #8cffc1;
  font-weight: 900;
  text-align: left;
}

th, td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  padding: 13px 14px;
  text-align: left;
  vertical-align: top;
}

th {
  color: #8cffc1;
  font-weight: 900;
}

ul, ol {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 24px;
  color: #cfd8e6;
}

li::marker {
  color: #8cffc1;
  font-weight: 900;
}

dl {
  margin: 0;
}

.fact-list { display: grid; grid-template-columns: 130px 1fr; gap: 10px 16px; }
.fact-list dt { color: #8cffc1; font-weight: 900; }
.fact-list dd { margin: 0; color: #cfd8e6; }

Live preview

Self-check

Before you continue, prove that you own this lesson.

Intermediate

Do not only read this page. Answer these questions out loud or write the answers in your own notes. If one answer feels vague, revisit the examples before moving on.

Can you explain what problem this lesson solves in a real website?
Can you identify the most important tag or attribute from this lesson?
Can you name one accessibility mistake this lesson helps prevent?
Can you write one good example and one weak example without copying the page?
Can you explain when you would use this in production and when you would avoid it?