HTML Course 7.3 Definition lists (dl, dt, dd)

7.3 Definition Lists: <dl>, <dt>, <dd>

A definition list groups terms and their
definitions. Unlike ordered or unordered lists,
<dl> is semantically designed for name/value or term/description pairs.

Core Elements and Their Roles

Basic Example

A simple dictionary-like list. Each <dt> is followed by its <dd>.

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>
  
  

Multiple Terms, Multiple Definitions

You can group several terms under one definition or vice versa.

<dl>
  
  <dt>HTTP</dt>
  <dt>HTTPS</dt>
  <dd>Application-layer protocol for distributed, collaborative hypermedia systems.</dd>

  
  <dt>JSON</dt>
  <dd>JavaScript Object Notation, a data-interchange format.</dd>
  <dd>Lightweight, text-based, language-independent format.</dd>
</dl>
  

Nesting Definition Lists

For hierarchical structures, nest a <dl> inside a <dd>.

<dl>
  <dt>Programming Languages</dt>
  <dd>
    High-level languages
    <dl>
      <dt>Python</dt>
      <dd>Interpreted, dynamically typed.</dd>

      <dt>Java</dt>
      <dd>Compiled to bytecode, runs on JVM.</dd>
    </dl>
  </dd>
</dl>
  

Accessibility and ARIA

By default, screen readers announce <dt>/<dd> pairs correctly.
If you need explicit roles:

<dl role='list'>
  <dt role='listitem'>Term A</dt>
  <dd role='listitem'>Definition A</dd>
</dl>
  

Usually unnecessary, as semantic elements already convey correct roles.

Custom Data Attributes

Add metadata to <dt> or <dd> via data-* attributes.

<dl>
  <dt data-proficiency='advanced'>CSS Flexbox</dt>
  <dd data-example='align-items:center'>Layout module for one-dimensional layouts.</dd>
</dl>
  

Styling Hooks

While styling is not included here, for targetting in CSS you can:

• Add classes on <dl>, <dt>, <dd>.
• Use nth-of-type selectors (dt:nth-of-type(odd), dd:first-of-type, etc.).

Best Practices

• Use definition lists for term/description pairs, not for arbitrary key/value tables.
• Keep <dt> and <dd> semantically linked in source order.
• Avoid empty <dd> or <dt> elements.
• Use nesting only when hierarchy is logical, to maintain readability.
• Validate your HTML to ensure proper nesting and no stray inline tags.

Definition lists are powerful HTML constructs for glossaries, FAQ sections,
metadata listings, and any structured pairing of names and values.