HTML <dl> tag – Description List

What is the HTML <dl> Tag?

This <dl> tag creates a description list with terms and their descriptions. It is used to display a list of terms along with their related descriptions or definitions. The <dl> tag is used together with the <dt> and <dd> elements to create a description list on a web page.

This element is like a dictionary, where a word is written first and its meaning is written below it. In the same way, the <dt> element defines the term, and the <dd> element provides the description of that term.

Uses:

• It is used to create a description list of terms and their descriptions.
• It displays terms along with their related descriptions or definitions.
• It is useful when a term needs to be explained or described on a web page.

Syntax:

<dl>
    <dt>Term 1</dt>
    <dd>Description of Term 1</dd>

    <dt>Term 2</dt>
    <dd>Description of Term 2</dd>
</dl>

List of Elements:

• <dl> → To create the description list
• <dt> → To define the term or name
• <dd> → To provide the description or definition

Elements Used with the <dl> Tag:

• Description List: <dl>
• Description Term: <dt>
• Description Details: <dd>

Examples:

1. Single Term and Description:

<dl>
    <dt>HTML</dt>
    <dd>HTML is used to create the structure of a web page.</dd>
</dl>

2. Multiple Terms and Descriptions:

<dl>
    <dt>HTML</dt>
    <dd>HTML is used to create the structure of a web page.</dd>

    <dt>CSS</dt>
    <dd>CSS is used to style a web page.</dd>

    <dt>JavaScript</dt>
    <dd>JavaScript is used to add functionality to a web page.</dd>
</dl>

3. Multiple Descriptions for One Term:

<dl>
    <dt>HTML</dt>
    <dd>HTML is used to create the structure of a web page.</dd>
    <dd>HTML uses elements to define different parts of a web page.</dd>
</dl>

4. Multiple Terms with One Description Each:

<dl>
    <dt>Frontend</dt>
    <dd>The visible part of a website.</dd>

    <dt>Backend</dt>
    <dd>The server-side part of a website.</dd>
</dl>

5. Terms with Different Types of Information:

<dl>
    <dt>HTML</dt>
    <dd>Markup language</dd>

    <dt>CSS</dt>
    <dd>Style sheet language</dd>

    <dt>JavaScript</dt>
    <dd>Programming language</dd>
</dl>

Using the <dl> Tag with a <table>

• The <dl> tag is placed inside the <td> element of a <table>. The <dl> tag creates a description list inside the table cell, where the terms and their descriptions are displayed together.
• The <dt> tag is used inside the <dl> tag to define the term, and the <dd> tag is used to provide the description of that term. So, the <dl> tag helps to create a description list inside a table cell and display the terms with their descriptions.

Example:

<table border="1" cellpadding="8">
    <tr>
        <th>Course</th>
        <th>Topics</th>
    </tr>

    <tr>
        <td>Web Development</td>
        <td>
            <dl>
                <dt>HTML</dt>
                <dd>Structure of a web page</dd>

                <dt>CSS</dt>
                <dd>Style of a web page</dd>
            </dl>
        </td>
    </tr>

    <tr>
        <td>Programming</td>
        <td>
            <dl>
                <dt>Python</dt>
                <dd>A programming language</dd>

                <dt>JavaScript</dt>
                <dd>A scripting language</dd>
            </dl>
        </td>
    </tr>

</table>