How to Use Definition Lists (<dl>) Correctly

Why Correct <dl> Markup Matters

<dl> is the only native HTML element that conveys a key/value relationship. Using the wrong element costs you on three fronts:

• Screen reader users: When a glossary or spec sheet is built with <p><strong>Color:</strong> Red</p>, the screen reader reads "Color, Red" as a single paragraph — there is no machine-readable link between the label and the value, no list announcement, and no way to jump term-to-term.
• AI search engines: Generative engines parse <dl> as structured key/value data. A product page with <dl>spec blocks is significantly more likely to be cited correctly when an AI Overview answers "what is the weight of product X?"
• SEO and rich results: Google parses semantic spec lists when generating product rich snippets. A correctly marked-up <dl> helps Google associate Schema.org Product properties with their values without ambiguity.
• WCAG compliance: SC 1.3.1 requires that information, structure, and relationships be programmatically determinable. A visual key/value layout without semantic markup is a Level A failure.
• Voice control: Voice navigation software exposes lists as a navigation primitive. Misusing <dl> (or skipping it) removes that affordance.

How <dl>, <dt>, and <dd> Work Together

The structure is strict but flexible. Each <dt> can be followed by one or more <dd> elements; consecutive <dt> elements share the <dd> that follows. Since HTML 5.3, a single <div> may wrap a term/description group purely for styling — it does not change the semantics.

<!-- Bad: visual key/value with no semantics -->
<p><strong>Color:</strong> Red</p>
<p><strong>Weight:</strong> 2 kg</p>
<p><strong>Material:</strong> Aluminum</p>

<!-- Bad: tabular layout for what is really key/value data -->
<table>
  <tr><td>Color</td><td>Red</td></tr>
  <tr><td>Weight</td><td>2 kg</td></tr>
</table>

<!-- Good: a proper description list -->
<dl>
  <dt>Color</dt>
  <dd>Red</dd>

  <dt>Weight</dt>
  <dd>2 kg</dd>

  <dt>Material</dt>
  <dd>Aluminum</dd>
</dl>

<!-- Good: one term, multiple descriptions -->
<dl>
  <dt>Accessibility</dt>
  <dd>The practice of making content usable by people with disabilities.</dd>
  <dd>A baseline requirement under WCAG 2.2.</dd>
</dl>

<!-- Good: synonyms sharing one definition -->
<dl>
  <dt>CEO</dt>
  <dt>Chief Executive Officer</dt>
  <dd>The highest-ranking executive in an organization.</dd>
</dl>

<!-- Good (HTML 5.3): <div> wrappers for styling only -->
<dl>
  <div class="row">
    <dt>Published</dt>
    <dd>2025-05-21</dd>
  </div>
  <div class="row">
    <dt>Author</dt>
    <dd>Saar Twito</dd>
  </div>
</dl>

How to Check Your Definition Lists

Misused <dl> markup rarely shows up as a visual bug, so it usually goes uncaught until a screen reader user encounters it. Use these checks:

• Greadme deep scan — flags <dt>/<dd> elements outside a <dl> container, orphaned terms with no description, and content patterns (spec sheets, glossaries) that should be using <dl> but are not.
• Greadme crawler scan — runs the same checks across every indexable page on the site, so you can find every product or glossary template that needs the fix.
• Greadme AI visibility analyzer — surfaces how generative engines extract your product spec data, which is a direct downstream signal of whether the markup is correct.
• Screen reader smoke test — open the page with VoiceOver (macOS), NVDA (Windows), or TalkBack (Android). A correct <dl> is announced as "description list" with the term and value paired.
• HTML validation — the W3C validator will catch <dt>/<dd> outside <dl>, illegal child elements, and other structural errors.
• Browser DevTools accessibility tree — Chrome DevTools shows the computed accessibility role for every element. A correct <dl> exposes the role list; <dt> and <dd> expose listitem.

8 Rules for Using <dl> Correctly

dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 1rem;
  row-gap: 0.5rem;
}

dt { font-weight: 600; }
dd { margin: 0; }

Common <dl> Mistakes and How to Fix Them

<dl> vs <ul> vs <table>: Which to Use

All three elements look similar at a glance, but they communicate different relationships to assistive technology and search engines. Pick the one that matches the actual semantics of the data.

FAQ

What is the difference between a "definition list" and a "description list"?

They are the same element. HTML4 called it a "definition list" and the elements were "definition term" and "definition description." HTML5 renamed it to "description list" and broadened the scope to any term/value pairing — not just dictionary-style definitions. The tags (<dl>, <dt>, <dd>) and behavior are unchanged.

Can a single <dt> have multiple <dd> elements?

Yes. A term with multiple definitions, values, or explanations should have one <dt> followed by as many <dd> elements as needed. Screen readers announce each description in sequence and keep them associated with the same term.

Can multiple <dt> elements share a single <dd>?

Yes. Stack the <dt> elements consecutively, then provide one <dd>. This is the right pattern for synonyms, abbreviations, and aliases (e.g. "CEO" / "Chief Executive Officer" sharing one definition).

Should I use <dl> for FAQs or use FAQPage schema instead?

Do both. <dl> with <dt> for the question and <dd> for the answer is the correct semantic markup for the visible HTML. FAQPage JSON-LD structured data is a separate, machine-readable layer that helps Google generate rich results. They complement each other.

Is wrapping <dt>/<dd> in a <div> valid?

Yes — since HTML 5.3 (2018), a single <div> may wrap one <dt>/<dd> group inside a <dl>, purely for styling. Major browsers and screen readers ignore the wrapper for accessibility purposes. Do not nest other elements; do not use <li>.

Do AI search engines like ChatGPT and Perplexity treat <dl> differently from <p> spec lists?

Yes. Generative engines parse <dl> as structured key/value data and are far more likely to extract individual fields cleanly when summarizing or citing a page. A product page that uses <dl> for its spec sheet is materially more likely to have its specs quoted accurately in an AI Overview answer. Loose <p><strong>Label:</strong> value</p> markup forces the engine to guess at the structure.

Does using <dl> affect SEO or rich results?

Indirectly but meaningfully. Google does not rank pages higher purely because they use <dl>, but semantic markup makes it easier for Google to associate Schema.org Product properties with the right values, which feeds product rich snippets and shopping results. Combined with proper JSON-LD, <dl> spec blocks improve the odds of earning a rich snippet.