Summary
The HTML <dl>
Element (or HTML Description List Element) encloses a list of pairs of terms and descriptions. Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs).
Prior to HTML5, <dl> was known as a Definition List.
- Content categories Flow content, and if the
<dl>
element's children include one name-value pair, palpable content. - Permitted content Zero or more {{HTMLElement("dt")}} elements, each followed by one or more {{HTMLElement("dd")}} elements.
- Tag omission {{no_tag_omission}}
- Permitted parent elements Any element that accepts flow content.
- DOM interface {{domxref("HTMLDListElement")}}
Attributes
This element includes the global attributes.
- {{htmlattrdef("compact")}} {{Non-standard_inline}}
- Forces the description to appear on the same line as the term. This attribute is currently unsupported
Examples
Single term and description
<dl> <dt>Firefox</dt> <dd>A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers.</dd> <!-- other terms and definitions --> </dl>
Output:
Multiple terms, single description
<dl> <dt>Firefox</dt> <dt>Mozilla Firefox</dt> <dt>Fx</dt> <dd>A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers.</dd> <!-- other terms and definitions --> </dl>
Output:
Single term, multiple descriptions
<dl> <dt>Firefox</dt> <dd>A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers.</dd> <dd>The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox, is a mostly herbivorous mammal, slightly larger than a domestic cat (60 cm long).</dd> <!-- other terms and definitions --> </dl>
Output:
Multiple terms and descriptions
It is also possible to define multiple terms with multiple corresponding definitions, by combining the examples above.
Metadata
Description lists are useful for displaying metadata as a list of key-value pairs.
<dl> <dt>Name</dt> <dd>Godzilla</dd> <dt>Born</dt> <dd>1952</dd> <dt>Birthplace</dt> <dd>Japan</dd> <dt>Color</dt> <dd>Green</dd> </dl>
Tip: It can be handy to define a key-value seperator in the CSS3, such as: dt:after {content: ": ";}
Notes
Do not use this element (nor {{HTMLElement("ul")}} elements) to merely create indention on a page. Although it works, this is a bad practice and obscures the meaning of definition lists.
To change the indention of a description term, use the CSS {{cssxref("margin")}} property.
Specifications
Specification | Status | Comment |
---|---|---|
{{SpecName('HTML WHATWG', 'grouping-content.html#the-dl-element', '<dl>')}} | {{Spec2('HTML WHATWG')}} | |
{{SpecName('HTML5 W3C', 'grouping-content.html#the-dl-element', '<dl>')}} | {{Spec2('HTML5 W3C')}} | |
{{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '<dl>')}} | {{Spec2('HTML4.01')}} |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 1.0 | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} |
See also
- {{HTMLElement("dt")}} element
- {{HTMLElement("dd")}} element