<dl>

Creates term-definition associations

Definition and Usage

The <dl> element establishes a description list.

The <dl> tag is used in conjunction with <dt> (defines terms/names) and <dd> (describes each term/name).

Description lists are ideal for displaying metadata, glossaries, key-value pairs, FAQs, and any content where terms need definitions or descriptions.

Tip: The <dl> tag is semantically appropriate for name-value groups, making your HTML more meaningful and accessible.

Note: A description list can contain multiple term-description pairs, and terms can have multiple descriptions.

Browser Support

The <dl> tag is supported in all browsers:

Chrome

Yes

Firefox

Yes

Safari

Yes

Edge

Yes

Opera

Yes

Attributes

The <dl> tag supports the Global Attributes in HTML.

The <dl> tag also supports the Event Attributes in HTML.

Examples

Basic Description List

Create a simple description list with terms and definitions:

Example
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language - the standard markup language for web pages</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets - used for styling web pages</dd>

  <dt>JavaScript</dt>
  <dd>A programming language used to create interactive web pages</dd>
</dl>

Glossary Example

Create a glossary using description lists:

Example
<h2>Web Development Glossary</h2>
<dl>
  <dt>API</dt>
  <dd>Application Programming Interface - a set of rules that allows programs to communicate with each other</dd>

  <dt>DOM</dt>
  <dd>Document Object Model - a programming interface for HTML and XML documents</dd>

  <dt>REST</dt>
  <dd>Representational State Transfer - an architectural style for designing networked applications</dd>

  <dt>JSON</dt>
  <dd>JavaScript Object Notation - a lightweight data-interchange format</dd>
</dl>

Metadata Example

Display metadata or key-value pairs:

Example
<h3>Product Information</h3>
<dl>
  <dt>Product Name</dt>
  <dd>Wireless Keyboard</dd>

  <dt>Model</dt>
  <dd>KB-2024-PRO</dd>

  <dt>Price</dt>
  <dd>$49.99</dd>

  <dt>Availability</dt>
  <dd>In Stock</dd>
</dl>

FAQ Section

Create an FAQ section with description lists:

Example
<h2>Frequently Asked Questions</h2>
<dl>
  <dt>What is HTML?</dt>
  <dd>HTML stands for HyperText Markup Language. It's the standard markup language for creating web pages and web applications.</dd>

  <dt>Is HTML a programming language?</dt>
  <dd>No, HTML is a markup language, not a programming language. It structures content but doesn't have logic or algorithms like programming languages do.</dd>

  <dt>Do I need to know CSS to use HTML?</dt>
  <dd>While not required, learning CSS alongside HTML is highly recommended for styling and laying out your web pages professionally.</dd>
</dl>

Product Specifications

Display detailed product specifications:

Example
<h3>Laptop Specifications</h3>
<dl>
  <dt>Processor</dt>
  <dd>Intel Core i7-12700H (12th Gen)</dd>

  <dt>RAM</dt>
  <dd>16GB DDR5</dd>

  <dt>Storage</dt>
  <dd>512GB NVMe SSD</dd>

  <dt>Display</dt>
  <dd>15.6" Full HD (1920x1080) IPS</dd>

  <dt>Graphics</dt>
  <dd>NVIDIA GeForce RTX 3060 6GB</dd>

  <dt>Weight</dt>
  <dd>2.1 kg (4.6 lbs)</dd>
</dl>

Multiple Descriptions per Term

One term can have multiple descriptions:

Example
<dl>
  <dt>Coffee</dt>
  <dd>A hot drink made from roasted and ground coffee beans</dd>
  <dd>Popular morning beverage consumed worldwide</dd>
  <dd>Contains caffeine which provides energy and alertness</dd>

  <dt>Tea</dt>
  <dd>A beverage made by steeping tea leaves in hot water</dd>
  <dd>Second most consumed drink in the world after water</dd>
</dl>

Nested Description Lists

Create hierarchical structures with nested lists:

Example
<dl>
  <dt>Front-end Technologies</dt>
  <dd>
    <dl>
      <dt>HTML</dt>
      <dd>Structure and content</dd>

      <dt>CSS</dt>
      <dd>Styling and layout</dd>

      <dt>JavaScript</dt>
      <dd>Interactivity and behavior</dd>
    </dl>
  </dd>

  <dt>Back-end Technologies</dt>
  <dd>
    <dl>
      <dt>Node.js</dt>
      <dd>JavaScript runtime</dd>

      <dt>Python</dt>
      <dd>General-purpose language</dd>
    </dl>
  </dd>
</dl>

Styled Description Lists

Apply CSS styling to enhance appearance:

Example
<style>
  .styled-dl {
    background: #f9f9f9;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }

  .styled-dl dt {
    font-size: 18px;
    font-weight: 700;
    color: #745af2;
    margin-top: 16px;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 8px;
  }

  .styled-dl dd {
    margin-left: 0;
    margin-top: 8px;
    color: #555;
    line-height: 1.6;
  }
</style>

<dl class="styled-dl">
  <dt>HTML</dt>
  <dd>Markup language for web pages</dd>

  <dt>CSS</dt>
  <dd>Stylesheet language for design</dd>
</dl>

Description List Structure

Understanding the relationship between <dl>, <dt>, and <dd>:

<dl>: Description List - The container for the entire list
<dt>: Description Term - The term or name being described
<dd>: Description Definition - The description or value of the term

Structure Rules:

The <dl> tag contains one or more <dt>/<dd> pairs
Each <dt> represents a term or name
Each <dd> provides the description or definition
Multiple <dd> elements can follow a single <dt>
The order is important: <dt> should come before its associated <dd> element(s)

CSS Styling Techniques

Common CSS techniques for styling description lists:

Horizontal Layout

Example
<style>
  dl {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 10px 20px;
  }

  dt {
    font-weight: bold;
    text-align: right;
    color: #745af2;
  }

  dd {
    margin: 0;
  }
</style>

<dl>
  <dt>Name</dt>
  <dd>John Doe</dd>

  <dt>Email</dt>
  <dd>john@example.com</dd>

  <dt>Location</dt>
  <dd>New York, USA</dd>
</dl>

Card Style Layout

Example
<style>
  dl {
    background: var(--bg-primary);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border-radius: 12px;
    padding: 24px;
    max-width: 600px;
  }

  dt {
    font-size: 18px;
    font-weight: 700;
    color: #745af2;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 8px;
    margin-bottom: 12px;
    margin-top: 16px;
  }

  dt:first-child {
    margin-top: 0;
  }

  dd {
    margin-left: 0;
    margin-bottom: 8px;
    color: #555;
    line-height: 1.6;
  }
</style>

Grid Layout

Example
<style>
  dl {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  dt {
    grid-column: 1 / -1;
    font-weight: bold;
    font-size: 20px;
    color: #745af2;
    border-bottom: 3px solid #745af2;
    padding-bottom: 8px;
    margin-top: 16px;
  }

  dd {
    margin: 0;
    padding: 12px;
    background: #f5f5f5;
    border-radius: 8px;
  }
</style>

When to Use <dl> vs <ul>/<ol>

Choosing the right list type for your content:

Use <dl> when:

You have term-definition pairs
Displaying metadata or key-value pairs
Creating glossaries or dictionaries
Showing product specifications
Building FAQ sections
Presenting configuration settings

Use <ul> when:

Items don't need definitions
Order doesn't matter
Creating navigation menus
Listing features or items

Use <ol> when:

Order or sequence is important
Creating step-by-step instructions
Ranking or prioritizing items
Numbered procedures

Accessibility

Description lists and accessibility best practices:

Screen readers announce description lists and identify the structure
Properly structured dl/dt/dd helps users understand term-description relationships
Use semantic HTML - don't recreate description lists with divs
Ensure adequate color contrast when styling terms and descriptions
Keep term-description relationships clear and logical
Avoid overly complex nested structures that may confuse users
Consider adding ARIA labels for complex description lists if needed

Accessibility Tip: Screen readers typically announce "description list" when encountering a <dl> element, helping users understand the content structure.

Try it Yourself

Interactive Example

Here's a live example of a styled description list:

HTML: HyperText Markup Language - structures web content
CSS: Cascading Style Sheets - styles and layouts web pages
JavaScript: Programming language for web interactivity

Try in Code Playground

Best Practices

Use <dl> only for term-definition pairs, not generic content
Ensure each <dt> has at least one corresponding <dd>
Keep terms concise and descriptions clear
Use multiple <dd> elements when a term has multiple meanings
Maintain proper nesting when creating hierarchical lists
Apply CSS to customize layout (horizontal, grid, cards)
Consider responsive design for mobile devices
Use semantic HTML instead of divs styled to look like description lists
Test with screen readers to ensure accessibility

Default CSS Settings

Most browsers will display the <dl> element with the following default values:

Default CSS
dl {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
}

Related Tags

<dt>
Defines a term in a description list
<dd>
Defines a description in a description list
<ul>
Defines an unordered list
<ol>
Defines an ordered list