HTML Description Lists

Description Lists

Description lists are used to display a list of terms and their corresponding descriptions. These are ideal for glossaries, FAQs, or definitions.

Basic Structure:

<dl>: Defines the description list (stands for Description List)
<dt>: Defines the term (stands for Definition Terms).
<dd>: Provides the description of the term (stands for Definition Description).

Syntax:

<dl>
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>
</dl>

Example: HTML Description List

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Description List</title>
</head>
<body>
    <h2>Description Lists</h2>
    <dl>
        <dt>Coffee</dt>
        <dd>- black hot drink</dd>
        <dt>Milk</dt>
        <dd>- white cold drink</dd>
    </dl>
</body>
</html>

Output:

When to Use a Description List ?

Use description list when:

You need to explain or define a set of terms.
You are creating glossaries or dictionaries.
You are making FAQ section where each question is followed by an answer.

Key Point

<dl> is the wrapper tag for the list.
<dt> is used to define the term.
<dd> is used to describe the definition or explanation of that term.
Description lists are useful for semantic HTML and accessibility