What are HTML description lists (, , ) and how are they used for metadata and glossaries?

An HTML description list () is designed to display term-and-description pairs. Inside a , each term is tagged with (description term), and its corresponding description or value is tagged with (description definition). It is ideal for dictionaries, glossaries, product metadata, and FAQ sections.

Topic 19 of 57 3. HTML Lists Interactive Tutorial

HTML Description Lists: DL, DT, and DD Tags Explained

12 mins read Last updated: 12 Nov 2026 14,300 views

HTML Editor HTML Cheat Sheet 0.00%

On This Page0 sectionsQuick jump to subtopic

Topic Overview & Definition

Key Question

What are HTML description lists (<dl>, <dt>, <dd>) and how are they used for metadata and glossaries?

Direct Answer & Overview

An HTML description list (

) is designed to display term-and-description pairs. Inside a

(description term), and its corresponding description or value is tagged with: (description definition). It is ideal for dictionaries, glossaries, product metadata, and FAQ sections.

Comprehensive Step-by-Step Concepts

1) Structure of Description Lists: -

: The description term being defined or named. -: : The description definition, explanation, or value associated with the preceding term. 2) One-to-Many and Many-to-One Relationships: - A single term (
) can have multiple definitions (: ), such as a word with multiple dictionary definitions. - Multiple terms (
) can share a single definition (: ), such as synonyms sharing a common explanation. 3) Common Use Cases: - Dictionaries and technical glossaries - Product specification sheets (Weight, Dimensions, Processor, Battery Life) - Author and article metadata (Author, Published Date, Category) - Frequently Asked Questions (FAQ items) 4) Semantic Advantage over Divs: Description lists provide explicit semantic relationships between keys and values that search engines and assistive technologies can parse reliably. 5) Styling with CSS: With modern CSS Flexbox or CSS Grid, description lists can easily be styled as horizontal key-value tables with terms on the left and values on the right.

Runnable HTML5 Code Example & Practical Implementation

index.html

HTML Editor

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Description Lists Showcase</title>
    <style>
        .specs-list { display: grid; grid-template-columns: 140px 1fr; gap: 8px 16px; background: #f8fafc; padding: 16px; border-radius: 8px; border: 1px solid #e2e8f0; }
        .specs-list dt { font-weight: bold; color: #475569; }
        .specs-list dd { margin: 0; color: #0f172a; }
    </style>
</head>
<body>
    <h2>Laptop Hardware Specifications</h2>
    <dl class="specs-list">
        <dt>Processor</dt>
        <dd>Apple M3 Max (16-Core CPU, 40-Core GPU)</dd>

        <dt>Unified Memory</dt>
        <dd>64 GB High-Bandwidth Unified RAM</dd>

        <dt>Storage</dt>
        <dd>2 TB Ultra-Fast PCIe NVMe SSD</dd>

        <dt>Battery Life</dt>
        <dd>Up to 22 hours continuous video playback</dd>
    </dl>
</body>
</html>

Key Takeaways, Best Practices & Standards

Best Practice & Standards

Use

for key-value pairings and product specs instead of generic table or div structures to preserve clear semantic relationships.

Common Technical & Interview Questions

Q1: Can
elements be used inside a
element in HTML5?

A1: Yes! HTML5.2 officially updated the specification to permit wrapping

and

pairs inside a

for CSS styling and layout grouping purposes.

Q2: Can a
contain heading tags like
?

A2: No. According to HTML specifications,

elements can only contain phrasing (inline) content. Placing block headings like

inside a
is invalid HTML.

Q3: How do screen readers interpret description lists?

A3: Screen readers announce the list as a definition/description list with the count of terms, identifying each

as a term and each

as its definition.

All HTML Topics

Previous TopicHTML Ordered Lists: OL Tag, Attributes, and Examples

Next TopicHTML Links: Anchor Tag, Target Attribute, and Examples