HTML · Module 07 · Lesson 31 of 54

Description Lists (dl, dt, dd)

What is a Description List?

Think of a glossary at the back of a textbook or a dictionary page. You have a bold word (the Term), and underneath it, a slightly indented description explaining what that word means (the Description).

In HTML, a Description List is used to outline pairs of terms and descriptions:

<dl> (Description List): The outer wrapper.

<dt> (Description Term): The name or term being defined.

<dd> (Description Details): The definition or explanation of the term.

Why does it matter?

Unlike unordered and ordered lists, description lists are specifically designed for key-value pairs (like definitions, metadata lists, or product specifications). They are semantically rich, making it easier for search engines to crawl glossaries.

How to write it

Nest <dt> and <dd> pairs inside the <dl> tag:

<dl>
  <dt>XML</dt>
  <dd>eXtensible Markup Language</dd>
</dl>

XML

eXtensible Markup Language

Common Mistakes

Using term and description tags outside <dl>: <dt> and <dd> tags are only valid inside a <dl> element.

Quick Reference

<dl> — Defines a description list.

<dt> — Defines a term in a description list.

<dd> — Defines the details/definition of a term.

Your Task

Create a `<dl>` list containing: term `<dt>` 'XML' with definition `<dd>` 'eXtensible Markup Language'.

index.html

Type code above to start the lesson.

Live Preview