path: root/files/de/web/html/element/dl/index.html

---
title: <dl>
slug: Web/HTML/Element/dl
tags:
  - Element
  - HTML
  - HTML Gruppierungsinhalt
  - Referenz
  - Web
translation_of: Web/HTML/Element/dl
---
<p>Das <strong>HTML <code>&lt;dl&gt;</code> Element</strong> (oder <em>HTML</em> <em>Description List Element</em>) umfasst eine Liste von Begriffspaaren und Beschreibungen. Üblicherweise wird das Element zur Implementierung eines Glossars oder zur Anzeige von Metadaten (eine Liste von Schlüsselwertpaaren) genutzt.</p>

<p>Vor HTML5, war &lt;dl&gt; bekannt als Definition List.</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Inhaltskategorien</a></th>
   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Fließender Inhalt</a>, wenn das <code>&lt;dl&gt;</code> Elementkind nur ein Wertepaar beinhaltet, dann greifbarer Inhalt.</td>
  </tr>
  <tr>
   <th scope="row">Erlaubter Inhalt</th>
   <td>Null oder mehr {{HTMLElement("dt")}} Elemente, jedes gefolgt von einem oder mehreren {{HTMLElement("dd")}} Elementen.</td>
  </tr>
  <tr>
   <th scope="row">Tag Auslassung</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">Erlaubte Elternelemente</th>
   <td>Jedes Element, das <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">fließenden Inhalt</a> erlaubt.</td>
  </tr>
  <tr>
   <th scope="row">DOM Schnittstelle</th>
   <td>{{domxref("HTMLDListElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Attribute">Attribute</h2>

<p><span style="line-height: 21px;">Dieses Element schließt </span><a href="/de/docs/Web/HTML/Globale_Attribute" style="line-height: 21px;" title="HTML/Global attributes">globale Attribute</a><span style="line-height: 21px;"> ein.</span></p>

<dl>
 <dt>{{htmlattrdef("compact")}} {{Non-standard_inline}}</dt>
 <dd>Zwingt die Beschreibung dazu, in derselben Linie zu erscheinen wie der Begriff. Dieses Attribut wird aktuell nicht unterstützt.</dd>
</dl>

<h2 id="Beispiele">Beispiele</h2>

<h3 id="Einzelbegriff_und_Beschreibung">Einzelbegriff und Beschreibung</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>Ausgabe:</p>

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

<h3 id="Multiple_Begriffe_einzelne_Beschreibung">Multiple Begriffe, einzelne Beschreibung</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>Ausgabe:</p>

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

<h3 id="Einzelbegriff_multiple_Beschreibungen">Einzelbegriff, multiple Beschreibungen</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>Ausgabe:</p>

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

<h3 id="Multiple_Begriffe_und_Beschreibungen">Multiple Begriffe und Beschreibungen</h3>

<p>Es ist ebenfalls möglich, multiple Begriffe und Beschreibungen zu definieren, wenn man die oberen Beispiele kombiniert.</p>

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

<p>Description Lists sind nützlich um Metadaten als Wertepaar-Listen anzuzeigen.</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>Tipp: Es kann hilfreich sein, Separatoren für Schlüsselwerte in CSS3 zu definieren, wie zum Beispiel:</p>

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

<h2 id="Anmerkungen">Anmerkungen</h2>

<p>Weder dieses Element, noch das {{HTMLElement("ul")}} Element, sollten genutzt werden, um bloß eine Einrückung vorzunehmen. Es funktioniert zwar, wird in der Praxis jedoch nicht angewendet und verfehlt die Definition einer Description List.</p>

<p>Um die Einrückung eines Begriffs zu ändern, sollte die <a href="/de/docs/Web/CSS" title="CSS">CSS</a> {{cssxref("margin")}} Eigenschaft genutzt werden.</p>

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

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Kommentar</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>Ursprüngliche Definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">Browser Kompatibilität</h2>

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

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Merkmal</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Grundlegende Unterstützung</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>Merkmal</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Grundlegende Unterstützung</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Siehe_auch">Siehe auch</h2>

<ul>
 <li>{{HTMLElement("dt")}} Element</li>
 <li>{{HTMLElement("dd")}} Element</li>
</ul>

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