HTML Description Lists Guide

Learn how to create and style description lists (definition lists) in HTML

What are Description Lists?

Description lists (<dl>) in HTML are used to represent a list of terms and their corresponding descriptions. This element is perfect for:

Glossaries and dictionaries
Metadata displays (key-value pairs)
FAQ sections
Product specifications
Any content that pairs terms with explanations

Key Features:

Semantically associates terms with their definitions
Supports multiple descriptions for a single term
Flexible styling options with CSS
Can be nested or combined with other list types
Improves accessibility for term-definition content

Interview & Exam Preparation

Common Interview Questions:

What is the purpose of the <dl> element in HTML?
How does a description list differ from ordered/unordered lists?
When would you use multiple <dd> elements for a single <dt>?
How would you style a description list to display horizontally?
What are the accessibility benefits of using description lists?

Key Concepts to Remember:

Description lists are semantic HTML elements specifically for term-definition pairs
They consist of <dt> (term) and <dd> (description) elements
Each <dt> can have one or more <dd> elements
Modern CSS Grid/Flexbox makes horizontal layouts easy
Screen readers understand the term-definition relationship

Basic Description List

Simple term-definition pairs with default styling

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

Usage: For glossaries, metadata displays, or any term-definition content

Multiple Descriptions

Single term with multiple descriptions

<dl>
  <dt>JavaScript</dt>
  <dd>A programming language</dd>
  <dd>Used for web development</dd>
  <dd>Runs in the browser</dd>
</dl>

Usage: When a term has several definitions or aspects that need explanation

Empty Term

Description list with visually hidden terms

<dl>
  <dt style="visibility: hidden;">Hidden Term</dt>
  <dd>This description stands alone visually</dd>
  
  <dt style="display: none;">Completely Hidden</dt>
  <dd>Another standalone description</dd>
</dl>

Usage: For visually consistent layouts when terms aren't needed visually

Horizontal Layout

Terms and descriptions displayed in columns

<style>
.dl-horizontal {
  display: grid;
  grid-template-columns: max-content auto;
  gap: 10px 20px;
}
.dl-horizontal dt {
  grid-column: 1;
  font-weight: bold;
}
.dl-horizontal dd {
  grid-column: 2;
  margin: 0;
}
</style>

<dl class="dl-horizontal">
  <dt>Name:</dt>
  <dd>John Smith</dd>
  
  <dt>Email:</dt>
  <dd>john@example.com</dd>
</dl><style>
.dl-horizontal {
  display: grid;
  grid-template-columns: max-content auto;
  gap: 10px 20px;
}
.dl-horizontal dt {
  grid-column: 1;
  font-weight: bold;
}
.dl-horizontal dd {
  grid-column: 2;
  margin: 0;
}
</style>

<dl class="dl-horizontal">
  <dt>Name:</dt>
  <dd>John Smith</dd>
  
  <dt>Email:</dt>
  <dd>john@example.com</dd>
</dl>

Note: Ideal for contact information or key-value pairs

Card Layout

Description list styled as cards

<style>
.dl-cards dt {
  background: #4a6ee0;
  color: white;
  padding: 8px 15px;
  border-radius: 5px 5px 0 0;
  margin-top: 15px;
}
.dl-cards dd {
  background: white;
  margin: 0;
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-top: none;
  border-radius: 0 0 5px 5px;
}
</style>

<dl class="dl-cards">
  <dt>Frontend</dt>
  <dd>HTML, CSS, JavaScript</dd>
  
  <dt>Backend</dt>
  <dd>Node.js, Python, PHP</dd>
</dl><style>
.dl-cards dt {
  background: #4a6ee0;
  color: white;
  padding: 8px 15px;
  border-radius: 5px 5px 0 0;
  margin-top: 15px;
}
.dl-cards dd {
  background: white;
  margin: 0;
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-top: none;
  border-radius: 0 0 5px 5px;
}
</style>

<dl class="dl-cards">
  <dt>Frontend</dt>
  <dd>HTML, CSS, JavaScript</dd>
  
  <dt>Backend</dt>
  <dd>Node.js, Python, PHP</dd>
</dl>

Note: Great for highlighting categories with their items

Inline Layout

Terms and descriptions displayed inline

<style>
.dl-inline dt, .dl-inline dd {
  display: inline;
  margin: 0;
}
.dl-inline dt {
  font-weight: bold;
}
.dl-inline dt::after {
  content: ": ";
}
.dl-inline dd::after {
  content: "\A";
  white-space: pre;
}
</style>

<dl class="dl-inline">
  <dt>Browser</dt>
  <dd>Chrome</dd>
  <dt>Version</dt>
  <dd>102.0</dd>
  <dt>OS</dt>
  <dd>Windows 10</dd>
</dl><style>
.dl-inline dt, .dl-inline dd {
  display: inline;
  margin: 0;
}
.dl-inline dt {
  font-weight: bold;
}
.dl-inline dt::after {
  content: ": ";
}
.dl-inline dd::after {
  content: "\A";
  white-space: pre;
}
</style>

<dl class="dl-inline">
  <dt>Browser</dt>
  <dd>Chrome</dd>
  <dt>Version</dt>
  <dd>102.0</dd>
  <dt>OS</dt>
  <dd>Windows 10</dd>
</dl>

Note: Useful for compact metadata displays

Glossary of Terms

<h2>Web Development Glossary</h2>
<dl class="glossary">
  <dt>DOM</dt>
  <dd>Document Object Model - a programming interface for web documents</dd>
  
  <dt>AJAX</dt>
  <dd>Asynchronous JavaScript and XML - technique for creating async web apps</dd>
  
  <dt>SEO</dt>
  <dd>Search Engine Optimization - process of improving website visibility</dd>
</dl>

<style>
.glossary dt {
  font-weight: bold;
  color: #2c3e50;
  margin-top: 15px;
  font-size: 1.1em;
}
.glossary dd {
  margin-left: 20px;
  padding: 5px 0;
  border-bottom: 1px solid #eee;
}
</style><h2>Web Development Glossary</h2>
<dl class="glossary">
  <dt>DOM</dt>
  <dd>Document Object Model - a programming interface for web documents</dd>
  
  <dt>AJAX</dt>
  <dd>Asynchronous JavaScript and XML - technique for creating async web apps</dd>
  
  <dt>SEO</dt>
  <dd>Search Engine Optimization - process of improving website visibility</dd>
</dl>

<style>
.glossary dt {
  font-weight: bold;
  color: #2c3e50;
  margin-top: 15px;
  font-size: 1.1em;
}
.glossary dd {
  margin-left: 20px;
  padding: 5px 0;
  border-bottom: 1px solid #eee;
}
</style>

Product Specifications

<h2>Product Specifications</h2>
<dl class="specs">
  <dt>Model Number</dt>
  <dd>XJ-4500</dd>
  
  <dt>Dimensions</dt>
  <dd>12.5 x 8.2 x 1.4 inches</dd>
  
  <dt>Weight</dt>
  <dd>2.5 lbs</dd>
  
  <dt>Warranty</dt>
  <dd>1 year limited warranty</dd>
</dl>

<style>
.specs {
  display: grid;
  grid-template-columns: max-content auto;
  gap: 10px 20px;
  background: #f8f9fa;
  padding: 15px;
  border-radius: 5px;
}
.specs dt {
  font-weight: bold;
  color: #4a6ee0;
}
.specs dd {
  margin: 0;
}
</style><h2>Product Specifications</h2>
<dl class="specs">
  <dt>Model Number</dt>
  <dd>XJ-4500</dd>
  
  <dt>Dimensions</dt>
  <dd>12.5 x 8.2 x 1.4 inches</dd>
  
  <dt>Weight</dt>
  <dd>2.5 lbs</dd>
  
  <dt>Warranty</dt>
  <dd>1 year limited warranty</dd>
</dl>

<style>
.specs {
  display: grid;
  grid-template-columns: max-content auto;
  gap: 10px 20px;
  background: #f8f9fa;
  padding: 15px;
  border-radius: 5px;
}
.specs dt {
  font-weight: bold;
  color: #4a6ee0;
}
.specs dd {
  margin: 0;
}
</style>

FAQ Section

<h2>Frequently Asked Questions</h2>
<dl class="faq">
  <dt>How do I reset my password?</dt>
  <dd>Click on "Forgot password" on the login page and follow the instructions.</dd>
  
  <dt>What payment methods do you accept?</dt>
  <dd>We accept all major credit cards, PayPal, and bank transfers.</dd>
  
  <dt>Is there a mobile app available?</dt>
  <dd>Yes, our app is available on both iOS and Android platforms.</dd>
</dl>

<style>
.faq dt {
  font-weight: bold;
  background: #f0f4f8;
  padding: 10px 15px;
  border-left: 3px solid #4a6ee0;
  cursor: pointer;
}
.faq dt:hover {
  background: #e1e8f0;
}
.faq dd {
  margin: 0;
  padding: 10px 15px 20px;
  border-bottom: 1px solid #eee;
}
</style><h2>Frequently Asked Questions</h2>
<dl class="faq">
  <dt>How do I reset my password?</dt>
  <dd>Click on "Forgot password" on the login page and follow the instructions.</dd>
  
  <dt>What payment methods do you accept?</dt>
  <dd>We accept all major credit cards, PayPal, and bank transfers.</dd>
  
  <dt>Is there a mobile app available?</dt>
  <dd>Yes, our app is available on both iOS and Android platforms.</dd>
</dl>

<style>
.faq dt {
  font-weight: bold;
  background: #f0f4f8;
  padding: 10px 15px;
  border-left: 3px solid #4a6ee0;
  cursor: pointer;
}
.faq dt:hover {
  background: #e1e8f0;
}
.faq dd {
  margin: 0;
  padding: 10px 15px 20px;
  border-bottom: 1px solid #eee;
}
</style>

Nested Description Lists

Description lists within description lists

<dl>
  <dt>Frontend Technologies</dt>
  <dd>
    <dl>
      <dt>HTML</dt>
      <dd>Structure of web pages</dd>
      
      <dt>CSS</dt>
      <dd>Styling of web pages</dd>
    </dl>
  </dd>
  
  <dt>Backend Technologies</dt>
  <dd>
    <dl>
      <dt>Node.js</dt>
      <dd>JavaScript runtime</dd>
      
      <dt>Python</dt>
      <dd>General purpose language</dd>
    </dl>
  </dd>
</dl><dl>
  <dt>Frontend Technologies</dt>
  <dd>
    <dl>
      <dt>HTML</dt>
      <dd>Structure of web pages</dd>
      
      <dt>CSS</dt>
      <dd>Styling of web pages</dd>
    </dl>
  </dd>
  
  <dt>Backend Technologies</dt>
  <dd>
    <dl>
      <dt>Node.js</dt>
      <dd>JavaScript runtime</dd>
      
      <dt>Python</dt>
      <dd>General purpose language</dd>
    </dl>
  </dd>
</dl>

Usage: For hierarchical term-definition structures

Mixed with Other Lists

Combining description lists with ordered/unordered lists

<dl>
  <dt>Development Process</dt>
  <dd>
    <ol>
      <li>Planning</li>
      <li>Design</li>
      <li>Implementation</li>
    </ol>
  </dd>
  
  <dt>Required Skills</dt>
  <dd>
    <ul>
      <li>HTML/CSS</li>
      <li>JavaScript</li>
      <li>Version Control</li>
    </ul>
  </dd>
</dl><dl>
  <dt>Development Process</dt>
  <dd>
    <ol>
      <li>Planning</li>
      <li>Design</li>
      <li>Implementation</li>
    </ol>
  </dd>
  
  <dt>Required Skills</dt>
  <dd>
    <ul>
      <li>HTML/CSS</li>
      <li>JavaScript</li>
      <li>Version Control</li>
    </ul>
  </dd>
</dl>

Usage: When definitions require list structures

Custom Term Indicators

Replacing default styling with custom markers

<style>
.custom-terms dt {
  position: relative;
  padding-left: 25px;
  font-weight: bold;
}
.custom-terms dt::before {
  content: "❯";
  position: absolute;
  left: 0;
  color: #4a6ee0;
}
.custom-terms dd {
  margin-left: 25px;
  padding: 5px 0;
}
</style>

<dl class="custom-terms">
  <dt>Accessibility</dt>
  <dd>Making websites usable by people with disabilities</dd>
  
  <dt>Responsiveness</dt>
  <dd>Adapting layout to different screen sizes</dd>
</dl><style>
.custom-terms dt {
  position: relative;
  padding-left: 25px;
  font-weight: bold;
}
.custom-terms dt::before {
  content: "❯";
  position: absolute;
  left: 0;
  color: #4a6ee0;
}
.custom-terms dd {
  margin-left: 25px;
  padding: 5px 0;
}
</style>

<dl class="custom-terms">
  <dt>Accessibility</dt>
  <dd>Making websites usable by people with disabilities</dd>
  
  <dt>Responsiveness</dt>
  <dd>Adapting layout to different screen sizes</dd>
</dl>

Note: Allows for creative visual indicators for terms

Bordered Layout

Description list with bordered sections

<style>
.bordered-dl dt {
  background: #4a6ee0;
  color: white;
  padding: 8px 15px;
  margin-top: 15px;
  border-radius: 5px 5px 0 0;
}
.bordered-dl dd {
  margin: 0;
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-top: none;
}
.bordered-dl dd:last-child {
  border-radius: 0 0 5px 5px;
}
</style>

<dl class="bordered-dl">
  <dt>HTML Elements</dt>
  <dd>&lt;div&gt; - content division</dd>
  <dd>&lt;span&gt; - inline container</dd>
  
  <dt>CSS Properties</dt>
  <dd>display - controls layout</dd>
  <dd>position - positioning method</dd>
</dl><style>
.bordered-dl dt {
  background: #4a6ee0;
  color: white;
  padding: 8px 15px;
  margin-top: 15px;
  border-radius: 5px 5px 0 0;
}
.bordered-dl dd {
  margin: 0;
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-top: none;
}
.bordered-dl dd:last-child {
  border-radius: 0 0 5px 5px;
}
</style>

<dl class="bordered-dl">
  <dt>HTML Elements</dt>
  <dd>&lt;div&gt; - content division</dd>
  <dd>&lt;span&gt; - inline container</dd>
  
  <dt>CSS Properties</dt>
  <dd>display - controls layout</dd>
  <dd>position - positioning method</dd>
</dl>

Note: Creates visual separation between term groups

Description List Playground

Experiment with description lists in our live editor

Description List Examples Preview

Ready-to-use examples covering different use cases

Live Preview

Features Included

Basic Lists

Term-definition pairs

Multiple Descriptions

One term, many definitions

Layouts

Horizontal, card, etc.

Styling

Custom CSS examples

All examples will be loaded into an interactive editor where you can modify and test them

Exam & Interview Preparation

Common Interview Questions

Q: What is the semantic purpose of the <dl> element?
A: The <dl> element is specifically designed for associating terms (<dt>) with their descriptions (<dd>), making it semantically appropriate for glossaries, metadata, and other term-definition content.
Q: How would you style a description list to display terms and descriptions side by side?
A: Using CSS Grid with grid-template-columns: max-content auto; on the <dl> and assigning <dt> to column 1 and <dd> to column 2 creates a clean side-by-side layout.
Q: When would you choose a description list over a table for displaying key-value pairs?
A: Description lists are more semantic for simple term-description relationships, while tables are better for complex data with multiple related values. DLs are also more accessible for screen readers in these cases.

Key Concepts to Remember

Semantic Structure: <dl> is for term-description pairs, <ul>/<ol> are for general lists
Multiple Descriptions: A single <dt> can have multiple <dd> elements
Accessibility: Screen readers announce the relationship between terms and descriptions
Styling Flexibility: Modern CSS allows for horizontal, card, and other creative layouts
Common Uses: Glossaries, metadata displays, FAQs, and specifications

Practical Scenarios

Creating a product specification sheet
Building an accessible FAQ section
Displaying metadata like author, date, etc.
Implementing a glossary of technical terms
Showing key-value pairs in a settings panel

< Previous Next >

HTML Description Lists Guide

What are Description Lists?

Key Features:

Interview & Exam Preparation

Description List Basics

Basic Description List

Multiple Descriptions

Empty Term

Advanced Layout Techniques

Horizontal Layout

Card Layout

Inline Layout

Practical Examples

Glossary of Terms

Product Specifications

FAQ Section

Nesting and Combining Lists

Nested Description Lists

Mixed with Other Lists

Advanced Styling Techniques

Custom Term Indicators

Bordered Layout

Description List Playground

Description List Examples Preview

Features Included

Exam & Interview Preparation

Common Interview Questions

Key Concepts to Remember

Practical Scenarios