<dl>

  • Revision slug: HTML/Element/dl
  • Revision title: <dl>
  • Revision id: 344879
  • Created:
  • Creator: medicdude
  • Is current revision? No
  • Comment

Revision Content

Summary

The HTML <dl> Element (or HTML Definition List Element) encloses a list of pairs of terms and descriptions. A common use for this element is to implement a glossary.

  • Content categories {{todo}}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 definition description to appear at the same line as the definition term. Works only in Internet Explorer.

Examples

Single term and definition

<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 definition

<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 definitions

<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 definitions

It is also possible to define multiple terms with multiple corresponding definitions, by combining the examples above.

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 definition term, use CSS margin property.

Specifications

Specification Status Comment
{{SpecName('HTML WHATWG', 'grouping-content.html#the-dl-element', '<dl>')}} {{Spec2('HTML WHATWG')}}  
{{SpecName('HTML5 W3C', 'the-dl-element.html#the-dl-element', '<dl>')}} {{Spec2('HTML5 W3C')}}  
{{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '<dl>')}} {{Spec2('HTML4.01')}}  

Browser compatibility

{{CompatibilityTable}}
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
{{HTML:Element_Navigation}}

Revision Source

<h2 id="Summary">Summary</h2>
<p>The <strong>HTML <code>&lt;dl&gt;</code> Element</strong> (or <em>HTML</em> <em>Definition List Element</em>) encloses a list of pairs of terms and descriptions. A common use for this element is to implement a glossary.</p>
<ul class="htmlelt">
  <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></dfn> {{todo}}<a href="/en-US/docs/HTML/Content_categories#Flowing_content" title="HTML/Content_categories#Phrasing_content">Flow content</a>, and if the <code>&lt;dl&gt;</code> element's children include one name-value pair, palpable content.</li>
  <li><dfn>Permitted content</dfn> Zero or more {{HTMLElement("dt")}} elements, each followed by one or more {{HTMLElement("dd")}} elements.</li>
  <li><dfn>Tag omission</dfn> {{no_tag_omission}}</li>
  <li><dfn>Permitted parent elements</dfn> Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">flow content</a>.</li>
  <li><dfn>DOM interface</dfn> {{domxref("HTMLDListElement")}}</li>
</ul>
<h2 id="Attributes">Attributes</h2>
<p><span style="line-height: 21px;">This element includes the&nbsp;</span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">global attributes</a><span style="line-height: 21px;">.</span></p>
<dl>
  <dt>
    {{htmlattrdef("compact")}} {{Non-standard_inline}}</dt>
  <dd>
    Forces the definition description to appear at the same line as the definition term. Works only in Internet Explorer.</dd>
</dl>
<h2 id="Examples">Examples</h2>
<h3 id="Single_term_and_definition">Single term and definition</h3>
<pre class="brush: html">
&lt;dl&gt;
  &lt;dt&gt;Firefox&lt;/dt&gt;
  &lt;dd&gt;A free, open source, cross-platform, graphical web browser
      developed by the Mozilla Corporation and hundreds of volunteers.&lt;/dd&gt;

  &lt;!-- other terms and definitions --&gt;
&lt;/dl&gt;
</pre>
<p>Output:</p>
<p><img alt="Image:HTML-dl1.png" src="/@api/deki/files/241/=HTML-dl1.png" /></p>
<h3 id="Multiple_terms.2C_single_definition">Multiple terms, single definition</h3>
<pre class="brush: html">
&lt;dl&gt;
  &lt;dt&gt;Firefox&lt;/dt&gt;
  &lt;dt&gt;Mozilla Firefox&lt;/dt&gt;
  &lt;dt&gt;Fx&lt;/dt&gt;
  &lt;dd&gt;A free, open source, cross-platform, graphical web browser
      developed by the Mozilla Corporation and hundreds of volunteers.&lt;/dd&gt;

  &lt;!-- other terms and definitions --&gt;
&lt;/dl&gt;
</pre>
<p>Output:</p>
<p><img alt="Image:HTML-dl2.png" src="/@api/deki/files/242/=HTML-dl2.png" /></p>
<h3 id="Single_term.2C_multiple_definitions">Single term, multiple definitions</h3>
<pre class="brush: html">
&lt;dl&gt;
  &lt;dt&gt;Firefox&lt;/dt&gt;
  &lt;dd&gt;A free, open source, cross-platform, graphical web browser
      developed by the Mozilla Corporation and hundreds of volunteers.&lt;/dd&gt;
  &lt;dd&gt;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).&lt;/dd&gt;

  &lt;!-- other terms and definitions --&gt;
&lt;/dl&gt;
</pre>
<p>Output:</p>
<p><img alt="Image:HTML-dl3.png" src="/@api/deki/files/243/=HTML-dl3.png" /></p>
<h3 id="Multiple_terms_and_definitions">Multiple terms and definitions</h3>
<p>It is also possible to define multiple terms with multiple corresponding definitions, by combining the examples above.</p>
<h2 id="Notes">Notes</h2>
<p>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.</p>
<p>To change the indention of a definition term, use <a href="/en-US/docs/CSS" title="CSS">CSS</a> <a href="/en-US/docs/CSS/margin" title="CSS/margin">margin</a> property.</p>
<h2 id="Specifications" name="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-dl-element', '&lt;dl&gt;')}}</td>
      <td>{{Spec2('HTML WHATWG')}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>{{SpecName('HTML5 W3C', 'the-dl-element.html#the-dl-element', '&lt;dl&gt;')}}</td>
      <td>{{Spec2('HTML5 W3C')}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '&lt;dl&gt;')}}</td>
      <td>{{Spec2('HTML4.01')}}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
<div>
  {{CompatibilityTable}}</div>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>1.0</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also">See also</h2>
<ul>
  <li>{{HTMLElement("dt")}} element</li>
  <li>{{HTMLElement("dd")}} element</li>
</ul>
<div>
  {{HTML:Element_Navigation}}</div>
Revert to this revision