What is Description lists in HTML?

HTMLmarkup~5 mins

Description lists in HTML

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

Description lists help organize pairs of terms and their explanations clearly on a webpage.

Listing glossary terms with their definitions.

Showing questions and answers in a FAQ section.

Displaying product features with descriptions.

Presenting metadata like names and values in a profile.

Syntax

HTML

<dl>
  <dt>Term</dt>
  <dd>Description of the term.</dd>
</dl>

<dl> wraps the whole list.

<dt> is for the term or name.

<dd> is for the description or details.

Examples

Multiple terms with their descriptions in one list.

HTML

<dl>
  <dt>HTML</dt>
  <dd>Language for web pages.</dd>
  <dt>CSS</dt>
  <dd>Styles web pages.</dd>
</dl>

One term with multiple descriptions.

HTML

<dl>
  <dt>JavaScript</dt>
  <dd>A programming language for the web.</dd>
  <dd>Used to make pages interactive.</dd>
</dl>

Simple single term and description.

HTML

<dl>
  <dt>FAQ</dt>
  <dd>Frequently Asked Questions.</dd>
</dl>

Sample Program

This example shows a description list with three web terms and their explanations. It uses semantic HTML and simple styling for clarity and accessibility.

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>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 1rem;
      max-width: 600px;
      margin: auto;
    }
    dl {
      background-color: #f9f9f9;
      border: 1px solid #ccc;
      padding: 1rem;
      border-radius: 0.5rem;
    }
    dt {
      font-weight: bold;
      margin-top: 1rem;
      color: #2a2a2a;
    }
    dd {
      margin-left: 1.5rem;
      margin-bottom: 0.5rem;
      color: #555;
    }
  </style>
</head>
<body>
  <h1>Web Development Terms</h1>
  <dl aria-label="Glossary of web development terms">
    <dt>HTML</dt>
    <dd>Standard language for creating web pages.</dd>
    <dt>CSS</dt>
    <dd>Styles the appearance of web pages.</dd>
    <dt>JavaScript</dt>
    <dd>Makes web pages interactive and dynamic.</dd>
  </dl>
</body>
</html>

OutputSuccess

Important Notes

Description lists are great for pairing terms and explanations in a clear, readable way.

They improve accessibility by using semantic tags that screen readers understand.

Use <dt> and <dd> in pairs inside <dl> for best structure.

Summary

Description lists organize terms and their descriptions clearly.

Use <dl>, <dt>, and <dd> tags together.

They help both sighted users and screen readers understand content better.