HTML <dt> Element

Publish in HTML Tutorial el 23/05/2025 20:03

The <dt> (Description Term) element is used to specify a term in a description list (<dl>). It's typically paired with one or more <dd> (Description Details) elements to create a name-value group in the description list. The <dt> element is part of the HTML description list structure, which is perfect for creating glossaries, metadata displays, or any other name-value pairs.

Basic Syntax

Here's the basic structure of how <dt> is used within a <dl> element:

Rendered Example

Here's how the above code would render:

Play Code

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language - the standard markup language for documents designed to be displayed in a web browser.</dd>
</dl>

Examples of <dt> Usage

1. Simple Glossary

A basic glossary implementation using <dt> and <dd>:

Play Code

<dl>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets - used for styling web pages</dd>
  
  <dt>JavaScript</dt>
  <dd>A programming language that enables interactive web pages</dd>
  
  <dt>API</dt>
  <dd>Application Programming Interface - allows software applications to communicate</dd>
</dl>

2. Multiple Descriptions for One Term

A single term can have multiple descriptions:

Play Code

<dl>
  <dt>HTTP</dt>
  <dd>Hypertext Transfer Protocol</dd>
  <dd>The foundation of data communication for the World Wide Web</dd>
  <dd>A request-response protocol in the client-server computing model</dd>
</dl>

3. Metadata Display

Using <dt> to display metadata or properties:

Play Code

<dl>
  <dt>Author:</dt>
  <dd>Jane Doe</dd>
  
  <dt>Published:</dt>
  <dd>May 15, 2023</dd>
  
  <dt>Category:</dt>
  <dd>Web Development</dd>
  
  <dt>Tags:</dt>
  <dd>HTML, Semantic Elements, Tutorial</dd>
</dl>

4. Dynamic Glossary with JavaScript

Creating a glossary dynamically with JavaScript:

Play Code

<div id="glossary-container"></div>

<script>
  const terms = [
    { term: "DOM", definition: "Document Object Model - a programming interface for web documents" },
    { term: "SEO", definition: "Search Engine Optimization - improving website visibility in search results" },
    { term: "Responsive Design", definition: "Web design approach that makes pages render well on various devices" }
  ];

  const dl = document.createElement('dl');
  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);
  });

  document.getElementById('glossary-container').appendChild(dl);
</script>

5. Interactive FAQ Section

An interactive FAQ section using <dt> elements that can be clicked to show/hide answers:

Play Code

<dl id="faq-section">
  <dt class="faq-question">What is HTML?</dt>
  <dd class="faq-answer">HTML stands for HyperText Markup Language and is the standard markup language for creating web pages.</dd>
  
  <dt class="faq-question">What is the purpose of the <dt> element?</dt>
  <dd class="faq-answer">The <dt> element defines a term in a description list (<dl>).</dd>
  
  <dt class="faq-question">Can I style <dt> elements with CSS?</dt>
  <dd class="faq-answer">Yes, like any other HTML element, you can apply CSS styles to <dt> elements.</dd>
</dl>

<style>
  .faq-question {
    cursor: pointer;
    font-weight: bold;
    padding: 5px;
    background-color: #f0f0f0;
  }
  .faq-answer {
    display: none;
    padding: 10px;
    margin-left: 15px;
  }
</style>

<script>
  document.querySelectorAll('.faq-question').forEach(question => {
    question.addEventListener('click', () => {
      const answer = question.nextElementSibling;
      answer.style.display = answer.style.display === 'block' ? 'none' : 'block';
    });
  });
</script>

Tips and Tricks

Styling: You can style <dt> and <dd> elements differently to create visual distinction between terms and definitions.
Accessibility: Description lists are well-supported by screen readers, making them a good choice for accessible content.
Grouping: You can group multiple <dt> elements before a <dd> if several terms share the same definition.
Inline Elements: <dt> can contain inline elements like <span>, <a>, or <strong>, but not block-level elements.
Microdata: Consider adding schema.org microdata to your description lists for better SEO and rich snippets in search results.