Description lists (formerly called definition lists) are used to display name-value pairs, terms and definitions, or any content where items have descriptions. They're perfect for glossaries, metadata, and FAQs.
The DL Element
The <dl> (description list) element is a container for a list of terms and their descriptions. It contains <dt> (description term) and <dd> (description details) elements.
basic-dl.html
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
<dt>JavaScript</dt>
<dd>Programming language for web interactivity</dd>
</dl>This renders as:
- HTML
- HyperText Markup Language
- CSS
- Cascading Style Sheets
- JavaScript
- Programming language for web interactivity
Structure of Description Lists
DT - Description Term
The <dt> element represents the term, name, or question in a description list.
DD - Description Details
The <dd> element provides the description, definition, or answer associated with the preceding term.
Basic Pattern
pattern.html
<dl>
<dt>Term 1</dt>
<dd>Description 1</dd>
<dt>Term 2</dt>
<dd>Description 2</dd>
</dl>Multiple Terms or Definitions
One Term, Multiple Definitions
multiple-definitions.html
<dl>
<dt>Browser</dt>
<dd>A software application for accessing websites</dd>
<dd>Examples include Chrome, Firefox, and Safari</dd>
<dd>Also called a web browser or internet browser</dd>
</dl>Multiple Terms, One Definition
multiple-terms.html
<dl>
<dt>HTML</dt>
<dt>HyperText Markup Language</dt>
<dd>The standard language for creating web pages</dd>
<dt>CSS</dt>
<dt>Cascading Style Sheets</dt>
<dd>A style sheet language for styling web documents</dd>
</dl>Practical Examples
Glossary
glossary.html
<section>
<h2>Web Development Glossary</h2>
<dl>
<dt>API</dt>
<dd>Application Programming Interface - A set of protocols for building software applications</dd>
<dt>Backend</dt>
<dd>The server-side of a web application that users don't see</dd>
<dt>Frontend</dt>
<dd>The client-side of a web application that users interact with</dd>
<dt>Framework</dt>
<dd>A platform for developing software applications with pre-built components</dd>
<dt>Repository</dt>
<dd>A storage location for software packages and project files</dd>
</dl>
</section>FAQ (Frequently Asked Questions)
faq.html
<section>
<h2>Frequently Asked Questions</h2>
<dl>
<dt>What is HTML?</dt>
<dd>HTML stands for HyperText Markup Language. It's the standard language used to create web pages and web applications.</dd>
<dt>Do I need to know programming to learn HTML?</dt>
<dd>No, HTML is not a programming language. It's a markup language that's easy to learn for beginners with no prior coding experience.</dd>
<dt>How long does it take to learn HTML?</dt>
<dd>Basic HTML can be learned in a few days to a week. Becoming proficient typically takes a few months of regular practice.</dd>
<dt>Is HTML enough to build a website?</dt>
<dd>HTML provides the structure, but you'll also need CSS for styling and JavaScript for interactivity to build modern, functional websites.</dd>
</dl>
</section>Product Specifications
specs.html
<section>
<h2>Product Specifications</h2>
<dl>
<dt>Brand</dt>
<dd>TechCorp</dd>
<dt>Model</dt>
<dd>X500 Pro</dd>
<dt>Processor</dt>
<dd>Intel Core i7 12th Gen</dd>
<dt>RAM</dt>
<dd>16GB DDR4</dd>
<dt>Storage</dt>
<dd>512GB SSD</dd>
<dt>Display</dt>
<dd>15.6" Full HD (1920x1080)</dd>
<dt>Weight</dt>
<dd>1.8 kg</dd>
<dt>Battery Life</dt>
<dd>Up to 10 hours</dd>
</dl>
</section>Contact Information
contact-info.html
<section>
<h2>Contact Details</h2>
<dl>
<dt>Company Name</dt>
<dd>Tech Solutions Inc.</dd>
<dt>Address</dt>
<dd>123 Main Street, Suite 400<br>
New York, NY 10001<br>
United States</dd>
<dt>Phone</dt>
<dd><a href="tel:+12125551234">(212) 555-1234</a></dd>
<dt>Email</dt>
<dd><a href="mailto:info@techsolutions.com">info@techsolutions.com</a></dd>
<dt>Business Hours</dt>
<dd>Monday - Friday: 9:00 AM - 5:00 PM EST</dd>
</dl>
</section>Event Details
event.html
<article>
<h2>Web Developer Conference 2024</h2>
<dl>
<dt>Date</dt>
<dd>June 15-17, 2024</dd>
<dt>Location</dt>
<dd>San Francisco Convention Center<br>
747 Howard St, San Francisco, CA 94103</dd>
<dt>Registration Fee</dt>
<dd>Early Bird: $299 (until May 1)<br>
Regular: $399</dd>
<dt>Topics Covered</dt>
<dd>HTML5 and CSS3</dd>
<dd>Modern JavaScript Frameworks</dd>
<dd>Web Performance Optimization</dd>
<dd>Accessibility Best Practices</dd>
<dt>Speakers</dt>
<dd>Jane Smith - Google</dd>
<dd>John Doe - Mozilla</dd>
<dd>Sarah Johnson - Microsoft</dd>
</dl>
</article>Description Lists with Rich Content
Lists with Links and Formatting
rich-content.html
<dl>
<dt>HTML Resources</dt>
<dd>
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML">MDN Web Docs</a> -
Comprehensive HTML documentation
</dd>
<dd>
<a href="https://www.w3schools.com/html/">W3Schools</a> -
Interactive tutorials and examples
</dd>
<dt>CSS Resources</dt>
<dd>
<a href="https://css-tricks.com/">CSS-Tricks</a> -
Tips, tricks, and techniques
</dd>
<dd>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS">MDN CSS Reference</a> -
Complete CSS documentation
</dd>
</dl>Lists with Code Examples
code-examples.html
<dl>
<dt>Creating a Paragraph</dt>
<dd>
<p>Use the <p> element:</p>
<pre><code><p>This is a paragraph.</p></code></pre>
</dd>
<dt>Creating a Heading</dt>
<dd>
<p>Use heading elements from <h1> to <h6>:</p>
<pre><code><h1>Main Heading</h1></code></pre>
</dd>
<dt>Creating a Link</dt>
<dd>
<p>Use the <a> element with href attribute:</p>
<pre><code><a href="page.html">Link Text</a></code></pre>
</dd>
</dl>Styling Description Lists
While this tutorial focuses on HTML, here are common CSS styling patterns:
dl-styles.css
/* Basic styling */
dl {
margin: 1rem 0;
}
dt {
font-weight: bold;
margin-top: 1rem;
}
dd {
margin-left: 2rem;
margin-bottom: 0.5rem;
}
/* Inline style (term and definition on same line) */
dl.inline dt {
float: left;
clear: left;
width: 150px;
font-weight: bold;
}
dl.inline dd {
margin-left: 170px;
margin-bottom: 1rem;
}
/* Grid layout */
dl.grid {
display: grid;
grid-template-columns: max-content auto;
gap: 0.5rem 1rem;
}
/* Bordered style */
dl.bordered {
border: 1px solid #ddd;
padding: 1rem;
border-radius: 8px;
}
dl.bordered dt {
color: #0066cc;
border-bottom: 1px solid #eee;
padding-bottom: 0.25rem;
}
dl.bordered dd {
margin-left: 0;
padding-left: 1rem;
}When to Use Description Lists
✅ Use description lists for:
- Glossaries and dictionaries
- Frequently Asked Questions (FAQs)
- Product specifications and details
- Metadata (author, date, category, etc.)
- Contact information
- Term-definition pairs
- Event details
- Configuration options
❌ Don't use description lists for:
- Simple lists (use ul or ol instead)
- Navigation menus
- Data that should be in a table
- Step-by-step instructions (use ol)
- Dialog or conversations
Accessibility Considerations
♿ Accessibility Best Practices:
- Screen readers announce description lists appropriately
- Users understand the term-definition relationship
- Keep terms concise and clear
- Make definitions comprehensive but scannable
- Use proper semantic markup (dl, dt, dd)
- Avoid using dl just for styling purposes
- Test with screen readers to verify announcement
Best Practices
✅ Do:
- Use dl for term-definition relationships
- Keep terms (dt) short and descriptive
- Provide clear, complete definitions (dd)
- Group related information together
- Use multiple dd elements for multiple definitions
- Include context with headings above the list
❌ Don't:
- Put content directly in dl (must be in dt/dd)
- Use dl for layout purposes only
- Forget closing tags
- Mix dl with ul or ol inside
- Use when simpler list types would work better
Common Mistakes
❌ Wrong:
MARKUP
<!-- Don't put content directly in dl -->
<dl>
Some text here
<dt>Term</dt>
<dd>Definition</dd>
</dl>
<!-- Don't mix with other list types -->
<dl>
<ul>
<li>Item</li>
</ul>
</dl>
<!-- Don't use dt without dd -->
<dl>
<dt>Term 1</dt>
<dt>Term 2</dt>
<dt>Term 3</dt>
</dl>✅ Correct:
MARKUP
<!-- All content in dt/dd -->
<dl>
<dt>Term</dt>
<dd>Definition with all text properly wrapped</dd>
</dl>
<!-- Proper semantic structure -->
<dl>
<dt>Term 1</dt>
<dd>Definition 1</dd>
<dt>Term 2</dt>
<dd>Definition 2</dd>
</dl>
<!-- Multiple definitions for one term -->
<dl>
<dt>Term</dt>
<dd>First definition</dd>
<dd>Second definition</dd>
<dd>Third definition</dd>
</dl>List Types Comparison
| List Type | Element | Use When | Example |
|---|---|---|---|
| Unordered | <ul> | Order doesn't matter | Shopping list, features |
| Ordered | <ol> | Sequence matters | Instructions, rankings |
| Description | <dl> | Term-definition pairs | Glossary, FAQ, specs |
Key Takeaways
<dl>creates a description list<dt>represents the term or name<dd>provides the description or definition- One term can have multiple definitions
- Multiple terms can share one definition
- Perfect for glossaries, FAQs, and specifications
- Use semantic HTML for term-definition relationships
- All content must be in dt or dd elements
What's Next?
Now that you understand all three list types, you're ready to learn about nested lists. In the next lesson, we'll explore how to create lists within lists to represent hierarchical information and complex structures.