HTML MASTER CLASS /// LEARN TAGS /// BUILD STRUCTURE /// SEMANTIC WEB /// HTML MASTER CLASS /// LEARN TAGS /// BUILD STRUCTURE /// SEMANTIC WEB /// HTML MASTER CLASS /// LEARN TAGS /// BUILD STRUCTURE /// SEMANTIC WEB ///

Definition Lists

Define terms, create glossaries, and structure key-value pairs with semantic precision.

definition_lists.html
1 / 12
12345
📚

Tutor:Definition Lists allow us to define terms and their descriptions. They are perfect for glossaries, metadata, or key-value pairs. The parent container is the <dl> tag.


Skill Matrix

UNLOCK NODES BY LEARNING NEW TAGS.

Concept: The Container

The <dl> tag defines the list. All terms and descriptions must be nested inside it.

System Check

What does 'dl' stand for?

Community Holo-Net

Share Your Glossary

ACTIVE

Created a complex technical dictionary or metadata list? Share your semantic dl structures.

Support Us

HTML Definition Lists

Author

Pascual Vila

Frontend Instructor // Code Syllabus

Definition lists (<dl>) are often overlooked but are essential for semantic HTML. They pair terms with descriptions.

The Structure

The parent element is <dl>. Inside, you must have pairs of <dt> (Definition Term) and <dd> (Definition Description).

Relationships

A single term can have multiple descriptions (e.g., a word with multiple meanings). Conversely, multiple terms can share a single description (e.g., synonyms).

Styling

By default, browsers indent the <dd> element to visually separate it from the term. You can customize this with CSS to create key-value grids or modern layouts.

View Full Transcript+

This section contains the detailed breakdown of the definition list lifecycle, including the semantic implications for screen readers and search engines. It details how dt acts as a header for the dd content.

HTML Semantic Glossary

<dl>
The Description List container. It encloses all terms and their descriptions.
example.html
<dt>
Definition Term. Identifies the name of the concept or item being defined.
example.html
<dd>
Definition Description. Provides the explanation, data, or value for the term.
example.html
Multiple Pairs
You can group multiple dt with one dd, or one dt with multiple dd elements.
example.html