HTML Description Lists

Last Updated : 16 Dec, 2024

An HTML Description List is not as commonly used as unordered or ordered lists but serves an important purpose for displaying name-value pairs. This type of list is marked up using three tags: <dl>, <dt>, and <dd>.

<dl> (Description List): This tag defines the description list itself and acts as a container for the list items.
<dt> (Description Term): Represents a term or a name within the list.
<dd> (Description Details): Provides the description or definition of the 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: In this example, we demonstrate a description list with terms and their descriptions.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Description Lists Example</title>
</head>

<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 another description list. This allows for organizing related terms and their definitions in a hierarchical structure, as demonstrated in the example:

Example 2:

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Nested Description List</title>
</head>
<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/Apps</dd>
        <dd>
            <dl> <!-- Nested Description List for Software Types -->
                <dt>System</dt>
                <dd>OS</dd>
                <dt>Application</dt>
                <dd>Tools</dd>
            </dl>
        </dd>
    </dl>
</body>
</html>

Why Use Description Lists?

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