HTML definition list generator — dl, dt and dd from term and definition lines

How to use the definition list generator

1. In Term: definition (one per line; start a line with : to add another definition), write each term followed by its definition.
2. Separate term and definition with : or with -, – or —.
3. To add another definition to the term above, start a line with :.
4. Copy the code and check the Preview.

What it does and when to use it

The definition list, dl, is HTML’s element for groups of names and values. Each dt is a term and each dd that follows is its description. It is the right markup for a glossary at the end of an article, a list of technical specifications, the key facts of an event, or the fields of a profile. Using dl instead of bold text and line breaks keeps the relationship in the code, so screen readers can tell users how many terms there are and which description belongs to which.

For lists of single items, use the HTML List Generator. For longer answers that should start closed, the HTML Details Accordion Generator is the better pattern. When the data has more than two columns, a table from the HTML Table Generator reads better.

How it works

Each non-empty line is checked in order:

• A line starting with : becomes one more dd for the current term.
• A line with a separator is split at the first one: the left side becomes dt, the rest becomes dd.
• A line without a separator becomes a dt on its own.

Text is trimmed and HTML-escaped, so < or & in a definition is shown, not treated as markup. The list is indented two spaces inside <dl>. It runs in your browser.

Worked examples

Two simple terms, HTML: Markup language and CSS: Style sheets:

<dl>
  <dt>HTML</dt>
  <dd>Markup language</dd>
  <dt>CSS</dt>
  <dd>Style sheets</dd>
</dl>

Two definitions for one term. In the sample, “Hash” is followed by a line starting with a colon, so it gets two dd elements: “A fixed-length fingerprint of data.” and “The same input always gives the same hash.”

Mixed separators. API — Application programming interface splits at the em dash. SDK on its own line, then : Software development kit, gives a term and a separate definition line. URL: https://example.com: the address splits only at the first colon followed by a space, so the definition is https://example.com: the address.

Limits and tips

• A hyphen without spaces, as in “fixed-length”, is not a separator, so hyphenated words are safe.
• A colon without a space after it, as in a time like 10:30, is not a separator either.
• You may wrap each dt and dd group in a div for styling; that is valid HTML inside a dl.