REFERENCEhtml

html Documentation

📖 INDEX

# a-tag

# abbr-tag

LOADING ENGINE...

HTML Description List Tag

Master the description list. Learn how to use <dl>, <dt>, and <dd> for key-value pairs and definitions.

dl.html

<dl>

<dd>Definition</dd>

</dl>

📄

Tutorial: Mastering the HTML Description List

This is a text version of the interactive tutorial, provided for accessibility and search engine indexing.

Step 1: Video

Description lists organize terms and definitions. The <dl> tag creates a semantic list for key-value pairs, perfect for glossaries and metadata.

<dl>

Step 2: Video

A <dl> tag wraps description list items. You need an opening <dl> and a closing </dl>. Inside, you'll use <dt> for terms and <dd> for definitions.

<dl>

Step 3: Video

Now we add content inside the div and close the tag. The browser renders it as a block-level container that groups elements together.

<div>Content here</div>

Step 4: Video

In the browser, each <div> appears as a block-level container. It's commonly used with CSS classes to style groups of elements.

<div>Content here</div>

Step 5: Exercise

Checkpoint: What tags go inside <dl>?

<dl><dt>Term</dt><dd>Definition</dd></dl>

Step 6: Video

Correct. The <div> tag is a block-level element. It creates a new block-level container for grouping elements.

<div>Content here</div>

Step 7: Video

Now it's your turn. Description lists organize information semantically. Complete the challenges below to master the <dl> tag!

anchor-link.html

1 / 7

📄

Tutor:Description lists organize terms and definitions. The <dl> tag creates a semantic list for key-value pairs, perfect for glossaries and metadata.

⭐ 0 EXP

Description List Mastery

Unlock nodes by learning description list structures.

Concept 1: The Description List

The <dl> tag (short for "description list") is used to create a list of terms and their descriptions. It's perfect for glossaries, metadata, or any key-value pairs.

System Check

What does 'dl' stand for?

Description ListData ListDefinition ListDisplay List

Community Holo-Net

Showcase Your Layouts

Built a layout or container structure? Share your div-based designs.

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!

HTML Description List Tag

Pascual Vila

Frontend Instructor.

Description lists organize terms and their definitions semantically. The <dl> tag creates a structured list perfect for glossaries, metadata, and key-value pairs.

DT and DD Elements

Inside a <dl>, use <dt> (description term) for the term and <dd> (description definition) for its description. Multiple <dd> elements can follow one <dt>.

Opening and Closing

Always close a description list with </dl>. Each <dt> and <dd> should also be properly closed for valid HTML.

Semantics & Best Practices

The <dl> tag provides semantic meaning for term-definition pairs. It helps screen readers understand relationships between terms and descriptions, making your content more accessible. Perfect for glossaries, metadata, and structured information.

Description List Tag Glossary

<dl> (Description List): The HTML element that creates a list of terms and their descriptions. Perfect for glossaries and key-value pairs.
<dt> (Description Term): The term or name in a description list. Multiple <dd> elements can follow one <dt>.
<dd> (Description Definition): The description or definition that follows a <dt> term. Can appear multiple times for one term.
Semantics: Description lists provide semantic structure for term-definition pairs, improving accessibility and SEO.