HtmlHow-ToBeginner · 3 min read

How to Create Description List in HTML: Syntax and Examples

To create a description list in HTML, use the <dl> tag to wrap the list, <dt> for each term, and <dd> for its description. This structure pairs terms and their explanations clearly in a semantic way.

📐

Syntax

A description list uses three main tags:

<dl>: The container for the entire list.
<dt>: Defines a term or name.
<dd>: Provides the description or definition of the term.

Each term (<dt>) is followed by one or more descriptions (<dd>).

html

<dl>
  <dt>Term 1</dt>
  <dd>Description for Term 1.</dd>
  <dt>Term 2</dt>
  <dd>Description for Term 2.</dd>
</dl>

Output

Term 1 Description for Term 1. Term 2 Description for Term 2.

💻

Example

This example shows a description list of HTML tags and their meanings.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Description List Example</title>
</head>
<body>
  <h1>HTML Description List</h1>
  <dl>
    <dt>&lt;html&gt;</dt>
    <dd>The root element of an HTML document.</dd>
    <dt>&lt;head&gt;</dt>
    <dd>Contains meta-information about the document.</dd>
    <dt>&lt;body&gt;</dt>
    <dd>Contains the content of the document.</dd>
  </dl>
</body>
</html>

Output

HTML Description List <html> The root element of an HTML document. <head> Contains meta-information about the document. <body> Contains the content of the document.

⚠️

Common Pitfalls

Common mistakes when creating description lists include:

Using <dt> and <dd> outside of a <dl> container, which is invalid HTML.
Not pairing terms and descriptions properly, causing confusion.
Using other list tags like <ul> or <ol> instead of <dl> for description lists.

Always wrap <dt> and <dd> inside <dl> for correct structure.

html

<!-- Incorrect usage -->
<dt>Term without container</dt>
<dd>Description without container</dd>

<!-- Correct usage -->
<dl>
  <dt>Term</dt>
  <dd>Description</dd>
</dl>

Output

Term Description

📊

Quick Reference

Tag	Purpose
	Wraps the entire description list
	Defines a term or name
	Provides the description of the term

✅

Key Takeaways

Use

for terms and: for descriptions.

Each

should be followed by one or more

elements to explain the term.

Never use

outside of a

container to keep valid HTML.

Description lists are perfect for pairing terms and their explanations clearly.

Use semantic HTML tags to improve accessibility and SEO.