Description Lists: When to Use Them

If you’re just starting with HTML, you probably know about headings, paragraphs, and maybe bullet lists. But there’s another type of list that’s perfect for pairing terms with their meanings: description lists.

In this article, you’ll learn:

What a description list is
When you should (and shouldn’t) use one
How to write simple, clean HTML using description lists
How to practice with easy examples

By the end, you’ll be able to look at a piece of content and confidently say, “Yes, that should be a description list.”

What is a Description List?

A description list is an HTML structure for showing a term and its description.

For example:

A word and its definition
A product name and its price
A question and its answer

In HTML, description lists use three tags:

<dl> — description list (the container)
<dt> — description term (what you’re describing)
<dd> — description description (the explanation of the term)

So the basic pattern looks like this:

<dl>
  <dt>Term</dt>
  <dd>Description of that term</dd>
</dl>

Think of <dl> as the box, <dt> as the label, and <dd> as the explanation.

When Should You Use a Description List?

Use a description list when you have pairs (or groups) of:

Term → Description
Name → Details
Label → Value

Description lists are great when:

You want to show a list of definitions.
You want to show properties of something (like a product’s size, color, price).
You have FAQ-style content (questions and answers).

Avoid description lists when:

You just need a normal list of items (like steps or bullet points). Use <ul> or <ol> instead.
You need tabular data with rows and columns. Use <table> instead.

A handy rule: If each item naturally has a “label: value” structure, a description list is probably a good fit.

Example 1: A Simple Glossary

Let’s start with the most common use: a glossary of terms.

<!-- A simple glossary using a description list -->
<dl>
  <dt>HTML</dt>
  <dd>The standard language used to create web pages.</dd>

  <dt>CSS</dt>
  <dd>The language used to style and visually design web pages.</dd>

  <dt>JavaScript</dt>
  <dd>A programming language that makes web pages interactive.</dd>
</dl>

What’s happening here?

<dl> wraps the whole list.
Each <dt> line is a term (HTML, CSS, JavaScript).
Each <dd> line is the description for the term just above it.

Expected result in the browser:

You’ll see “HTML” in bold (or slightly styled), with its description on the next line.
The same pattern repeats for CSS and JavaScript.

Try it yourself

Open a simple .html file in a text editor.
Paste the code above inside the <body> tag.
Change the terms to words you’re learning (for example, “Variable”, “Function”, “Loop”).
Refresh the page and see your own glossary.

You’ve just built a small, structured dictionary—nice work.

Example 2: Product Details (Label → Value)

Description lists are also perfect for product or item details. Instead of using a table for simple label/value pairs, a description list often reads more naturally.

<!-- Product details using a description list -->
<h2>Wireless Headphones</h2>

<dl>
  <dt>Price</dt>
  <dd>$79.99</dd>

  <dt>Battery Life</dt>
  <dd>20 hours</dd>

  <dt>Connectivity</dt>
  <dd>Bluetooth 5.2</dd>

  <dt>Warranty</dt>
  <dd>2 years</dd>
</dl>

What this does:

The heading <h2> gives the product name.
Each <dt> is a property (Price, Battery Life, etc.).
Each <dd> is the value for that property.

How it looks:

You’ll see each label on one line, with the value on the next (styling may vary by browser).

This structure is clear both for humans and for assistive technologies like screen readers, which helps with accessibility.

Try it yourself

Take something from your own life—a laptop, a phone, a game—and list its details:

Brand
Model
Year
Color
Main feature

Turn that into a description list. This is a simple way to practice thinking in term → description pairs.

Example 3: FAQ (Questions and Answers)

Another great use for description lists is an FAQ section (Frequently Asked Questions).

<!-- Simple FAQ using a description list -->
<h2>FAQ</h2>

<dl>
  <dt>Do I need to know coding to start learning HTML?</dt>
  <dd>No. HTML is a great first step, and you can learn it without any prior coding experience.</dd>

  <dt>Is HTML enough to build a whole website?</dt>
  <dd>HTML handles the structure. For design, you’ll use CSS, and for interaction, you’ll often add JavaScript.</dd>

  <dt>How long does it take to learn basic HTML?</dt>
  <dd>You can learn the basics in a few hours of focused practice.</dd>
</dl>

Why this works well:

Each <dt> is a question.
Each <dd> is the answer to that question.

This keeps your Q&A pairs clearly connected in the code, which is helpful when pages grow larger.

Try it yourself

Write your own mini-FAQ:

3–5 questions about any topic (maybe your favorite hobby).
Put each question in <dt> and each answer in <dd>.

You’ve just used description lists as a simple content-building tool.

Multiple Descriptions for One Term

Sometimes, a single term needs more than one description. Description lists handle that nicely—you can have multiple <dd> elements under one <dt>.

<!-- One term with multiple descriptions -->
<dl>
  <dt>HTML</dt>
  <dd>Defines the structure of a web page.</dd>
  <dd>Works together with CSS and JavaScript.</dd>
  <dd>Is written using tags like <code>&lt;p&gt;</code>, <code>&lt;h1&gt;</code>, and <code>&lt;a&gt;</code>.</dd>
</dl>

What this shows:

One term (HTML).
Several descriptions, each adding more detail.

Use this pattern when you want to list multiple facts or notes about the same thing.

When NOT to Use Description Lists

To keep things clear, here are a few situations where a description list is not the right tool:

Steps in a process
Example: “Step 1: Open the app. Step 2: Log in.”
→ Use an ordered list (<ol> and <li>) because order matters.
Simple bullet points
Example: a list of your favorite movies.
→ Use an unordered list (<ul> and <li>).
Complex data with rows and columns
Example: sales data for multiple months and regions.
→ Use a table (<table>, <tr>, <th>, <td>).

When in doubt, ask yourself: Is there a clear “term → description” pattern? If yes, description lists are likely a good fit.

Styling Description Lists (Optional Next Step)

By default, description lists are plain. That’s okay when you’re learning. Later, you can make them look nicer using CSS.

Here’s a tiny taste (no need to fully understand CSS yet):

<style>
  dl {
    max-width: 400px;
  }

  dt {
    font-weight: bold;
    margin-top: 0.75rem;
  }

  dd {
    margin-left: 1rem;
    margin-bottom: 0.5rem;
  }
</style>

Place this inside the <head> of your HTML file to see how it changes the spacing and appearance.

Quick Recap and What’s Next

You’ve just learned:

A description list uses <dl>, <dt>, and <dd>.
It’s perfect for term → description pairs like glossaries, product details, and FAQs.
You can have multiple descriptions for one term.
Use other structures (lists or tables) when you don’t have a clear label/value pattern.

If you’ve followed the “Try it yourself” steps, you’ve already:

Built a small glossary
Listed product-style details
Created a mini FAQ

Those are real, practical building blocks for web pages. Learning HTML is a series of small wins like this—each tag you understand gives you more power to structure your content clearly.

Next steps you can take:

Combine description lists with headings and paragraphs to make a simple info page.
Experiment with adding CSS to change spacing and fonts.
Look at websites you visit and ask: Would a description list work well for any of this content?

You’re on the right track. Keep experimenting, keep viewing your pages in the browser, and let each small improvement boost your confidence.

Mudzinga