This chapter is from the book
This chapter is from the book
This chapter is from the book
dl
Description
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:
<dl> <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> . . . </dl>
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élie</cite></h3>
<dl>
<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>
<dt>Cast</dt>
<dd>
<!-- Start nested list -->
<dl>
<dt>Audrey Tautou</dt> <!-- Actor/Actress -->
<dd>Amélie Poulain</dd> <!-- Character -->
<dt>Mathieu Kassovitz</dt>
<dd>Nino Quincampoix</dd>
. . .
</dl>
<!-- end nested list -->
</dd>
. . .
</dl>
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
- Audrey Tautou
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> <dl> <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 children.</dd> <dt><dfn lang="en-gb">aluminium</dfn>, n.</dt> <dt><dfn>aluminum</dfn>, n.</dt> . . . </dl>
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.