Hero

HTML Definition Lists Discover how to use HTML Description Lists (<dl>) to perfectly pair terms with their descriptions, like in a dictionary or glossary. Learning Outcomes: Understand the <dl>, <dt>, and <dd> tags and when to use them. Prerequisites: Understanding of basic HTML lists. Reading Time: 4 min read Difficulty: Beginner

Introduction

While ordered and unordered lists are great for single items, sometimes you need to display pairs of information. Think of a dictionary (a word and its definition), an FAQ section (a question and an answer), or a product spec sheet (a feature and its detail). This is where the Definition List (now officially called a Description List) comes in.

Why This Matters

For a professional portfolio like himubey.in, you might have a "Services" section where you list a service name alongside a detailed paragraph describing what you do. Instead of hacking this together with generic <div> tags, using a Description List provides excellent semantic meaning, boosting your SEO and accessibility.

Core Concepts

A Description List uses three distinct tags working together:

<dl> (Description List): The parent container that holds the entire list.
<dt> (Description Term): The term, name, or question being defined.
<dd> (Description Details): The actual definition, answer, or details corresponding to the term. By default, browsers will indent the <dd> element.

Syntax

Every <dl> contains one or more <dt> tags, typically immediately followed by one or more <dd> tags.

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

Real World Example

Let's build a clean FAQ (Frequently Asked Questions) section for the Himubey website.

<section class="faq">
  <h2>Frequently Asked Questions</h2>
  
  <dl>
    <!-- Question -->
    <dt>Do you take freelance projects?</dt>
    <!-- Answer -->
    <dd>Yes, I am currently accepting new frontend development projects. Contact me to discuss your ideas!</dd>
    
    <!-- Question -->
    <dt>What technologies do you use?</dt>
    <!-- Answer -->
    <dd>I specialize in React, Next.js, HTML5, CSS3, and Tailwind CSS.</dd>
  </dl>
</section>

Best Practices

Multiple Details: You are not limited to a 1:1 ratio. You can have multiple <dt> tags sharing one <dd>, or one <dt> tag with multiple <dd> tags detailing it!
Semantic Meaning: Use <dl> specifically for name-value groups. If the content isn't a pair of related data (like a term and description), use a standard <ul> or <ol>.

Common Mistakes

Mistake: Wrapping <dt> and <dd> inside <li> tags.

<!-- WRONG: li tags do not belong in a description list! -->
<dl>
  <li>
    <dt>Term</dt>
    <dd>Definition</dd>
  </li>
</dl>

Correct Approach: <dt> and <dd> are direct children of the <dl> tag (or can be grouped inside a <div> in modern HTML5 for styling).

💡 Himubey Tip

In modern HTML5, if you need to style the term and the description together (like putting them in a card with a border), you are allowed to wrap a <dt> and <dd> pair inside a generic <div> tag within the <dl>. This is a lifesaver for CSS Flexbox and Grid layouts!

Interview Questions

What do the <dl>, <dt>, and <dd> tags stand for?
What is a common real-world use case for a Description List?
How does the browser visually format a <dd> tag by default compared to a <dt> tag?
Are you allowed to have multiple <dd> tags for a single <dt> tag?

Mini Challenge

Task: Create a Glossary of Web Terms.

Create a <dl> element.
Add the term "Frontend" using <dt>, and provide its definition using <dd>.
Add the term "Backend" using <dt>, and provide its definition using <dd>.
Check how it looks in the browser—notice the automatic indentation!

Summary

Description lists are an underutilized but incredibly powerful tool in HTML. They allow you to semantically group terms and their descriptions. Whether you are building an FAQ, a glossary, or a metadata sheet, the <dl>, <dt>, and <dd> trio will make your code much more professional.

Next Lesson

Next Lesson: HTML Tables