Description Lists in HTML

If you have been following along with this HTML series, you have already learned to build unordered lists with bullets and ordered lists with numbered steps. Both are genuinely useful. Both show up constantly in real websites.

But HTML has a third list type. One that barely gets a mention in most beginner tutorials. One that gets skipped, glossed over, or reduced to a single paragraph in a long reference guide. And when you finally understand what it’s for and when to reach for it, you will realize you have been missing a solid, semantic tool this whole time.

The description list. It’s built from three tags: <dl>, <dt>, and <dd>. And it’s designed for a very specific kind of content, content that comes in pairs. A term and its definition. A question and its answer. A label and its value.

I’ll be honest: I barely touched this one for a long time. When I was first learning HTML, every tutorial I found either skipped <dl> entirely or gave it one quick paragraph before moving on. It wasn’t until I needed to build a proper FAQ section that the html dl tag finally clicked for me. And when it did, I went back and rewrote parts of several projects with it.

Today, we’re going through it properly.

---

01What Is a Description List in HTML?

A description list is a list of paired items. Every item in the list has two parts: a term and a description that belongs to it.

Think about a dictionary. You have a word on one line. Below it, the definition. Or think about a product spec sheet: “Weight” on the left, “1.4 kg” on the right. Or a FAQ page: the question, then the answer below it.

All of those patterns share something: there’s a key, and there’s a value that belongs to it. That relationship, a term paired with its description, is exactly what the <dl> element is built for.

This is different from <ul> and <ol>. Those are for collecting items, things you might list with bullets or number in a sequence. The <dl> is about relationships. Every entry in the list is a pair, not just a standalone item.

---

02The Three Tags That Power It All

Before we write any code, let me introduce each tag clearly. These three always work together, and none of them makes much sense without the context of the other two.

The <dl> Tag: Your Container

The html dl tag is the wrapper element. It creates the description list and holds everything inside it.

<dl>
  <!-- dt and dd elements go here -->
</dl>

It’s a block-level element, just like <ul> and <ol>. On its own, it doesn’t render anything visual. But it tells the browser, screen readers, and search engines: “here is a list of term-description pairs.”

The html dt Tag: The Term

<dt> stands for “description term.” This is the label, the key, the word being defined, or the question being asked.

<dl>
  <dt>CSS</dt>
</dl>

By default, the html dt tag renders at normal text size with no bullet or number. It just sits there, looking like regular text, until you style it. The semantic meaning is what counts.

The html dd Tag: The Description

<dd> stands for “description details.” This is the value, the definition, the answer. It pairs with the <dt> directly above it.

<dl>
  <dt>CSS</dt>
  <dd>A language used to style and visually format HTML elements on a web page.</dd>
</dl>

By default, browsers add left indentation to <dd> elements. This visual offset communicates that the description “belongs” to the term above it. It’s a browser default you can override with CSS whenever you want.

Here’s a visual breakdown of how the three elements fit together:

---

03Writing Your First Description List

Let’s build one from scratch. Three web technology terms, each with a definition:

<dl>
  <dt>HTML</dt>
  <dd>A markup language for structuring content on the web.</dd>

  <dt>CSS</dt>
  <dd>A language for styling and visually formatting HTML elements.</dd>

  <dt>JavaScript</dt>
  <dd>A programming language that adds interactivity to web pages.</dd>
</dl>

Here’s what that looks like when rendered with a bit of styling:

The structure is clean and the semantic meaning is clear. Even without custom styling, the browser indents <dd> under each <dt>, which already communicates the relationship between term and description.

One rule to keep in mind: <dt> and <dd> must be direct children of <dl>. Don’t wrap them in <li>, <p>, or any other element (except <div>, which we’ll cover in its own section below).

---

04When dl Makes More Sense Than ul or ol

The quick mental test: does each item in your list have a term that naturally pairs with a value? If yes, reach for <dl>.

Here’s a simple way to decide: would you naturally write your content as “Word: Definition” or “Question: Answer” or “Label: Value”? If that format fits, you want a description list.

---

05Building a Real Glossary Using the HTML DL Tag

One of the most natural use cases for <dl> is a glossary. Throughout this series, we’ve explained terms like “semantic element,” “viewport,” and “DOM” in regular paragraph text. A description list is a far cleaner structure for that kind of content, both semantically and practically.

Here’s a proper HTML glossary in action:

<dl>
  <dt>Semantic HTML</dt>
  <dd>HTML written with elements that carry meaning beyond just
  presentation, helping browsers, screen readers, and search engines
  understand your content.</dd>

  <dt>Viewport</dt>
  <dd>The visible area of a web page on a user's screen.
  Its size varies depending on the device.</dd>

  <dt>DOM</dt>
  <dd>The Document Object Model. A tree-like representation
  of your HTML that the browser builds when it loads a page.</dd>

  <dt>Alt text</dt>
  <dd>A text alternative for an image, read aloud by screen
  readers and shown when the image fails to load.</dd>
</dl>

This structure is clean, maintainable, and meaningful. Screen readers can navigate it properly. Search engines understand the term-definition relationship. And for your readers, it’s immediately clear what’s a term and what’s the explanation.

Compare this to writing each term in a bold <p> tag followed by another paragraph. Visually it can look similar, but semantically it tells browsers and assistive tools nothing about the relationship between those pieces of text. That distinction is why we care about semantic HTML in the first place.

---

06Building an FAQ Section with Description Lists

This one genuinely surprised me. Most developers build FAQ sections with <div> and <p> tags, which works visually, but think about what a FAQ actually is: a list of questions paired with answers. That is a description list.

<dl>
  <dt>Do I need to know CSS before learning HTML?</dt>
  <dd>No. HTML is the starting point. You structure your
  content first, then CSS handles the visual presentation.
  They're separate languages that work together.</dd>

  <dt>Is HTML5 still relevant today?</dt>
  <dd>Absolutely. HTML5 is the current standard. Every
  website you visit is built on it.</dd>

  <dt>What is the difference between dl, ul, and ol?</dt>
  <dd>Use ul for unordered items, ol for numbered
  sequences, and dl for term-description pairs like
  glossaries, FAQs, or metadata.</dd>
</dl>

Quick note: if you want collapsible FAQ items with a click-to-expand behavior, that requires JavaScript. We’ll cover that in full when we get to JS later in this series. For now, this plain HTML structure is already semantically solid and perfectly usable.

---

07Metadata Display: Where dl Really Shines

This is the use case I think gets talked about least, and it’s one of the best ones.

Think about how many web pages display metadata. An article shows: “Author: Daniyal Dev”, “Published: April 2026”, “Category: HTML.” A product page shows: “Brand: Apple”, “Weight: 174g”, “Battery: All-day.” A user profile shows: “Location: Karachi”, “Member since: 2023.”

All of these are key-value pairs. And the html dl tag is exactly the right semantic element for this pattern.

<dl>
  <dt>Author</dt>
  <dd>Daniyal Dev</dd>

  <dt>Published</dt>
  <dd>April 7, 2026</dd>

  <dt>Category</dt>
  <dd>HTML Tutorials</dd>

  <dt>Reading Time</dt>
  <dd>8 minutes</dd>

  <dt>Series</dt>
  <dd>Batch 5: Lists &amp; Structured Content</dd>
</dl>

With CSS Grid (which we’ll cover properly in the CSS series), you can display <dt> and <dd> side by side in that clean label-value layout. The HTML underneath stays simple, meaningful, and easy to maintain.

---

08One Term, Multiple Definitions (And the Other Way Around)

Here’s flexibility you won’t find in <ul> or <ol>. The description list structure is genuinely flexible about how terms and descriptions pair up.

Multiple <dd> for One <dt>

A single term can have more than one description. The word “bank” means different things depending on context. Both definitions belong to the same term, and the html dd tag lets you stack them directly.

<dl>
  <dt>bank</dt>
  <dd>A financial institution that holds deposits
  and provides loans.</dd>
  <dd>The sloping land alongside or shelving under
  a river or other body of water.</dd>
</dl>

You just stack the <dd> elements right below the <dt>. No extra wrapper, no special attribute. It works as-is.

Multiple <dt> for One <dd>

The reverse also works. Multiple terms can share one description. This is useful for synonyms, abbreviations paired with their full form, or words in different languages that mean the same thing.

<dl>
  <dt>HyperText Markup Language</dt>
  <dt>HTML</dt>
  <dd>The standard language for creating and structuring
  content on the web.</dd>
</dl>

Both patterns are valid HTML. You’ll find the multiple-<dd> pattern especially useful when building real glossaries, technical documentation, or any reference content where a single word genuinely carries more than one meaning.

---

09Wrapping Groups with a div (The Styling Trick)

Here’s something a lot of people don’t know: inside a <dl>, you are allowed to wrap each term-description group inside a <div>. This is valid HTML5, and it makes styling much easier.

<dl>
  <div>
    <dt>Frontend</dt>
    <dd>The part of a website users see and interact
    with directly in the browser.</dd>
  </div>

  <div>
    <dt>Backend</dt>
    <dd>The server side: databases, APIs, and the logic
    that powers what users see.</dd>
  </div>

  <div>
    <dt>Full Stack</dt>
    <dd>A developer who works on both frontend and backend
    parts of a web application.</dd>
  </div>
</dl>

The <div> wraps the entire term-description group as a unit. This way, you can target each pair with CSS for background colors, borders, rounded corners, hover effects, and more. It’s a pattern you’ll use a lot once you start styling description lists seriously.

Important: <div> is the only wrapper element allowed inside <dl>. Don’t use <section>, <article>, or any other element as a group wrapper. Just <div>, and only when you actually need the grouping for styling purposes.

---

10Making Description Lists Look Great with CSS

By default, <dl> is pretty bare. The browser indents <dd> elements, and that’s about it. With CSS, the possibilities open up.

The most useful pattern for metadata display is using CSS Grid to place <dt> and <dd> side by side:

<!-- HTML -->
<dl class="specs">
  <dt>Author</dt>
  <dd>Daniyal Dev</dd>

  <dt>Published</dt>
  <dd>April 7, 2026</dd>

  <dt>Category</dt>
  <dd>HTML Tutorials</dd>
</dl>

<!-- CSS -->
<style>
  .specs {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.5rem 2rem;
  }

  .specs dt {
    font-weight: 600;
    color: #6366f1;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
  }

  .specs dd {
    margin: 0;
    color: #cbd5e1;
    font-size: 0.9rem;
  }
</style>

Quick heads-up: if you’re new to CSS, don’t stress about the styling code above. CSS is its own language that we’ll cover in full depth later in this series. For now, focus on the HTML structure. By the time you get to CSS, this grid pattern will make complete sense and you’ll use it constantly.

---

11How Screen Readers Interact with the dl Element

Accessibility has come up throughout this series, from writing good alt text for images to structuring navigation menus with ARIA. Description lists have their own accessibility value that’s worth understanding.

When a screen reader encounters a <dl>, it typically announces it as a “description list” and tells the user how many items or groups are inside. For each <dt>, it reads the term. For each <dd>, it reads the description. Users can navigate by groups, which makes long glossaries and FAQ sections much easier to scan.

Compare that to a visually identical layout built with <div> and <span> tags. A screen reader user would hear a flat wall of text with no structure announced, no relationships communicated, no way to skip through entries efficiently.

A few practical things to keep in mind:

Keep your <dt> text clear and concise. It’s the label that identifies everything that follows it, so it needs to make sense on its own when read aloud.

Don’t use <dl> purely for its default visual indentation. If the content doesn’t actually have a term-description relationship, the semantic mismatch will confuse assistive technology users.

If you have multiple description lists on a single page, consider wrapping each one in a <section> or adding an aria-label attribute directly to the <dl> so users know which list they’re navigating.

---

12The Semantic SEO Case for Description Lists

We covered this at length in our semantic HTML article: search engines don’t just read text, they read structure. When you use the html dl tag with proper <dt> and <dd> pairs, you’re telling Google that these are defined terms with corresponding definitions.

This is directly relevant to featured snippets. The definition-style boxes that appear at the top of many search results often pull from well-structured HTML where the relationship between a term and its explanation is clearly marked up.

For FAQ pages specifically, properly structured HTML (optionally combined with FAQ structured data in JSON-LD, which we’ll explore when we cover that topic later) can make your page eligible for rich results: the expandable Q&A boxes that appear directly in Google search results. This can significantly increase your click-through rate on FAQ pages.

It’s not a magic ranking trick. But using semantically correct elements for the right type of content, consistently throughout your site, is part of building pages that search engines can parse accurately and reward with better visibility.

---

13Common Mistakes and How to Avoid Them

Let me flag the ones that trip people up.

Putting Content Directly Inside <dl>

Text, images, and random elements shouldn’t go directly inside <dl>. Only <dt>, <dd>, and optionally <div> wrappers are allowed as direct children.

Using <dl> Just for the Visual Indentation

Browsers indent <dd> by default, which can look like a handy layout trick. But if your content isn’t a genuine term-description relationship, you’re misusing the element. Use CSS for indentation, not semantic HTML elements.

Forgetting That <dd> Can Hold Block Content

The html dd tag isn’t limited to plain text. You can put paragraphs, links, images, even lists inside a <dd>. It’s a proper container. This is useful for FAQ answers that need more than one paragraph, or glossary definitions that reference another article.

<dl>
  <dt>Responsive Design</dt>
  <dd>
    <p>A design approach where a website adapts its
    layout to different screen sizes automatically.</p>
    <p>We covered this in detail in our
    <a href="#">responsive images article</a>.</p>
  </dd>
</dl>

Starting a <dd> Without a Preceding <dt>

Every <dd> needs a corresponding <dt> before it. Some browsers are forgiving, but it’s invalid HTML and will create confusing output for screen readers. Always keep the term-description pair together and in order.

---

14Quick Reference: dl, dt, and dd at a Glance

---

15What You Learned Today

You now know the html dl tag, the html dt tag, and the html dd tag, not just what they are, but when to reach for them and why they exist.

Glossaries, FAQ sections, metadata cards, product specs, user profiles: whenever your content naturally pairs a label with a value, <dl> is the right tool. It’s semantic, accessible, and easier to maintain than a collection of styled divs trying to fake the same structure.

You also know the flexibility: one term can have multiple definitions, multiple terms can share one definition, and groups can be wrapped in <div> when styling needs it. These aren’t edge cases, they’re practical patterns that come up in real projects.

Most developers go years without using description lists properly. That’s not going to be you.

Next up in this batch: Understanding Nested Lists, where we’ll look at how to combine <ul>, <ol>, and <dl> inside each other for complex, multi-level content structures.