dl (HTML element)
| Depr. | Empty | Version |
|---|---|---|
| No | No | HTML 2 |
| IE5.5+ | FF1+ | Saf1.3+ | Op9.2+ |
|---|---|---|---|
| Full | Full | Full | Full |
Example
In the example below, a definition list is used to format a number of definitions related to the topic of spam:
<dl>
<dt>Spam</dt>
<dd>unsolicited email sent in the hope of increasing sales of
some product, or simply for the purposes of annoying people</dd>
<dt>Spammer</dt>
<dd>someone who sends out spam email and therefore deserves to
develop a nasty incurable disease of some kind</dd>
<dt>Spam Filter</dt>
<dd>a tool used in email to 'filter out' likely spam messages,
usually placing them in a dedicated junk messages folder
or similar</dd>
</dl>
- Type
- block-level element
- Contains
dt,dd- Contained by
applet,blockquote,body,button,center,dd,del,div,fieldset,form,iframe,ins,li,map,noframes,noscript,object,td,th
Description
If you
want to list a series of items that essentially have a title and a
description of some kind (that is, each item has two parts), use the
definition list dl element. This element contains a
series of definition term (dt) and
definition description (dd)
pairings.
A definition list would display as illustrated in Figure 1.
You can also nest definition lists, as the example below shows:
<dl>
<dt>Spam</dt>
<dd>unsolicited email sent in the hope of increasing sales of some
product, or simply for the purposes of annoying people
<dl>
<dt>Spammer</dt>
<dd>someone who sends out spam email and therefore deserves to
develop a nasty incurable disease of some kind</dd>
<dt>Spam Filter</dt>
<dd>a tool used in email to 'filter out' likely spam messages,
usually placing them in a dedicated junk messages folder
or similar</dd>
</dl>
</dd>
</dl>
Without any CSS styles applied, this code would render as shown in Figure 2.
Use This For …
Typical uses (and hence values) for definition lists include:
- glossaries, such as the example shown above (term: definition)
- event listing (title of event: description of event)
- web site directory (web site name with link: description of web site)
Some people use definition lists for the purposes of marking up
dialogues (using dt to denote the speakers, and
dd for the words they say). This approach has come
straight from the horse’s mouth—the W3C HTML recommendation states that
"Another application of dl is for marking up
dialogs"—but many people argue that it represents bad practice and is
somewhat misguided. You may see definitions lists used in this way, but
arguably you shouldn’t use them for this purpose, despite what the W3C
says, because they’re designed to mark up lists of
definitions.
Compatibility
| IE | 5.5 | Full |
|---|---|---|
| 6.0 | Full | |
| 7.0 | Full | |
| Firefox | 1.0 | Full |
| 1.5 | Full | |
| 2.0 | Full | |
| Safari | 1.3 | Full |
| 2.0 | Full | |
| 3.0 | Full | |
| Opera | 9.2 | Full |
| 9.5 | Full |
Every browser listed supports this element type.
User-contributed notes
- ID:
- #1
- Date:
- Fri, 28 Mar 2008 09:17:37 GMT
The content of a DL doesn't have to be *pairs* of DT/DD. It's perfectly valid to have multiple DTs followed by a DD if several terms have the same definition. Or one DT followed by multiple DDs if there are several definitions for that term. Or even multiple DTs followed by multiple DDs.
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.
