Revision 933783 of <dl>

<h2 id="Summary">Summary</h2>

<p>The <strong>HTML <code>&lt;dl&gt;</code> Element</strong> (or <em>HTML</em> <em>Description List Element</em>) 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).</p>

<p>Prior to HTML5, &lt;dl&gt; was known as a Definition List.</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></th>
   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, and if the <code>&lt;dl&gt;</code> element's children include one name-value pair, palpable content.</td>
  </tr>
  <tr>
   <th scope="row">Permitted content</th>
   <td>Zero or more {{HTMLElement("dt")}} elements, each followed by one or more {{HTMLElement("dd")}} elements.</td>
  </tr>
  <tr>
   <th scope="row">Tag omission</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">Permitted parent elements</th>
   <td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">flow content</a>.</td>
  </tr>
  <tr>
   <th scope="row">DOM interface</th>
   <td>{{domxref("HTMLDListElement")}}</td>
  </tr>
 </tbody>
</table>

<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 description to appear on the same line as the term. This attribute is currently unsupported</dd>
</dl>

<h2 id="Examples">Examples</h2>

<h3 id="Single_term_and_description">Single term and description</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_single_description">Multiple terms, single description</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_multiple_descriptions">Single term, multiple descriptions</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_descriptions">Multiple terms and descriptions</h3>

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

<h3 id="Metadata">Metadata</h3>

<p>Description lists are useful for displaying metadata as a list of key-value pairs.</p>

<pre>
&lt;dl&gt;
    &lt;dt&gt;Name&lt;/dt&gt;    
    &lt;dd&gt;Godzilla&lt;/dd&gt;
    &lt;dt&gt;Born&lt;/dt&gt;
    &lt;dd&gt;1952&lt;/dd&gt;
    &lt;dt&gt;Birthplace&lt;/dt&gt;
    &lt;dd&gt;Japan&lt;/dd&gt;
    &lt;dt&gt;Color&lt;/dt&gt;
    &lt;dd&gt;Green&lt;/dd&gt;
&lt;/dl&gt;
</pre>

<p>Tip: It can be handy to define a key-value seperator in the CSS3, such as:</p>

<pre class="brush: css">
dt:after {
  content: ": ";
}</pre>

<h2 id="Notes">Notes</h2>

<p>Do not use this element&nbsp;(nor {{HTMLElement("ul")}} elements)&nbsp;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 description term, use the <a href="/en-US/docs/CSS" title="CSS">CSS</a> {{cssxref("margin")}} 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', 'grouping-content.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>Initial definition</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>{{HTMLRef}}</div>