Section 7.5. Definition Lists | Data Networks: Routing, Security, and Performance Optimization

7.5. Definition Lists

HTML and XHTML also support a list style entirely different from the ordered and unordered 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 list.

7.5.1. The <dl> Tag

The definition list is enclosed by the <dl> and </dl> tags. Within the 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 marked by the <dd> tag.

<dl>

Function	Defines a definition list
Attributes	`class, compact, dir, id, lang, onClick, onDblClick, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp, style, title, type`
End tag	`</dl>` ; never omitted
Contains	dl_content
Used in	block

Unless you change the display attributes with stylesheet rules, 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 following source XHTML definition list gets displayed in Figure 7-8:

Figure 7-8. A definition list example

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

As with other list types, you can add more space between the definition list items by inserting paragraph <p> tags at the end of their content or by defining a spacious style for the respective tags.

7.5.1.1. More compact definition lists

The <dl> tag supports the compact attribute, advising the browser to make the list presentation as small as possible. Few browsers, if any, honor this attribute, and it has been deprecated in HTML 4 and XHTML.

7.5.1.2. The class, dir, id, lang, style, title, and event attributes

The many other attributes for the <dl> tag should be quite familiar by now. The style and class attributes let you control the display style, the id and title tag attributes let you uniquely label its contents, the lang and dir attributes let you specify its native language and the direction in which the text will be rendered, and the many on-event attributes let you react to user -initiated mouse and keyboard actions on the contents. Not all are implemented by the currently popular browsers for this tag or for many others. [The dir attribute, 3.6.1.1] [The lang attribute, 3.6.1.2] [The id attribute, 4.1.1.4] [The title attribute, 4.1.1.5] [Inline Styles: The style Attribute, 8.1.1] [Style Classes, 8.3] [JavaScript Event Handlers, 12.3.3]

7.5.2. The <dt> Tag

The <dt> tag defines the term component of a definition list. It is valid only 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 sweetone or a few words. Technically, it can be any length. If the definition term is long, the browser may exercise the option of extending the item beyond the display window or wrapping it onto the next line, where the definition begins.

Because the end of the <dt> tag immediately precedes the start of the matching <dd> tag, it is unambiguous, so the </dt> end tag is not required in HTML documents.

<dt>

Function	Defines a definition list term
Attributes	`class, dir, id, lang, onClick, onDblClick, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp, style, title`
End tag	`</dt>` ; may be omitted in HTML
Contains	text
Used in	dl_content

However, the XHTML standard insists that it be present, so get used to including it in your documents.

7.5.2.1. Formatting text with <dt>

In practice, browsers are either too lenient or too dumb to enforce the 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 usually don't work with regular text.) We don't condone violating the HTML, and certainly not the XHTML standard, and we caution you once again about tricked-up documents. Use stylesheets instead.

7.5.2.2. The class, dir, id, lang, style, title, and event attributes

The <dt> tag supports the standard HTML 4/XHTML tag attributes. The style and class attributes let you control the display style, the id and title tag attributes let you uniquely label its contents, the lang and dir attributes let you specify its native language and the direction in which the text will be rendered, and the many on-event attributes let you react to user-initiated mouse and keyboard actions on the contents. Not all are implemented by the currently popular browsers for this tag or for many others. [The dir attribute, 3.6.1.1] [The lang attribute, 3.6.1.2] [The id attribute, 4.1.1.4][The title attribute, 4.1.1.5] [Inline Styles: The style Attribute, 8.1.1] [Style Classes, 8.3] [JavaScript Event Handlers, 12.3.3]

7.5.3. The <dd> Tag

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

<dd>

Function	Defines a definition list term
Attributes	`class, dir, id, lang, onClick, onDblClick, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp, style, title`
End tag	`</dd>` ; may be omitted in HTML
Contains	flow
Used in	dl_content

The content that follows the <dd> tag may be any HTML or XHTML construct, including other lists, block text, and multimedia elements. Although treating it otherwise identically as conventional content, browsers typically indent definition list ( <dd> ) definitions. Because the start of another term and definition ( <dt> ) or the required end tag of the definition ( </dl> ) unambiguously terminates the preceding definition, the </dd> end tag is not needed, and its absence makes your source text more readable. However, once again, XHTML insists that the end tag appear in your documents, so you may as well get used to adding </dd> to your documents.

7.5.3.1. The class, dir, id, lang, style, title, and event attributes

The <dt> tag supports the standard tag attributes. The style and class attributes let you control the display style, the id and title tag attributes let you uniquely label its contents, the lang and dir attributes let you specify its native language and the direction in which the text will be rendered, and the many on-event attributes let you react to user-initiated mouse and keyboard actions on the contents. Not all are implemented by the currently popular browsers for this tag or for many others. [The dir attribute, 3.6.1.1] [The lang attribute, 3.6.1.2] [The id attribute, 4.1.1.4] [The title attribute, 4.1.1.5] [Inline Styles: The style Attribute, 8.1.1] [Style Classes, 8.3] [JavaScript Event Handlers, 12.3.3]