Module 3: Glossary List0 Level Beginner

14. Description List (Description List - <dl>, <dt>, <dd>)

Lists for dictionaries, glossaries and Frequently Asked Questions (FAQ)

Real-life analogy

Just as in a dictionary the word is written first in thick black letters (Term) and its meaning is written below it, slightly indented (Description)!

Explanation

Description list <dl>: This is a special list that shows a term and its explanation (Definition). 3 tags work together in it:

<dl> (Description List): The main outer container of the list.
<dt> (Description Term): The main word or term whose definition is to be given. It usually appears without indentation.
<dd> (Description Details): The detailed description or meaning of that term. The browser automatically shifts it 40px to the right (Indent).

Golden rules

There can be more than one <dd> under a single <dt> (for example two meanings of one word).

Common mistake

Getting confused between dt and dd. Remember 'T' is for Term and 'D' is for Description.

Example code

<!DOCTYPE html>
<html>
<body style="font-family: sans-serif; padding: 20px;">
  <h4 style="color: #0369a1; margin-top: 0;">Web Glossary (&lt;dl&gt;):</h4>
  <dl style="font-size: 13px; line-height: 1.6;">
    <dt style="font-weight: bold; color: #0284c7;">HTML</dt>
    <dd style="margin-left: 20px; color: #475569;">The markup language that builds the skeleton of a web page.</dd>

    <dt style="font-weight: bold; color: #0284c7; margin-top: 8px;">CSS</dt>
    <dd style="margin-left: 20px; color: #475569;">The stylesheet language that gives a website colourful and beautiful design.</dd>

    <dt style="font-weight: bold; color: #0284c7; margin-top: 8px;">JavaScript</dt>
    <dd style="margin-left: 20px; color: #475569;">The programming language that adds brains and behaviour to a website.</dd>
  </dl>
</body>
</html>

Run & edit this in the live editor

Quick quiz

Which tag is used to define the main word (Term) in a description list?

<dl>
<term>
<dt>
<dd>

Show answer

Answer: <dt>

<dt> stands for 'Description Term', which represents the main word.