Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Relawan kami belum menerjemahkan artikel ini ke dalam Bahasa Indonesia . Bergabunglah dan bantu kami menyelesaikan pekerjaan ini!

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:

Image:HTML-dl1.png

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:

Image:HTML-dl2.png

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:

Image:HTML-dl3.png

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)

See also

Tag Dokumen dan Kontributor

 Terakhir diperbarui oleh: teoli,