Definition Lists in HTML

Learn to properly structure glossaries, metadata, and key-value pairs using the semantic power of <dl>, <dt>, and <dd>.

📖

Welcome! Let's explore a special list for defining terms: the Definition List. It's perfect for glossaries.

/* Creating glossaries... */

The Core Syntax

A definition list is a block of term-description groupings. The syntax is strict: a <dl> container can only hold <dt> (definition term) and <dd> (definition description) elements, typically in pairs.

Hierarchical Structure

The structure is hierarchical. The parent <dl> element acts as the main container for the entire list. Inside, one or more <dt> elements are followed by one or more <dd> elements, creating clear associations between terms and their definitions.

Semantic Purpose

Their primary purpose is to present key-value pairs semantically. This is perfect for glossaries, dictionaries, or displaying metadata (e.g., Author: John Doe). Using these tags helps search engines and screen readers understand the content's structure.

Practice Zone

Interactive Test 1: Match the Tags

Match the tag with its correct purpose by dragging it.

Arrastra en el orden correspondiente.

Arrastra las opciones:

<dt>

<dd>

<dl>

Completa el código:

The Container______

The Term______

The Description______

Unlock with Premium

Interactive Test 2: Build the List

Rellena los huecos en cada casilla.

<>
  <>HTML</>
  <dd>The standard markup language for creating web pages.</dd>
</>

Unlock with Premium

Practice Example: Code Editor

Create a complete definition list for "HTML" and "CSS" with a brief description for each.

* Write the code below. Correct characters will be shown in green and incorrect ones in red.

<dl>
  <dt>HTML</dt>
  <dd>A markup language for creating web pages.</dd>
  <dt>CSS</dt>
  <dd>A style sheet language for describing the presentation of a document.</dd>
</dl>

Unlock with Premium

Knowledge Check

In a definition list, which tag is used for the term itself?

Unlock with Premium

Practical Uses for Definition Lists

Definition lists are more versatile than they seem. They're the perfect semantic choice for any content that follows a key-value pattern.

1. Glossaries and Dictionaries

This is the most obvious use case. The <dt> holds the word, and the <dd> holds its definition. It's semantically perfect and easily styled.

<dl>
  <dt>API</dt>
  <dd>Application Programming Interface.</dd>
</dl>

2. Displaying Metadata

When you need to list properties of an item, like a blog post or a product, a definition list is an excellent choice. It clearly associates labels with their corresponding data.

<dl>
  <dt>Author:</dt>
  <dd>Jane Doe</dd>
  <dt>Published:</dt>
  <dd>Sep 15, 2025</dd>
</dl>

3. Frequently Asked Questions (FAQs)

An FAQ page is essentially a list of questions and their answers. You can use <dt> for the question and <dd> for the answer, providing a clean and semantic structure.

<dl>
  <dt>What is your return policy?</dt>
  <dd>You can return any item within 30 days.</dd>
</dl>

Key Takeaway: If your content can be described as a "term" and its "description" or a "key" and its "value," a definition list is likely the most semantically correct HTML element to use.

Definition List Glossary

<dl>: Stands for "Definition List". This is the root element that wraps the entire list of terms and descriptions.
<dt>: Stands for "Definition Term". This tag is used to specify the term, name, or key in a key-value pair.
<dd>: Stands for "Definition Description". This tag provides the description, definition, or value for the preceding <dt> element.