A list of terms and descriptions

Glossaries, frequently asked questions, profile items—there are quite a lot of situations where “a name” and “its content” line up as a pair, right? What fits perfectly in those cases is the definition list. It’s a dedicated kind of list, separate from the <ul> list.

Let’s write one

Let’s line up two “term → description” pairs.

<dl>
  <dt>HTML</dt>
  <dd>The language that builds the framework of a web page.</dd>

  <dt>CSS</dt>
  <dd>The language that arranges the look of a page.</dd>
</dl>

Broken down, it looks like this.

In many browsers, <dd> (the description) is shown slightly indented to the right, so even the look conveys “ah, this is the description of that word.” Here’s the actual display.

Several descriptions for one word

You can also attach several <dd> to a single <dt>.

<dl>
  <dt>Long-tailed tit</dt>
  <dd>A small bird that lives in Hokkaido.</dd>
  <dd>Its pure-white, round appearance earns it the nickname "snow fairy."</dd>
</dl>

It’s handy when you want to add a few lines of description to a single word.

Describing similar words together

Conversely, you can line up several <dt> and bring them together under one <dd>. It’s handy for a word that goes by several names.

<dl>
  <dt>PC</dt>
  <dt>Personal computer</dt>
  <dd>A computer used by an individual.</dd>
</dl>

The same description hangs under both “PC” and “Personal computer.” Using it in a glossary when “there are several names with the same meaning” saves you from writing the description twice.

It works for Q&A too

“A pair of a word and a description” is also a perfect match for a pair of a question and an answer. Make the question <dt> and the answer <dd>, and it becomes a mini-FAQ just like that.

<dl>
  <dt>How are HTML and CSS different?</dt>
  <dd>HTML is the framework of a page, and CSS is the language that arranges its look.</dd>

  <dt>How many tags do I need to memorize?</dt>
  <dd>You don't have to cram them all at once. They gradually add up as you use them.</dd>
</dl>

Not just glossaries—<dl> also comes in handy when you’re building a frequently-asked-questions section.

Summary of this lesson

1. In a definition list, <dt> (word) and <dd> (description) line up inside <dl>
2. It’s fine to attach several <dd> to a single <dt>
3. Choose it when you have “a pair of a word and a description”