Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > HTML/XHTML

  • Print
  • + Share This
This chapter is from the book

This chapter is from the book



Use the definition list (dl) to define a term (represented by one or more dt elements) and its description (represented by one or more dd elements). The dt may contain inline content only, while a dd may contain block-level content.

Though it's a natural fit for defining words like in a dictionary, the dl is not constrained to such narrow usage. As you will see, there is some levity concerning what constitutes a term and a description, as well as differing opinions about what is "legal."

The following are several examples of how to use a definition list.

Example 1:

   <dt>Boris Karloff</dt>
   <dd>Best known for his role in <cite>Frankenstein</cite>
   and related horror films, this scaremaster's real name
   was William Henry Pratt.</dd>
   . . .

Example 1 is a basic dl. All of the following arrangements are valid for a group of dt and dd elements within a dl:

  • A single dt grouped with a single dd, as in the previous Example 1 and as Director in the following Example 2. This is the most common occurrence.
  • A single dt grouped with multiple dds. See Writers in Example 2.
  • Multiple dts grouped with a single dd. See Example 3.
  • Multiple dts grouped with multiple dds. See the note that follows Example 3.

Example 2 shows the first two of these by way of a list of credits for the movie Amélie (for all you French movie fanatics). It also demonstrates how to use a nested definition list.

Example 2:

<h3>Credits for <cite>Am&eacute;lie</cite></h3>
   <dt>Director</dt> <!-- Single dt with single dd -->
   <dd>Jean-Pierre Jeunet</dd>

   <dt>Writers</dt> <!-- Single dt with multiple dds -->
   <dd>Guillaume Laurant (story, screenplay)</dd>
   <dd>Jean-Pierre Jeunet (story)</dd>

      <!-- Start nested list -->
         <dt>Audrey Tautou</dt> <!-- Actor/Actress -->
         <dd>Am&eacute;lie Poulain</dd> <!-- Character -->

         <dt>Mathieu Kassovitz</dt>
         <dd>Nino Quincampoix</dd>
         . . .
      <!-- end nested list -->
   . . .

User agents typically render a definition list by default as shown next (but you can alter it with CSS). Note how the dd text in the nested list is indented another step.

  • Director
    • Jean-Pierre Jeunet
  • Writers
    • Guillaume Laurant (story, screenplay)
    • Jean-Pierre Jeunet (story)
  • Cast
    • Audrey Tautou
      • Amélie Poulain
    • Mathieu Kassovitz
      • Nino Quincampoix

Now let's look at another example. Although you shouldn't repeat the same dt value in a dl (for example, Writers appears only once in the previous example), you may have multiple dts grouped with a single dd, as I mentioned earlier.

Example 3:

<h2>Defining words with multiple spellings</h2>
   <dt><dfn>bogeyman</dfn>, n.</dt> <!-- Multiple dts with
   single dd -->
   <dt><dfn>boogeyman</dfn>, n.</dt>
   <dd>A mythical creature that lurks under the beds of small
   <dt><dfn lang="en-gb">aluminium</dfn>, n.</dt>
   <dt><dfn>aluminum</dfn>, n.</dt>
   . . .

This example uses a definition list to define terms like in a dictionary (the most traditional use for a dl). You'll notice I wrapped the terms in a dfn element. You might think this is redundant, but it can be appropriate if it's consistent with the proper usage of dfn. (Please see the dfn entry in Chapter 5 for more details.) This approach is encouraged by HTML5 as a way to distinguish a dl used to define words in dictionary or glossary format from a dl used for other appropriate means like our movie credits. Although you're unlikely to find references to this approach elsewhere for HTML 4, too, I think it's appropriate.

Deprecated Attributes

  • compact: Obsolete in HTML5. This attribute is presentational in nature so was deprecated in favor of using CSS. Please see the ol entry in this chapter for more information.
  • + Share This
  • 🔖 Save To Your Account