HTML <dl> element

The <dl> element represents a description list. More precisely, it is a list of name-and-value groups: a term and its description, a question and its answer, a label and its value, or another paired association.

This makes it more flexible than the old phrase definition list suggests. A glossary is a natural use, but so is a list of product facts, metadata, settings, contact details, or short question-and-answer pairs.

The names or terms inside a <dl> are written with <dt> elements. The descriptions or values are written with <dd> elements. The list works by placing those elements in meaningful groups.

Each group consists of one or more <dt> elements followed by one or more <dd> elements. Several names can share a description, and one name can have several values. Once descriptions have begun, the next <dt> starts a new group.

The element should not be used just to create indentation. Browsers often indent the descriptions by default, but the meaning is not visual spacing. If the content is not a set of associations, another structure is probably better.

The groups can be written directly inside <dl>, or each complete group can be wrapped in a <div> for styling or attributes. Choose one structure for the list: do not mix wrapped groups with <dt> and <dd> elements directly under the same <dl>.

The example below describes a lesson using labels and values. Nothing is being defined in the dictionary sense, but the association between each label and its value is still useful information.

Attributes: GLOBALS.

Typical layout:
<dl>
  <div>
    <dt>Topic</dt>
    <dd>CSS Grid</dd>
  </div>

  <div>
    <dt>Duration</dt>
    <dd>20 minutes</dd>
  </div>
</dl>

Visual representation: