Your Search Results

    <dl>

    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)

    See also

    Document Tags and Contributors

    Tags: 
     Contributors to this page: teoli, Sebastianz, bmuenzenmeyer, Rufflewind, 92hackers, KyliRouge, kscarfone, justleroy, GregR, Sheppy, ethertank, Havvy, medicdude, grendel, cers, hobophobe, osdm, jswisher, Sevenspade, PablO, Ptak82, Rappo
     Last updated by: teoli,