Definition Lists — <dl>, <dt> and <dd>

Topics on This Page

The <dl>, <dt> and <dd> Tags
Example

The <dl>, <dt> and <dd> Tags

<dl>

  Contents:
     <dt> and/or <dd> tags only

<dt>

  Contents:
     Inline elements

<dd>

  Contents:
     Inline elements and block elements

A definition list is intended for displaying terms in a dictionary format. It's contents are a series of pairs of terms (<dt>) and their definitions (<dd>).

<dl>
  <dt> Client </dt>
  <dd>
    The user's side of the software used on the Internet. Popular
    client softwares are Netscape, Internet Explorer and Lynx.
  </dd>
  <dt> Server </dt>
  <dd>
    The HTML web page and cgi-bin program side of the Internet.
    Server software will send out requested HTML or cgi-bin web
    pages along with images and other multimedia.
  </dd>
</dl>

<dt> is intended just for displaying a word being defined, and only inline content is allowed. Block tags such as <p> are not allowed.

<dd> is intended for the definition. Block tags are allowed inside <dd>.

It's not required that there be exactly one <dt> and one <dd> pair for each item. It's recognized that a single definition might apply to more than one term, and that two or more definitions might apply to the same term. Here's an example from the W3C:

<dl>
  <dt> Center </dt>
  <dt> Centre </dt>
  <dd>
    A point equidistant from all points
    on the surface of a sphere.
  </dd>
  <dd>
    In some field sports, the player who
     holds the middle position on the field, court,
     or forward line.
  </dd>
</dl>

Although intended for dictionary-type displays, a definition list can be useful for other things. Here's an example taken from the Web Definition Group (WDG):

<dl>
  <dt> March 8 </dt>
  <dd>
      The Symphony Orchestra presents <i>A Rising Star</i>
      at the Anderson Center. Call 555-1234 for details.
  </dd>
  <dt> March 10 </dt>
  <dd>
      Bereaved Families Support Night, 7:00 to 9:00 at
      523 Main St.
  </dd>
</dl>

Here's another example from the WDG, illustrating the use of a definition list for displaying a play script.

<dl>
  <dt> Brutus </dt>
  <dd>
    <p>
      I kiss thy hand, but not in flattery, Caesar;<br>
      Desiring thee that Publius Cimber may<br>
      Have an immediate freedom of repeal.
    </p>
  </dd>
  <dt> Caesar </dt>
  <dd>
    <p>
      What, Brutus!
    </p>
  </dd>
  <dt> Cassius </dt>
  <dd>
    <p>
      Pardon, Caesar; Caesar, pardon:<br>
      As low as to thy foot doth Cassius fall,<br>
      To beg enfranchisement for Publius Cimber.
    </p>
  </dd>
</dl>

Example

Play around with lists a bit. Try applying different styles. Note the clumsy use of <span> to achieve different styles for the <dt> and <dd> elements. If not for Netscape 4, you could simply use dt and dd selectors and get rid of the <span>'s. As with ordered and unordered lists, Netscape 4 recognizes styles applied to <dl> but not to <dt> and <dd>.