HTML <dl> - More Than Just A Definition List

If you find this helpful, please click the Google Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.)

The <dl> Tag for a Description List

Formerly the Definition List element

The <dl> tag is used to create a description list consisting of description terms alternating with groups of one or more detail descriptions. Note that in previous versions of HTML these elements were called definition list, definition terms and definition descriptions. However, since the purpose of the HTML 5 <dfn> tag is to code a definition, the <dt> tag by itself does not identify a term being defined. To create a list of terms and definitions, such as for a glossary, each term defined should be identified by putting it inside a dfn element as shown in this example:

Term: <dl> tag: Definition: The <dl> tag is used to code a description list consisting of description terms alternating with groups of one or more detail descriptions.
Term: <dt> tag: Definition: The <dt> tag is used to code a description term in a description list, leading into one or more detail description elements.
Term: <dd> tag: Definition: The <dd> detail description tag is used to code the description of an item inside a dl element for a description list.

This is an actual working example of the <dl> tag example code below. In most HTML 5 browsers such as Firefox and Opera, the text inside the dfn element will be in an italic font, except for WebKit browsers such as Chrome and Safari which display it in an upright font.

<dl> Tag Syntax

Rules for coding HTML `dl` elements

<body>
   ... flow content expected ...
   <dl>
      ...
      <dt>... phrasing content ...</dt>
      <dd>
         ... flow content ...
      </dd>
      ...
   </dl>
   ...
</body>

Make sure you understand the difference between a tag and element and are familiar with the definitions of namespace and other HTML terms.

Include a dl element where flow content is expected.
Begin the dl element with a starting <dl> tag. The element name uses lower case letters and should be in the HTML namespace, which it will pick up automatically from the xmlns attribute on the <html> tag.
Inside the dl element, between the <dl> starting tag and the </dl> ending tag, code the li elements for the list items.
End the dl element with a matching </dl> closing tag.

Content of the dl element

The content of the dl element can only include HTML comments, dt elements and dd elements.

Validation Errors

If the dl element is used where phrasing content is expected, the W3C Markup Validation Service will report an error like this:

Line line#, Column col#: HTML element dl not allowed as child of HTML element element in this context. Contexts in which element dl may be used: Where flow content is expected. Content model for element element: Phrasing content.

Other tools that validate HTML code may report a similar error. In electronic publishing, for example:

element "dl" from namespace "http://www.w3.org/1999/xhtml" not allowed in this context

To resolve this type of error, move the dl element and its inner HTML inside one of the HTML elements where flow content is allowed.

The inner HTML code of the dl element must include at least one dt element and at least one dd element. If either one is missing the W3C Markup Validation Service will report an error like this:

Line line#, Column col#: HTML element dl is missing a required instance of child element dt [or dd] Content model for element dl: Zero or more groups each consisting of one or more dt elements followed by one or more dd elements.

To resolve this type of error, add the missing element(s) to the inner HTML of the dl element.

<dl> Tag Attributes

Attributes of the <dl> tag

global attributes

In addition to the personal attributes of the <dl> tag below, any of the common HTML attributes can also be coded.

<dl> Tag Examples

Examples of the `dl` tag in HTML 5

Example of the <dl> tag for a list of definitions

(see <dl> tag demo above)

Here is an example of how to code a glossary of some HTML terms and their definitions.

<dl>
   <dt>Term: <dfn>&lt;dl&gt; tag</dfn></dt>
   <dd>Definition: The &lt;dl&gt; tag is used to code a description list consisting
   of description terms alternating with groups of one or more detail descriptions.</dd>
   <dt>Term: <dfn>&lt;dt&gt; tag</dfn></dt>
   <dd>Definition: The &lt;dt&gt; tag is used to code a description term
   in a description list, leading into one or more detail description elements.</dd>
   <dt>Term:  <dfn>&lt;dd&gt; tag</dfn></dt>
   <dd>Definition: The &lt;dd&gt; detail description tag is used to code the
   description of an item inside a <b>dl</b> element for a description list.</dd>
</dl>

Note that since the <dl> tag, <dt> tags and <dd> tags do not indicate that this is a list of terms and their definitions, each term is coded inside a dfn element.

Changes in HTML 5 - <dl> Tag

What's new in HTML 5

Differences between HTML 5 and earlier versions of HTML

The following attributes should not be coded on the <dl> tag because they either have been deprecated or were never officially supported:

compact

The 2000-2010 Recommendations from the W3C HTML Working Group defined the HTML namespace for the dl element type name along with the names of all HTML element types. In older (pre-2000) versions of HTML, element type names were not associated with a namespace.

Valid HTML 5