HTML Description Lists

Learn how to organize and present key-value pairs, definitions, and metadata using HTML's most underrated list element.

Beginner Friendly15 min readInteractive Examples

Quick Navigation

Intro Syntax Examples Attributes Styling Accessibility Quiz

1What are Description Lists?

Description lists (previously called definition lists) are perfect for displaying terms and their descriptions, key-value pairs, or any content that follows a name-value pattern.

💡 Perfect for: Glossaries, metadata displays, FAQ sections, product specifications, and any content where you need to pair labels with values.

✅ When to use

• Glossary terms
• Metadata (author, date, tags)
• FAQ sections
• Product specifications
• Configuration settings

❌ When not to use

• Navigation menus
• Simple item lists
• Step-by-step instructions
• Blog post content

2Basic Syntax & Structure

The Three Key Elements:

<dl>: The container element that wraps the entire description list
<dt>: The term being described (can be a name, label, or key)
<dd>: The description or value associated with the term

html

<dl>
  <dt>Web Development</dt>
  <dd>The work involved in developing a website for the Internet</dd>
  
  <dt>HTML</dt>
  <dd>HyperText Markup Language - the standard markup language for web pages</dd>
  
  <dt>CSS</dt>
  <dd>Cascading Style Sheets - used for describing the presentation of web pages</dd>
</dl>

🎯 Key Points:

• You can have multiple <dd> elements for one <dt>
• You can have multiple <dt> elements for one <dd>
• The elements must be direct children of <dl>
• Screen readers announce these lists appropriately for better accessibility

3Real-World Examples

📚 Glossary Example

API: Application Programming Interface - a set of rules that allows programs to talk to each other
Responsive Design: A web design approach that makes web pages render well on a variety of devices and window sizes
DOM: Document Object Model - a programming interface for web documents that represents the structure of a web page

html

<dl>
  <dt>API</dt>
  <dd>Application Programming Interface - a set of rules that allows programs to talk to each other</dd>
  
  <dt>Responsive Design</dt>
  <dd>A web design approach that makes web pages render well on a variety of devices</dd>
</dl>

📱 Product Specifications

Display: 6.1-inch Super Retina XDR
Chip: A15 Bionic Chip
Storage: 128GB, 256GB, 512GB
Camera: Dual 12MP camera system

html

<dl class="grid grid-cols-2 gap-4">
  <div>
    <dt class="font-semibold">Display</dt>
    <dd>6.1-inch Super Retina XDR</dd>
  </div>
  <div>
    <dt class="font-semibold">Chip</dt>
    <dd>A15 Bionic Chip</dd>
  </div>
  <!-- More items... -->
</dl>

❓ FAQ Section

What's the difference between HTML and HTML5?: HTML5 is the latest version of HTML with new elements, attributes, and behaviors. It introduces semantic elements like <header>, <footer>, <article>, and new form input types.
Do I need to learn JavaScript for web development?: While you can create static websites with just HTML and CSS, JavaScript is essential for adding interactivity, dynamic content, and building modern web applications.

4🎮 Interactive Playground

Live Editor

Preview

Frontend: Client-side development
Backend: Server-side development
Full Stack: Both frontend and backend

Your Progress

Description Lists60%

💡 Quick Tips

•Use for true name-value relationships
•Perfect for metadata and specifications
•Great accessibility support
•Style with CSS Grid for layouts

🚀 Next Steps

HTML Tables →CSS Flexbox →CSS Grid →

👥 Community

Students learning this:2,847

Completion rate:94%

Average time:12 min

🎯 Quick Knowledge Check

Which of these is the correct use of a description list?

A. Navigation menu itemsB. Product specifications✓ CorrectC. Blog post contentD. Image gallery