---
title: <dl>
slug: Web/HTML/Element/dl
translation_of: Web/HTML/Element/dl
---
<p>L'<strong>element HTML &lt;dl&gt;</strong>  (o <em>Element HTML llista de descripcions</em>) tanca una llista de parells de termes i descripcions. Els usos més comuns per a aquest element són per implementa un glossari o per mostrar metadades (una llista de parells clau-valor).</p>

<p>Abans d'HTML5, <code>&lt;dl&gt;</code> es coneixia com una llista de definicions.</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Categories de contingut</a></th>
   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Contingut dinàmic</a>,i si els fills dels elements <code>&lt;dl&gt;</code>  inclouen un parell nom-valor, contingut palpable.</td>
  </tr>
  <tr>
   <th scope="row">Contingut permès</th>
   <td>Zero o més elements {{HTMLElement("dt")}}, cadascun seguit d'un o més elements {{HTMLElement("dd")}}.</td>
  </tr>
  <tr>
   <th scope="row">Omissió de l'etiqueta</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">Elements pares permesos</th>
   <td>Qualsevol element que accepti <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">contingut dinàmic</a>.</td>
  </tr>
  <tr>
   <th scope="row">Interfície DOM</th>
   <td>{{domxref("HTMLDListElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Atributs">Atributs</h2>

<p>Aquest element inclou els<span style="line-height: 21px;"> </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">atributs globals</a><span style="line-height: 21px;">.</span></p>

<dl>
 <dt>{{htmlattrdef("compact")}} {{Non-standard_inline}}</dt>
 <dd>Obliga a la descripció que aparegui en la mateixa línia que el terme. Aquest atribut no s'admet</dd>
</dl>

<h2 id="Exemples">Exemples</h2>

<h3 id="Terme_únic_i_descripció">Terme únic i descripció</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>Sortida:</p>

<p><img alt="Image:HTML-dl1.png" src="/@api/deki/files/241/=HTML-dl1.png"></p>

<h3 id="Múltiples_termes_descripció_única">Múltiples termes, descripció única</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>Sortida:</p>

<p><img alt="Image:HTML-dl2.png" src="/@api/deki/files/242/=HTML-dl2.png"></p>

<h3 id="Terme_únic_múltiples_descripcions">Terme únic, múltiples descripcions</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>Sortida:</p>

<p><img alt="Image:HTML-dl3.png" src="/@api/deki/files/243/=HTML-dl3.png"></p>

<h3 id="Múltiples_termes_i_descripcions">Múltiples termes i descripcions</h3>

<p>També és possible definir diversos termes amb las definicions múltiples corresponents, mitjançant la combinació dels exemples anteriors.</p>

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

<p>La descripció de les llistes són útils per mostrar les metadades com una llista de parells de clau-valor.</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>Consell: Pot ser útil per definir un separador clau-valor en CSS3, com ara:</p>

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

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

<p>No utilitzeu aquest element (ni elements {{HTMLElement("ul")}}) per crear simplement sangrat en una pàgina. Encara que funciona, això és una mala pràctica i enfosqueix el significat de les llistes de definicions.</p>

<p>Per canviar el sangrat de la descripció d'un terme, utilitzeu la propietat <a href="/en-US/docs/CSS" title="CSS">CSS</a> {{cssxref("margin")}}.</p>

<h2 id="Specifications" name="Specifications">Especificacions</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificació</th>
   <th scope="col">Estat</th>
   <th scope="col">Comentari</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> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-dl-element', '&lt;dl&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '&lt;dl&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td>Definició inicial</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">Navegadors compatibles</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Suport bàsic</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>Característica</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Suport bàsic</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Veure">Veure</h2>

<ul>
 <li>L'element {{HTMLElement("dt")}}</li>
 <li>L'element {{HTMLElement("dd")}}</li>
</ul>

<div>{{HTMLRef}}</div>