I volontari di MDN non hanno ancora tradotto questo articolo in Italiano. Registrati per tradurlo tu.
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 <dt> elements, each followed by one or more <dd> elements. |
Tag omission | None, both the starting and ending tag are mandatory. |
Permitted parent elements | Any element that accepts flow content. |
DOM interface | HTMLDListElement |
Attributes
This element includes the global attributes.
compact
- 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 <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 margin
property.
Specifications
Specification | Status | Comment |
---|---|---|
WHATWG HTML Living Standard The definition of '<dl>' in that specification. |
Living Standard | |
HTML5 The definition of '<dl>' in that specification. |
Recommendation | |
HTML 4.01 Specification The definition of '<dl>' in that specification. |
Recommendation | Initial definition |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 1.0 | (Yes) | (Yes) | (Yes) | (Yes) |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |