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.
Attribute | Description |
---|---|
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.
- accesskey
- class
- contenteditable
- contextmenu
- dir
- draggable
- dropzone
- hidden
- id
- inert
- itemid
- itemprop
- itemref
- itemscope
- itemtype
- lang
- spellcheck
- style
- tabindex
- title
- translate
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.
- onabort
- oncancel
- onblur
- oncanplay
- oncanplaythrough
- onchange
- onclick
- oncontextmenu
- ondblclick
- ondrag
- ondragend
- ondragenter
- ondragexit
- ondragleave
- ondragover
- ondragstart
- ondrop
- ondurationchange
- onemptied
- onended
- onerror
- onfocus
- onformchange
- onforminput
- oninput
- oninvalid
- onkeydown
- onkeypress
- onkeyup
- onload
- onloadeddata
- onloadedmetadata
- onloadstart
- onmousedown
- onmousemove
- onmouseout
- onmouseover
- onmouseup
- onmousewheel
- onpause
- onplay
- onplaying
- onprogress
- onratechange
- onreadystatechange
- onscroll
- onseeked
- onseeking
- onselect
- onshow
- onstalled
- onsubmit
- onsuspend
- ontimeupdate
- onvolumechange
- onwaiting
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.
- HTML5 Specification (W3C)
- HTML Living Standard (WHATWG)
- Current W3C Draft (the next version that is currently being worked on)
- HTML 4 (W3C)
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.