Description Lists

A description list is created with the <dl> tag. Inside it, terms are marked up with <dt> (description term) and their definitions with <dd> (description details). One term can have multiple definitions, and multiple terms can share one definition.

Use Cases

Description lists are ideal for glossaries, metadata displays (like a product specification sheet), FAQ sections, or any key–value data. Unlike using a table for such data, a description list is semantically appropriate and naturally accessible. You can style the term bold and indent the definition with CSS.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Description Lists</title>
  <style>
    dt { font-weight: bold; margin-top: 12px; }
    dd { margin-left: 24px; color: #444; }
  </style>
</head>
<body>
  <h1>Web Glossary</h1>
  <dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language — the standard markup language for web pages.</dd>

    <dt>CSS</dt>
    <dd>Cascading Style Sheets — describes how HTML elements are displayed.</dd>

    <dt>HTTP</dt>
    <dt>HTTPS</dt>
    <dd>Protocols for transferring data over the web. HTTPS is the secure version.</dd>
  </dl>

  <h2>Product Specs</h2>
  <dl>
    <dt>Battery</dt><dd>5000 mAh</dd>
    <dt>Display</dt><dd>6.5 inch AMOLED</dd>
    <dt>Camera</dt><dd>108 MP main + 12 MP ultra-wide</dd>
  </dl>
</body>
</html>

HTML

Full Editor

Pro Tip

Description lists are often overlooked, but they are perfect for FAQ pages — wrap each <dt>/<dd> pair in a <details> element for a native, no-JavaScript accordion effect.

Related Resources

HTML Reference

Complete tag & property list

HTML How-To Guides

Step-by-step practical guides

HTML Exercises

Practice what you've learned