[Chapter 8] 8.7 Definition Lists

8.7 Definition Lists

HTML also supports a list style entirely different from the ordered, unordered, menu, and directory lists we've discussed so far: definition lists. Like the entries you find in a dictionary or encyclopedia, complete with text, pictures, and other multimedia elements, the definition list is the ideal way to present a glossary, list of terms, or other name/value lists in HTML.

The `<dl>` Tag

The definition list is enclosed by the <dl> and </dl> tags. Within those tags, each item in a definition list is composed of two parts: a term followed by its definition or explanation. Instead of <li>, each item name in a <dl> list is marked with the <dt> tag, followed by the item's definition or explanation as marked by the <dd> tag.

Browsers typically render the item or term name at the left margin and render the definition or explanation below it and indented. If the definition terms are very short (typically less than three characters), the browser may choose to place the first portion of the definition on the same line as the term. See how the source HTML definition list below gets displayed by Netscape in Figure 8.10.

<h3>Common Kumquat Parasites</h3>
<dl>
  <dt>Leaf mites
  <dd>The leaf mite will ravage the Kumquat tree, stripping it
      of any and all vegetation.
  <dt>Trunk dropsy
  <dd>This microscopic larvae of the common opossum 
      chigger will consume the structural elements of the
      tree trunk, causing it to collapse inward.
</dl>

Figure 8.10: A definition list as presented by Netscape

[Graphic: Figure 8-10]

As with other list types, you can add more space between the list items by inserting paragraph <p> tags between them or by defining a spacious style for the <li> tag.

More compact definition lists

The <dl> tag also has the compact attribute, advising the browser to make the list presentation as small as possible. The browser may choose to reduce the inter-item spacing, shift the definition to the left margin instead of indenting, or reduce the size of the type used to present the list. Whether or not a browser actually does any of these things is up to its manufacturer. Few do.

The style and class attributes

The style attribute for the <dl> tag creates an inline style for the elements enclosed by the tag, overriding any other style rule in effect. The class attribute lets you format the content according to a predefined class of the <dl> tag; its value is the name of that class. [the section called "Inline Styles: The style Attribute"] [the section called "Style Classes"].

The `<dt>` Tag

This <dt> tag defines the term component of a definition list. It is only valid when used within a definition <dl> list preceding the term or item, before the <dd> tag and the term's definition or explanation.

Traditionally, the definition term that follows the <dt> tag is short and sweet--a word or few. Technically, it can be any length. If long, the browser may exercise the option of extending the item beyond the display window, or wrap it onto the next line where the definition begins.

Since the end of the <dt> tag immediately precedes the start of the matching <dd> tag, it is unambiguous and so not required.

Formatting text with `<dt>`

In practice, browsers are either too lenient or too dumb to enforce the HTML rules, so some tricky HTML authors misuse the <dt> tag to shift the left margin right and left, respectively, for fancy text displays. (Remember, tab characters and leading spaces don't usually work with regular text.) We don't condone violating the HTML standard and caution you once again about tricked-up documents. Use style sheets instead.

The style and class attributes

The style attribute for the <dt> tag creates an inline style for the elements enclosed by the tag, overriding any other style rule in effect. The class attribute lets you format the content according to a predefined class of the <dt> tag; its value is the name of that class. [the section called "Inline Styles: The style Attribute"] [the section called "Style Classes"]

The `<dd>` Tag

The <dd> tag marks the start of the definition portion of an item in a definition list. According to the HTML standard, <dd> belongs only inside a definition <dl> list, immediately following the <dt> tag and term and preceding the definition or explanation.

The content that follows the <dd> tag may be any HTML construct, including other lists, block text, and multimedia elements. Although treating it otherwise identically as conventional content, browsers typically indent definition list <dd> definitions. And since the start of another term and definition (<dt>) or the required end tag of the definition (</dl>) unambiguously terminates the preceding definition, the </dd> tag is not needed and its absence makes your source text more readable.

The style and class attributes

The style attribute for the <dd> tag creates an inline style for the elements enclosed by the tag, overriding any other style rule in effect. The class attribute lets you format the content according to a predefined class of the <dd> tag; its value is the name of that class. [the section called "Inline Styles: The style Attribute"] [the section called "Style Classes"].