Sometimes we need to display a list of terms and their descriptions, like a glossary or a metadata list. HTML provides the Definition List for this purpose using the <dl> tag.

We start with the wrapper tag <dl>. This stands for 'Definition List'. It creates the container where our terms and descriptions will live.

<dl>

Inside the list, we define a term using the <dt> tag (Definition Term). This acts like a label or a heading for the specific item we want to define.

<dl>
  <dt>HTML</dt>

Following the term, we provide the definition using the <dd> tag (Definition Description). Browsers typically indent this automatically to visually separate it from the term.

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language.</dd>

Checkpoint: Which tag is used to wrap the entire list?

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language.</dd>

And finally, we must close the list with the closing tag </dl>. Without this, the browser might not know where the list ends.

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language.</dd>
</dl>

Let's see the result. Notice the indentation of the description. This structure is semantically linked: screen readers know the 'dd' describes the 'dt'.

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language.</dd>
</dl>

You can have multiple terms and definitions. For example, adding CSS to our glossary.

<dl>
  <dt>HTML</dt>
  <dd>Structure.</dd>
  <dt>CSS</dt>
  <dd>Style.</dd>
</dl>

Checkpoint: Which tag contains the actual description/details?

<dl>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

Great job! You now understand how to build semantic lists for glossaries and metadata.

<h1>Done!</h1>

Practice makes perfect. Use the editor below to create your own dictionary list and unlock new achievements!

definition_list.html

1 / 11

📜

Tutor:Sometimes we need to display a list of terms and their descriptions, like a glossary or a metadata list. HTML provides the Definition List for this purpose using the <dl> tag.

⭐ 0 EXP

Definition Mastery

Unlock nodes by learning definition list tags.

Concept 1: The Wrapper

The <dl> tag acts as the container. It tells the browser "this is a definition list".

System Check

What tag must enclose all terms and descriptions?

Community Holo-Net

Share Your Glossary

Built a complex metadata list? Share your semantic HTML examples.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

Definition Lists: dl, dt, and dd

Pascual Vila

Frontend Instructor.

While ordered (`<ol>`) and unordered (`<ul>`) lists are common, HTML offers a specialized list type for pairs of items: the Definition List.

The Wrapper: <dl>

The <dl> tag defines the start and end of the list. It doesn't contain the content directly but wraps pairs of terms and descriptions.

The Term: <dt>

The <dt> tag stands for Definition Term. This is the item being defined or the key in a key-value pair.

The Description: <dd>

The <dd> tag stands for Definition Description. It provides the meaning, detail, or value associated with the preceding term. You can even have multiple descriptions for a single term!

Definition Tags Glossary

<dl>: Defines the description list. It is the container for `dt` and `dd` elements.
<dt>: Defines a term/name in a description list.
<dd>: Describes the term/name in a description list.

📖 INDEX