HTML <dl> Tag

The HTML <dl> tag represents a description list in an HTML document.

In a description list (also known as an association list or a definition list), each list item contains two or more entries; a term (dt) and a description (dd).

Note that a definition term can be linked to more than one description. There can also be multiple terms for a single description (for example, in the case where there are multiple spellings of a term being defined). In this case, each term must be enclosed in its own set of dt tags (there shouldn't be any more than one term within a single dt element).

Also note that the defintion term (dt) does not indicate that its contents are a term being defined, but this can be indicated using the dfn element.

Syntax

The <dl> tag is written as <dl></dl> with the <dt> and <dd> elements inserted between the start and end tag. The number of those elements will depend on the number of definition terms and descriptions in the list.

Like this:

Examples

Basic tag usage

Here's an example of a basic description list.

Using dfn to Define a Term

The <dt> element does not indicate that its contents are a term being defined. To indicate the defining instance of a term, use the dfn element.

Multiple Terms

Here's an example of using multiple <dt> elements for a single <dd> element.

Multiple Descriptions

You can have more than one <dd> element for each <dt> element (any given term could have multiple definitions). Each <dd> element provides a separate description.

Nested Lists

You can have nested description lists if your descriptions are more complex. You can also have paragraphs and other elements.

In fact, the <dd> element can contain "flow content" so you can nest most other elements inside the <dd> element ("flow content" refers to most HTML elements that can appear within the <body> of an HTML document).

Here's an example of a description list that contains a <p> element, an ordered (<ol>) and unordered list (<ul>) among its definition descriptions.

Attributes

Attributes can be added to an HTML element to provide more information about how the element should appear or behave.

There are 3 kinds of attributes that you can add to your HTML tags: Element-specific, global, and event handler content attributes.

The <dl> element accepts the following attributes.

Element-Specific Attributes

This table shows the attributes that are specific to the <dl> tag/element.

AttributeDescription
None 

Global Attributes

The following attributes are standard across all HTML5 elements. Therefore, you can use these attributes with the <dl> tag , as well as with all other HTML tags.

For a full explanation of these attributes, see HTML 5 global attributes.

Event Handler Content Attributes

Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain "event" occurs. Each event handler content attribute deals with a different event.

Below are the standard HTML5 event handler content attributes.

Again, you can use any of these with the <dl> element, as well as any other HTML5 element.

For a full explanation of these attributes, see HTML 5 event handler content attributes.

Differences Between HTML 4 & HTML 5

None. Although note that the HTML5 specification refers to the lists as "association lists" and "description lists", whereas HTML 4 referred to them as "definition lists".

To see more detail on the two versions see HTML5 <dl> Tag and HTML4 <dl> Tag. Also check out the links to the official specifications below.

Template

Here's a template for the <dl> tag with all available attributes for the tag (based on HTML5). These are grouped into attribute types, each type separated by a space. In many cases, you will probably only need one or two (if any) attributes. Simply remove the attributes you don't need.

For more information on attributes for this tag, see HTML5 <dl> Tag and HTML4 <dl> Tag.

Tag Details

For more details about the <dl> tag, see HTML5 <dl> Tag and HTML4 <dl> Tag.

Specifications

Here are the official specifications for the <dl> element.

What's the Difference?

W3C creates "snapshot" specifications that don't change once defined. So the HTML5 specification won't change once it becomes an official recommendation. WHATWG on the other hand, develops a "living standard" that is updated on a regular basis. In general, you will probably find that the HTML living standard will be more closely aligned to the current W3C draft than to the HTML5 specification.

Related