Utilizing The Underused But Semantically Awesome Definition List

What Is a Definition List?

Definition lists remain one of HTML's most powerful yet overlooked semantic elements. While developers reach for unordered lists and tables, the <dl> element provides purpose-built markup for term-description relationships--a pattern that appears constantly in advertising contexts, from campaign metrics to platform features. Despite being part of HTML since 1993, definition lists remain underutilized, leaving both semantic meaning and accessibility benefits on the table.

The <dl> HTML element represents a description list, enclosing groups of terms (specified using the <dt> element) and descriptions (provided by <dd> elements). This semantic structure is purpose-built for key-value pairs, glossaries, metadata, and any content where one item defines or explains another. Unlike unordered lists (<ul>) which represent simple sequences without inherent order, or ordered lists (<ol>) which imply sequence priority, definition lists explicitly communicate that each item is connected to a specific term through a definition relationship.

The Three Essential Elements

<dl> - The Container

• Wraps the entire term-description group
• Signals semantic purpose to browsers, search engines, and assistive technologies
• Receives the list role in accessibility APIs

<dt> - The Term

• Represents the item being defined or described
• Can appear multiple times (multiple terms for one definition)
• Semantic role maps to term in accessibility specifications

<dd> - The Description

• Provides the definition, explanation, or value for preceding terms
• Can appear multiple times (multiple descriptions for one term)
• Semantic role maps to definition in accessibility specifications

<dl>
 <dt>CPC</dt>
 <dd>Cost Per Click - The amount you pay each time someone clicks your ad</dd>
 <dt>CTR</dt>
 <dd>Click-Through Rate - The percentage of impressions that result in a click</dd>
 <dt>ROAS</dt>
 <dd>Return On Ad Spend - Revenue generated per dollar spent on advertising</dd>
</dl>

This structure is particularly valuable in paid advertising work, where you constantly need to communicate acronyms, metrics, platform features, and technical specifications. Using the proper semantic markup ensures that both users and search engines understand the relationship between terms and their definitions, which supports our broader SEO strategy and improves content accessibility across all your paid advertising campaigns.

Practical Examples for Paid Advertising

Campaign Metrics Glossary Example

<!-- Campaign Performance Metrics -->
<dl class="metrics-glossary">
 <dt>CPC</dt>
 <dd>Cost Per Click - The actual amount you pay when someone clicks your advertisement. This is calculated by dividing total ad spend by the number of clicks received.</dd>

 <dt>CPM</dt>
 <dd>Cost Per Mille - The cost for one thousand impressions. Useful for brand awareness campaigns where clicks are less relevant than reach.</dd>

 <dt>CTR</dt>
 <dd>Click-Through Rate - The percentage of people who see your ad and then click it. Calculated as (clicks / impressions) × 100.</dd>

 <dt>ROAS</dt>
 <dd>Return On Ad Spend - Revenue generated for every dollar spent on advertising. A ROAS of 4:1 means you earn $4 for each $1 spent.</dd>

 <dt>CPA</dt>
 <dd>Cost Per Acquisition - The average cost to acquire one customer or conversion. Essential for measuring campaign profitability.</dd>

 <dt>CVR</dt>
 <dd>Conversion Rate - The percentage of clicks that result in a desired action, such as a purchase, sign-up, or lead submission.</dd>
</dl>

Platform Feature Comparison

<!-- Google Ads Bidding Strategies -->
<dl class="bidding-features">
 <dt>Manual CPC</dt>
 <dd>You set maximum bid amounts for individual ads. Maximum control, requires ongoing management.</dd>

 <dt>Maximize Clicks</dt>
 <dd>Automated bidding that gets you the most clicks within your budget. Ideal for traffic-focused campaigns.</dd>

 <dt>Target CPA</dt>
 <dd>Automated bidding that aims to get conversions at your target cost per acquisition. Requires historical conversion data.</dd>

 <dt>Target ROAS</dt>
 <dd>Automated bidding focused on revenue generation, targeting a specific return on ad spend percentage.</dd>

 <dt>Maximize Conversions</dt>
 <dd>Automated bidding strategy that uses machine learning to get the most conversions within your budget.</dd>
</dl>

Common patterns in advertising documentation include explaining bidding options like Manual bidding, Automated bidding, Target CPA, and Target ROAS. Definition lists also work well for describing audience targeting options such as Core audiences, Custom audiences, and Lookalike audiences, as well as defining ad formats including Responsive ads, Static images, Video ads, and Carousel ads. This semantic approach to content organization supports our commitment to technical excellence in every project we deliver. When implementing these patterns, consider integrating with your AI automation workflows to streamline campaign management.

Accessibility: Screen Reader Support in 2025

Modern screen readers handle definition lists with varying degrees of sophistication. According to comprehensive testing by accessibility experts, description list support continues to be generally good, with VoiceOver remaining the notable outlier. The 2025 accessibility analysis by Adrian Roselli provides detailed testing results across all major screen readers.

Screen Reader Performance Overview

NVDA + Firefox delivers excellent support, announcing the structure as "list with X items" with full navigation capabilities. Each term and description is announced with appropriate pause, allowing users to understand the relationship between paired items.

JAWS + Chrome provides good support, announcing as "definition list with X items" which explicitly communicates the semantic purpose. Terms and descriptions are read together appropriately, maintaining the conceptual connection.

VoiceOver on macOS and iOS shows variable support, announcing as "description list" or "definition list" but exhibiting some quirks with virtual cursor navigation. Users typically need to use VO modifier keys for the best results when navigating through complex definition lists.

Windows Narrator offers acceptable support, though it does not always announce the list presence. Terms and descriptions are read individually, which can make understanding the relationships more challenging.

TalkBack on Android provides good support, announcing terms with "term" and descriptions with "definition" labels. List navigation is available and works reliably across Android versions.

ARIA Roles: Not Necessary

The term and definition ARIA roles never made it out of draft specification and should not be used with native <dl> elements. The HTML elements have implicit semantic meaning that maps correctly to accessibility APIs. As documented by Adrian Roselli, adding ARIA roles creates redundancy and potential confusion. Trust the native HTML semantics--they work correctly out of the box.

This commitment to proper semantic markup and accessibility reflects our broader approach to creating inclusive digital experiences. Our web development services ensure all client deliverables meet WCAG standards and provide accessible experiences for all users.

Styling Definition Lists with CSS

Definition lists can be styled effectively to create visually appealing layouts while maintaining semantic meaning. Modern CSS layouts like Grid and Flexbox work exceptionally well with definition list structures.

Horizontal Layout Example

/* Horizontal term-description layout using CSS Grid */
dl.horizontal {
 display: grid;
 grid-template-columns: auto 1fr;
 gap: 0.5rem 1rem;
 align-items: baseline;
}

dt {
 font-weight: 600;
 color: #1a1a2e;
 min-width: 120px;
}

dd {
 margin: 0;
 color: #4a4a6a;
 line-height: 1.6;
}

This horizontal grid layout is ideal for displaying key-value data side by side, such as metrics glossaries or feature specifications where visual alignment helps users scan information quickly.

Vertical Layout Example

/* Vertical stacked glossary-style presentation */
dl.vertical {
 display: flex;
 flex-direction: column;
 gap: 1.5rem;
 padding: 1.5rem;
 background: #f8f9fa;
 border-radius: 8px;
}

dt {
 font-weight: 600;
 font-size: 1.1rem;
 color: #2d3748;
 margin-bottom: 0.25rem;
}

dd {
 margin: 0;
 margin-left: 0;
 color: #4a5568;
 line-height: 1.7;
 padding-left: 1rem;
 border-left: 3px solid #3182ce;
}

This vertical flexbox layout works well for glossary-style presentations where each term-description pair should be visually distinct. The left border on descriptions provides visual separation while maintaining the semantic relationship.

Responsive Considerations

For responsive designs, you might combine both approaches using CSS media queries. On larger screens, use the horizontal grid layout for efficient space usage. On mobile devices, switch to the vertical stacked layout for better readability:

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

@media (max-width: 640px) {
 dl {
 display: flex;
 flex-direction: column;
 gap: 1rem;
 }
}

These styling approaches ensure your definition lists look professional while maintaining the semantic structure that benefits both SEO and accessibility--a combination that supports our broader conversion optimization services and helps improve user experience across all touchpoints.

Common Mistakes and How to Avoid Them

Despite their simplicity, definition lists are frequently misused. Understanding these common pitfalls helps you write more semantically correct HTML.

Mistake 1: Using <ul> for Everything

Problem: Many developers default to unordered lists for all list-like content, losing the semantic meaning of term-description relationships. When you use <ul> for glossaries or metrics, assistive technologies and search engines don't understand that one item defines another--they just see a simple list of items.

Solution: Use <dl> when one item genuinely explains or defines another. Reserve <ul> for simple collections where order doesn't matter and items are equivalent.

Mistake 2: Nesting Incorrect Elements

Problem: Placing non-term or non-description elements directly inside <dl> breaks the semantic structure. You might be tempted to wrap additional content or use <div> elements for styling, but this creates invalid HTML.

Solution: Ensure only <dt> and <dd> elements appear as direct children of <dl>. If you need to group related terms and descriptions, use multiple adjacent <dl> elements rather than improperly nested structures.

Mistake 3: Forgetting Multiple Terms or Descriptions

Problem: Creating duplicate <dl> structures for related terms adds unnecessary markup complexity and can confuse screen readers about the relationships between items.

Solution: Remember that multiple <dt> elements can precede a single <dd>, and vice versa. This is semantically correct and reduces markup duplication.

<!-- Correct: Multiple terms, one description -->
<dl>
 <dt>Chrome</dt>
 <dt>Google Chrome</dt>
 <dt>Chromium</dt>
 <dd>A cross-platform web browser developed by Google</dd>
</dl>

Mistake 4: Accessibility Role Overload

Problem: Adding term and definition ARIA roles unnecessarily creates redundancy. The native HTML elements already have correct implicit semantics that map properly to accessibility APIs.

Solution: Trust the native HTML semantics. No ARIA roles are needed--the <dl>, <dt>, and <dd> elements have correct implicit semantics that work correctly across all modern browsers and assistive technologies.

Sources

1. MDN Web Docs - dl: The Description List element
2. W3Schools - HTML dl tag
3. Adrian Roselli - Updated Brief Note on Description List Support