9.10. The dl element: Definition lists

9.10. The `dl` element: Definition lists

One of the most useful XHTML constructs is the dl or definition list element. Typically you will use this for lists containing definitions of terms. Here's an example:

akagai: Red clam.
sawagani: A tiny freshwater crab, usually grilled and eaten whole.

A definition list is usually presented with the terms set “flush left” (that is, unindented), and each definition is formatted as an indented block below the term. Here is the content model:

element dl
{ Common.attrib,
  (dt | dd)+
}
dt = element dt
{ Common.attrib,
  Inline.model
}
dd = element dd
{ Common.attrib,
  Block.model
}

Common.attrib: All three elements (dl, dt, and dd) may carry the attributes described in Section 15.3, “The common attributes: Common.attrib”.
(dt | dd)+: The dt element is used for each terms, and the dd element contains the definition. Usually, inside a dl list, you will use the sequence dt, dd, dt, dd, and so on. However, in general, you can use any mixture of these two elements in any order.
dt: Enclose each term in a dt element. The content of this element may be any mixture of text and inline elements; see Section 10, “Inline content: Inline.model”.
dd: Enclose each definition in a dd element. The definition itself must be one or more block elements; see Section 9, “The block elements”.

As an example, here is the above list of sushi ingredient definitions in XHTML:

      <dl>
        <dt>akagai</dt>
        <dd>
          <p>
            Red clam.
          </p>
        </dd>
        <dt>sawagani</dt>
        <dd>
          <p>
            A tiny freshwater crab, usually grilled and
            eaten whole.
          </p>
        </dd>
      </dl>

Building web pages with XHTML 1.1

9.10. The dl element: Definition lists

9.10. The `dl` element: Definition lists