<dl>

<dl> represents a description list: groups of names or terms and their associated descriptions or values. It fits glossaries and metadata, not just dictionary definitions.

A small glossary

The <dt> elements name concepts; the <dd> elements explain them. The browser normally indents descriptions, and CSS can adjust that appearance.

<dl>
  <dt>Grid container</dt>
  <dd>An element that establishes a grid layout.</dd>
  <dt>Track</dt>
  <dt>Grid track</dt>
  <dd>The space between two neighboring grid lines.</dd>
</dl>

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

Group structure

Each group contains one or more dt elements followed by one or more dd elements. Multiple terms can share a description, and one term can have multiple descriptions. Terms do not have to be followed one-for-one by definitions.

You can wrap each complete term-description group in a <div> for styling. Keep those groups coherent; do not put unrelated headings or arbitrary wrappers directly into the list.

Reading and alternatives

Assistive technology exposes description lists in different ways. Prefer native structure over adding redundant term or definition roles. Use a table when readers must compare several values across rows and columns, and ul for a simple collection of items.

Try adding a second description to one group. Keep all descriptions together before starting the next term.

Sources and browser support

MDN: dl describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.