HTML Element - details
Das details-Element stellt einen Bereich für zusätzliche Informationen innerhalb eines Dokuments bereit.
Beispiel
<details>
<summary>World Wide Web Consortium</summary>
<p>Das World Wide Web Consortium (kurz W3C) ist das Gremium zur Standardisierung der Techniken im World Wide Web. Es wurde am 1. Oktober 1994 am MIT Laboratory for Computer Science in Cambridge (Massachusetts) gegründet.<br>
Die Geschichte des W3C ist eng mit der Entwicklung des WWW verbunden. Gründer Tim Berners-Lee war bewusst, dass die inkonsistente Nutzung der Technologien URI, HTTP und HTML dazu führen könnte, Verknüpfungen unwirksam und damit das WWW nutzlos zu machen. Deswegen wollte er die Spezifikationen zu diesen Technologien von der Internet Engineering Task Force (IETF) standardisieren lassen.</p>
</details>
Definition und Verwendung
Das details-Tag definiert einen Bereich mit zusätzlichen Informationen, der vom Benutzer ein- und ausgeblendet werden kann.
Das summary-Tag wird innerhalb von details verwendet und stellt die sichtbare Beschriftung für diesen Bereich dar.
Attribute
Attribute erweitern Elemente um zusätzliche Eigenschaften oder Informationen und beeinflussen deren Bedeutung, Verhalten oder Darstellung. Sie bestehen in der Regel aus einem Attributnamen und einem zugehörigen Wert, wobei die zulässigen Attribute vom jeweiligen Element abhängen und teils allgemein, teils elementbezogen definiert sind.
Eine besondere Gruppe bilden die aria-*-Attribute, die zur Unterstützung der Barrierefreiheit zusätzliche Informationen für assistive Technologien bereitstellen.
| Attribut | Wert | Beschreibung |
|---|---|---|
| open | ||
| name |
Unterstützung von Global- und Event-Attribute
Das details-Tag unterstützt auch Global- und Event-Attribute.
Standardbrowser CSS
Webbrowser wenden auf viele Elemente vordefinierte CSS-Stile an, die eine grundlegende Struktur und Lesbarkeit sicherstellen. Umfang und Ausgestaltung dieser Standardstile können je nach Browser variieren, etwa in Bezug auf Abstände, Schriftgrößen oder die Darstellung einzelner Elemente.
details {
display: block;
}
Beispiel mit CSS
<!DOCTYPE html>
<html>
<head>
<style>
details {
font-family: sans-serif;
}
details summary {
font-weight: 600;
width: 250px;
border: solid 1px #000000;
border-radius: 7px;
margin-bottom: 0;
padding: 5px 10px;
cursor: pointer;
}
details[open] > summary {
border-top-left-radius: 7px;
border-top-right-radius: 7px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-bottom: none;
}
details p {
border: solid 1px #000000;
padding: 10px;
border-top-right-radius: 7px;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
margin-top: 0;
}
details img {
width: 75px;
margin-right: 12px;
float: left;
}
</style>
</head>
<body>
<details>
<summary>World Wide Web Consortium</summary>
<p><a href="https://www.w3.org/policies/logos/" target="_blank"><img src="images/w3c-logo.png"></a> Das World Wide Web Consortium (kurz W3C) ist das Gremium zur Standardisierung der Techniken im World Wide Web. Es wurde am 1. Oktober 1994 am MIT Laboratory for Computer Science in Cambridge (Massachusetts) gegründet.<br>
Die Geschichte des W3C ist eng mit der Entwicklung des WWW verbunden. Gründer Tim Berners-Lee war bewusst, dass die inkonsistente Nutzung der Technologien URI, HTTP und HTML dazu führen könnte, Verknüpfungen unwirksam und damit das WWW nutzlos zu machen. Deswegen wollte er die Spezifikationen zu diesen Technologien von der Internet Engineering Task Force (IETF) standardisieren lassen.</p>
</details>
</body>
</html>
Browserunterstützung
Die Unterstützung von Elementen und Attributen ist in den gängigen modernen Browsern weitgehend einheitlich gewährleistet. Unterschiede können dennoch in Details, im Einführungszeitpunkt neuer Funktionen oder bei experimentellen Features auftreten.
| Element | Firefox | Internet Explorer / Edge | Safari | Chrome | Opera |
|---|---|---|---|---|---|
<details> |
|||||
| seit Version: | 49 | 79 | 6 | 12 | 15 |