Using the Right Tag for the Right Job - HTML5 Mastery: Semantics, Standards, and Styling - page 63

catered for) and very easy to implement, requiring only the inclusion of a small script
and the addition of a class selector to your CSS file.
Description lists: dl, dt, and dd
The description list consists of an opening dl , followed by a term ( dt ), and then any
number of descriptions ( dd ). A typical description list looks like this:
<dl>
<dt>Bottle</dt>
<dd>A receptacle having a narrow neck, usually no
handles, and a mouth that can be
plugged, corked, or capped.</dd>
<dd>To hold in; restrain: "bottled up my emo-
tions."</dd>
<dt>Rocket</dt>
<dd>A vehicle or device propelled by one or more
rocket engines, especially such a
vehicle designed to travel through space.</dd>
</dl>
Most browsers would display the preceding code in a similar way to that shown in
Figure 2-5 .
Figure 2-5. A description list, with the terms on the left and the descriptions indented
Description lists are, as noted, fairly flexible. As long as there is a direct relationship
between the term and the description(s), many constructs can be represented using this
list. For instance, a photograph as the term could have descriptions including inform-
ation about both the photographer and the camera. In addition, a description list could
be used to display a schedule for a series of presentations at a conference, with the title
of the presentation as the term and the descriptions including details of the presenting
author and the date and time. A description list could also be used in an online shopping
application to describe product details, and so forth.