HTML <dl> Element

Publish in HTML Tutorial el 23/05/2025 19:57

The <dl> Element: Definition Lists in HTML

The <dl> element represents a description list in HTML. It's used to create a list of terms and their corresponding descriptions, making it perfect for glossaries, metadata displays, or any name-value pair listings. The <dl> element works in conjunction with <dt> (definition term) and <dd> (definition description) elements.

Basic Structure

Here's how a basic definition list is structured:

When rendered, it looks like:

Term 1: Description for term 1
Term 2: Description for term 2

Tips and Tricks

You can have multiple <dd> elements for a single <dt>
Use CSS to style definition lists as accordions or FAQs
Screen readers understand the relationship between <dt> and <dd>
Great for displaying metadata like "Author: John Doe"
You can nest other HTML elements inside <dd> elements

Examples of <dl> Usage

1. Basic Glossary Example

A simple glossary of web development terms:

Play Code

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language - the standard markup language for documents</dd>
  
  <dt>CSS</dt>
  <dd>Cascading Style Sheets - used for describing presentation of documents</dd>
  
  <dt>JavaScript</dt>
  <dd>A programming language that enables interactive web pages</dd>
</dl>

2. Multiple Descriptions for One Term

Showing different meanings for the same term:

Play Code

<dl>
  <dt>Cookie</dt>
  <dd>A sweet baked good</dd>
  <dd>Small piece of data stored on the user's computer by the web browser</dd>
</dl>

3. FAQ Section

Creating a simple FAQ section using definition lists:

Play Code

<dl>
  <dt>What is HTML?</dt>
  <dd>HTML is the standard markup language for creating web pages.</dd>
  
  <dt>How do I learn HTML?</dt>
  <dd>Start with basic tutorials and practice by building simple pages.</dd>
  
  <dt>Is HTML a programming language?</dt>
  <dd>No, HTML is a markup language used for structuring content.</dd>
</dl>

4. Dynamic DL with JavaScript

Adding items to a definition list using JavaScript:

Play Code

<dl id="dynamic-list"></dl>

<script>
  const terms = [
    { term: "API", definition: "Application Programming Interface" },
    { term: "DOM", definition: "Document Object Model" },
    { term: "SEO", definition: "Search Engine Optimization" }
  ];
  
  const dl = document.getElementById('dynamic-list');
  
  terms.forEach(item => {
    const dt = document.createElement('dt');
    dt.textContent = item.term;
    
    const dd = document.createElement('dd');
    dd.textContent = item.definition;
    
    dl.appendChild(dt);
    dl.appendChild(dd);
  });
</script>

5. Interactive Filterable DL

Filtering a definition list based on user input:

Play Code

<input type="text" id="filterInput" placeholder="Filter terms...">
<dl id="filterable-list">
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
  <dt>JS</dt>
  <dd>JavaScript</dd>
  <dt>PHP</dt>
  <dd>Hypertext Preprocessor</dd>
</dl>

<script>
  document.getElementById('filterInput').addEventListener('input', function() {
    const filter = this.value.toLowerCase();
    const items = document.querySelectorAll('#filterable-list dt');
    
    items.forEach(item => {
      const text = item.textContent.toLowerCase();
      const dd = item.nextElementSibling;
      
      if (text.includes(filter)) {
        item.style.display = '';
        dd.style.display = '';
      } else {
        item.style.display = 'none';
        dd.style.display = 'none';
      }
    });
  });
</script>

Conclusion

The <dl> element is a semantic HTML element that provides a perfect structure for name-value pairs. While often overlooked, it's incredibly useful for creating accessible, well-structured content like glossaries, FAQs, and metadata displays. The examples above demonstrate both basic and advanced uses, including JavaScript integration for dynamic content.