`<dt>` - Description term

The <dt> tag in HTML is used to define a term or name within a "description list" (<dl>). It is typically paired with the <dd> tag, where the former represents the term and the latter represents the description. This structure is suitable for displaying glossaries, metadata, or key-value content.

Basic Usage of the <dt> Tag

The <dt> tag must be nested within a <dl> tag and cannot exist alone. A <dl> can contain multiple <dt> and <dd> tags, forming one-to-many or many-to-one relationships. For example:

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language, used for building webpage structures.</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets, used for defining the visual presentation of webpages.</dd>
</dl>

Association Rules with <dd>

The pairing of <dt> and <dd> is flexible:

• One <dt> can correspond to multiple <dd> (one term with multiple descriptions):

  <dl>
    <dt>Browser</dt>
    <dd>Chrome</dd>
    <dd>Firefox</dd>
  </dl>
  

• Multiple <dt> can also correspond to one <dd> (multiple terms sharing one description):

  <dl>
    <dt>HTML</dt>
    <dt>CSS</dt>
    <dd>Fundamental technologies for front-end development</dd>
  </dl>
  

Practical Use Cases

1. Glossary

<dl>
  <dt>Semantics</dt>
  <dd>Using appropriate HTML tags to convey content meaning, not just relying on styling.</dd>
  <dt>Responsive Design</dt>
  <dd>A design approach that enables webpages to automatically adapt to different device screen sizes.</dd>
</dl>

2. Metadata Display

<dl class="metadata">
  <dt>Author</dt>
  <dd>John Doe</dd>
  <dt>Publish Date</dt>
  <dd>2023-10-15</dd>
  <dt>Tags</dt>
  <dd>HTML</dd>
  <dd>Front-end</dd>
</dl>

3. Frequently Asked Questions

<dl>
  <dt>How to reset password?</dt>
  <dd>Go to the login page and click the "Forgot Password" link.</dd>
  <dt>What payment methods are supported?</dt>
  <dd>Alipay, WeChat Pay, and UnionPay.</dd>
</dl>

Styling Tips

CSS can enhance the visual presentation of <dt>:

/* Basic styling */
dt {
  font-weight: bold;
  margin-top: 1em;
}

/* Horizontal layout */
dl.horizontal {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0 1em;
}

/* Add decorative line */
dt::after {
  content: ":";
  margin-right: 0.5em;
}

Accessibility Considerations

1. Avoid misuse: Only use <dt> when the content is genuinely a term-description relationship; for regular lists, use <ul> or <ol>.
2. Association: Ensure screen readers correctly identify the association, avoiding complex nested structures.
3. ARIA attributes: Typically no additional ARIA is needed, as <dl> already has semantic meaning.

Comparison with Other Tags

Advanced Usage Examples

Nested Description Lists

<dl>
  <dt>Front-end Technologies</dt>
  <dd>
    <dl>
      <dt>HTML</dt>
      <dd>Structure layer</dd>
      <dt>CSS</dt>
      <dd>Presentation layer</dd>
    </dl>
  </dd>
</dl>

Grouping with <div> (Allowed in HTML5)

<dl>
  <div class="term-group">
    <dt>JavaScript</dt>
    <dd>Dynamic scripting language</dd>
    <dd>ES6 standard</dd>
  </div>
  <div class="term-group">
    <dt>TypeScript</dt>
    <dd>Superset of JavaScript</dd>
  </div>
</dl>

Browser Compatibility and History

The <dt> tag has existed since HTML 2.0 and is fully supported by all modern browsers. In HTML5:

• Allows <div> to wrap <dt>+<dd> groups
• No longer requires strict pairing
• Can contain flow content (e.g., paragraphs, images)