HTML Description Lists

❮ Previous Next ❯

HTML Description Lists: Defining Name-Value Pairs

An HTML Description List is not as commonly used as unordered or ordered lists, but it serves an important purpose: displaying name-value pairs, terms and definitions, or metadata.

This type of list is marked up using three interconnected tags:

<dl> (Description List): This tag defines the description list itself and acts as the main container for the list items.
<dt> (Description Term): Represents a term, a name, or a key within the list.
<dd> (Description Details): Provides the description, definition, or value associated with the preceding term.

Syntax:

<dl>
    <dt>Coffee</dt>
    <dd>A hot drink made from roasted coffee beans.</dd>
    <dt>Espresso</dt>
    <dd>Strong coffee brewed with steam through ground beans.</dd>
</dl>

HTML Description Lists Examples

Example 1: Basic Description List

In this example, we demonstrate a straightforward description list defining common web technologies.

Basic Description List Example:

<!DOCTYPE html>
<html>
<body>
    <h2>HTML Description Lists</h2>
    <dl>
        <dt>HTML</dt>
        <dd>HyperText Markup Language</dd>
        <dt>CSS</dt>
        <dd>Cascading Style Sheets</dd>
        <dt>JavaScript</dt>
        <dd>Scripting language for Web pages</dd>
    </dl>
</body>
</html>

Nested Description List

A nested description list is when we add a description list inside the <dd> of another description list. This allows for organizing related terms and their definitions in a hierarchical, tree-like structure.

Nested Description List Example:

<!DOCTYPE html>
<html>
<body>
    <h3>Technology Overview</h3>
    <dl>
        <dt>Hardware</dt>
        <dd>Physical devices</dd>
        <dd>
            <dl> <!-- Nested Description List for Hardware Types -->
                <dt>CPUs</dt>
                <dd>Processors</dd>
                <dt>GPUs</dt>
                <dd>Graphics</dd>
            </dl>
        </dd>
        <dt>Software</dt>
        <dd>Programs and Applications</dd>
        <dd>
            <dl> <!-- Nested Description List for Software Types -->
                <dt>System</dt>
                <dd>Operating Systems</dd>
                <dt>Application</dt>
                <dd>Tools and utilities</dd>
            </dl>
        </dd>
    </dl>
</body>
</html>

Why Use Description Lists?

Description lists are incredibly semantic and particularly useful for web pages that require definitions or detailed explanations of terms. They help in creating organized, easy-to-read content for:

FAQs (Frequently Asked Questions) where <dt> is the question and <dd> is the answer.
Glossaries or dictionary-style definitions.
Product descriptions detailing specific features and stats.
Technical specifications (e.g., matching a spec name to its value).
Any content where terms or keys need associated definitions or values.

Exercise

Which tag is used to define the specific term or name in an HTML description list?