On The Dl: Mastering HTML Description Lists

Description lists are among the most underutilized elements in modern HTML, yet they offer unique semantic capabilities that no other list element provides. The <dl> element--short for description list or historically known as definition list--has existed since HTML+ in 1993, predating many HTML elements developers use daily. Despite this long history, most developers reach for unordered lists (<ul>) even when working with term-description pairs, losing the semantic meaning and accessibility benefits that description lists provide natively.

This guide explores why description lists matter, how to use them correctly, and when they should be your default choice for structuring related terms and definitions. Whether you're building glossaries, metadata sections, or product specifications, understanding the <dl> element elevates your HTML from merely functional to truly semantic. As part of our comprehensive web development approach, proper HTML semantics form the foundation of accessible, maintainable websites.

What Is the Description List Element?

The <dl> HTML element represents a description list, a list format that pairs terms with their corresponding descriptions. Unlike ordered and unordered lists that use a single child element (<li>) for list items, description lists work with two distinct elements: <dt> for terms and <dd> for descriptions. This structure makes description lists uniquely suited for presenting paired information such as glossaries, metadata, configuration settings, and any scenario where you need to define or describe a series of terms.

The HTML specification describes the <dl> element as enclosing "a list of groups of terms (specified using the <dt> element) and descriptions (provided by <dd> elements)." MDN Web Docs - dl element This design allows for flexible many-to-many relationships where multiple terms can share a single description, or a single term can have multiple descriptions explaining different aspects of that term.

Historical Context

Description lists have been part of HTML since its earliest specifications. Originally called "definition lists" when introduced in HTML+, the element has evolved while maintaining its core purpose of associating terms with definitions. Adrian Roselli - Description List Support 2025 The element was standardized in HTML 2.0 and has remained part of the specification through every HTML version, including HTML5 where it was renamed from "definition list" to "description list" to more accurately reflect its versatile purposes beyond traditional definitions.

Browser Support

Description lists have achieved Baseline Widely Available status, meaning they work reliably across all modern browsers and have been widely available since July 2015. MDN Web Docs - Baseline indicator Browser compatibility includes full support in Chrome, Edge, Firefox, Safari, and all major mobile browsers. This eliminates any concern about using <dl> elements in production applications--the feature is universally supported without requiring polyfills or fallbacks.

Basic Syntax and Structure

Understanding the structural relationship between <dl>, <dt>, and <dd> is essential for using description lists correctly. Unlike other list types, description lists do not wrap each term-description pair in a container element. Instead, <dt> and <dd> elements appear as direct children of the <dl> element, creating a flat structure that can represent complex relationships. Christian Heilmann - dl article

Single Term, Single Description

The most straightforward description list pairs each term with one description:

Multiple Terms, Single Description

One of the unique capabilities of description lists is the ability to share a single description across multiple terms. This pattern is common when you have synonyms, abbreviations, or alternative names that all point to the same concept.

<dl>
 <dt>Firefox</dt>
 <dt>Mozilla Firefox</dt>
 <dt>Fx</dt>
 <dd>A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers.</dd>
</dl>

This structure allows all three terms (Firefox, Mozilla Firefox, and Fx) to associate with the same description, reducing redundancy in your HTML while maintaining clear semantic relationships. MDN Web Docs - dl element

Single Term, Multiple Descriptions

Conversely, a single term can have multiple descriptions, each providing different information about that term. This pattern works well when you need to explain different aspects, definitions, or contexts for one term:

<dl>
 <dt>Firefox</dt>
 <dd>A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation.</dd>
 <dd>The Red Panda, also known as the Lesser Panda, Wah, Bear Cat or Firefox, is a mostly herbivorous mammal.</dd>
</dl>

Key-Value Pattern

The key-value pattern creates a structured representation of metadata:

Accessibility: Built-In Semantic Meaning

Perhaps the most compelling reason to use description lists is their built-in accessibility features. When you use <dl>, <dt>, and <dd> elements correctly, you get automatic semantic meaning that assistive technologies can interpret without any additional ARIA attributes or roles.

Screen Reader Announcements

Screen readers announce description list content differently than other list types, providing valuable context to users who cannot see the visual layout. Testing by accessibility expert Adrian Roselli reveals that screen readers handle description lists with varying levels of sophistication: Adrian Roselli - Description List Support 2025

NVDA with Firefox announces the content as "a list with 8 items" and stops at each <dt> and <dd> individually, allowing users to navigate through the list structure. JAWS with Chrome announces it as "a definition list with 4 items" and presents each term-description pair together.

Native ARIA Role Mapping

The HTML specification maps description list elements to appropriate ARIA roles automatically. The <dl> element receives the list role, <dt> elements receive the term role (the same as <dfn>), and <dd> elements receive the definition role. Adrian Roselli - Description List Support 2025 These mappings happen implicitly--you don't need to add ARIA attributes when using the native HTML elements.

This automatic role assignment means that assistive technology users receive meaningful information about the structure of your content. They understand that terms and descriptions are related in a specific way, unlike when developers use <ul> or <ol> for the same purpose, which only indicates a list without the term-description relationship.

When ARIA Is Unnecessary

An important finding from recent accessibility research is that ARIA roles for description lists are unnecessary and can sometimes cause problems. The associationlist, associationlistitemkey, and associationlistitemvalue roles "never made it out of draft" and should not be used in production. Adrian Roselli - Description List Support 2025 Similarly, the term and definition roles can confuse developers given the existence of <dfn> and provide no additional benefit over the native elements.

The practical guidance is straightforward: use <dl>, <dt>, and <dd> without any ARIA attributes. The native HTML elements provide optimal accessibility support across all screen readers.

Common Use Cases

Understanding when to use description lists helps you make better decisions about HTML structure. While description lists aren't appropriate for every situation, they excel in several specific contexts.

Glossaries and Terminology

Glossaries represent the classic use case for description lists. When defining specialized terms, you need to associate each term with its definition clearly. This structure provides semantic clarity that helps search engines understand your glossary content and assists screen reader users in navigating terminology efficiently. Our SEO services often recommend semantic HTML structures like description lists to improve content understanding by search engines.

Key-Value Data

Description lists excel at representing key-value pairs, which appear frequently in configuration data, metadata, product specifications, and API responses. This pattern creates a machine-readable structure that can be easily parsed by scripts while remaining human-readable on the page.

Metadata and Document Properties

Web documents often include metadata that describes the document itself. Description lists provide an ideal structure for this information, creating clear associations between metadata keys and their values.

FAQ Structures

While FAQs can use various HTML structures, description lists offer a semantic approach when each question is a term and each answer is its description. This aligns with our approach to accessibility-first web design, ensuring that content is meaningful to assistive technologies without requiring additional ARIA markup.

Styling Description Lists with CSS

While description lists have default browser styling, CSS allows you to customize their appearance to match your design system. By default, browsers render <dt> elements as block-level elements, displaying each term on its own line, while <dd> elements display with a default left margin creating indentation.

Two-Column Grid Layout

dl.key-value {
 display: grid;
 grid-template-columns: auto 1fr;
 gap: 0.5rem 1rem;
}

dt {
 font-weight: 600;
 color: #333;
}

dd {
 margin: 0;
}

This grid approach creates a clean key-value layout commonly used for product specifications and metadata. The auto column for terms ensures terms take only the space they need, while descriptions fill the remaining width.

Styled Glossary with Visual Separation

dl.glossary {
 border-top: 1px solid #e0e0e0;
}

dt {
 padding: 1rem 0;
 border-bottom: 1px solid #e0e0e0;
 font-weight: 600;
}

dd {
 padding: 0.5rem 0 1rem;
 margin-left: 0;
 color: #555;
 line-height: 1.6;
}

These styling patterns ensure your description lists look professional while maintaining semantic structure and accessibility.

Best Practices for Description Lists

Following established best practices ensures your description lists are semantically correct, accessible, and maintainable.

Structural Best Practices

• Always wrap your complete description list in a <dl> element
• The <dt> and <dd> elements should be direct children of the <dl>--never wrap term-description pairs in additional containers like <div> elements
• Group related terms and descriptions logically: if multiple terms share one description, place all <dt> elements together followed by the single <dd>

Content Best Practices

• Keep terms concise and descriptions appropriately detailed
• Consider adding microdata or structured data attributes if you need search engines to understand your description list content more deeply

Testing for Accessibility

Verify your description lists work correctly with screen readers by testing with NVDA, JAWS, or VoiceOver. Adrian Roselli - Description List Support 2025 Navigate through the list using virtual cursor and list navigation commands to ensure each term and description is announced appropriately.

Conclusion

The description list element offers unique capabilities that make it the right choice for term-description relationships in HTML. Despite being one of the oldest HTML elements, <dl> remains relevant in modern web development, providing semantic clarity, built-in accessibility features, and flexible structure for complex content relationships.

By understanding when and how to use description lists correctly, you create more meaningful HTML that benefits both users and search engines. The next time you need to present a glossary, metadata, specifications, or any paired term-description content, reach for <dl> instead of defaulting to <ul>--your code, your users, and your content will be better for it.

Semantic HTML is just one aspect of building high-quality web experiences. Our web development services focus on clean code, accessibility, and performance from the ground up.

Sources

1. MDN Web Docs - dl element - Official documentation for syntax, attributes, and examples
2. Christian Heilmann - Keeping it on the dl (2025) - Accessibility benefits and usage patterns
3. Adrian Roselli - Updated Brief Note on Description List Support (2025) - Screen reader compatibility data
4. WHATWG HTML Specification - dl element - Official specification reference