diff options
Diffstat (limited to 'files/de/web/html/element/dl/index.html')
| -rw-r--r-- | files/de/web/html/element/dl/index.html | 222 |
1 files changed, 222 insertions, 0 deletions
diff --git a/files/de/web/html/element/dl/index.html b/files/de/web/html/element/dl/index.html new file mode 100644 index 0000000000..7145a49a1d --- /dev/null +++ b/files/de/web/html/element/dl/index.html @@ -0,0 +1,222 @@ +--- +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><dl></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 <dl> 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><dl></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"><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> +</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"><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> +</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"><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> +</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><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> +</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', '<dl>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-dl-element', '<dl>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '<dl>')}}</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> |