<dl>: definition / description lists

The "key-value" list element

<dl>
  <dt>HTTP</dt>
  <dd>Hypertext Transfer Protocol</dd>

  <dt>REST</dt>
  <dd>Representational State Transfer</dd>

  <dt>JSON</dt>
  <dd>JavaScript Object Notation</dd>
</dl>

• `<dl>` — the list wrapper.
• `<dt>` — definition term (the "key").
• `<dd>` — definition description (the "value").

When <dl> is the right tool

• Glossary of terms (like CodeMentor's /glossary page)
• Metadata key-value pairs (Author: Anna, Published: 2026-05-20, Tags: python, fastapi)
• FAQ with question as <dt> and answer as <dd>
• Form-like display where you're rendering existing values (not editing)

Multiple definitions per term

A term can have multiple definitions, or one description can apply to multiple terms:

<dl>
  <dt>Python</dt>
  <dd>A high-level programming language</dd>
  <dd>Created by Guido van Rossum in 1991</dd>

  <dt>Python 2</dt>
  <dt>Python 3</dt>
  <dd>Two largely-incompatible major versions of Python.</dd>
</dl>

Visual default styling

Default browser style puts each <dd> indented under its <dt>. Most projects override with CSS Grid for a clean two-column layout:

dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; }
dt { font-weight: bold; }
dd { margin: 0; }