BESTE WEBSITE FÜR WEBENTWICKLER
HTML5. W3Schools auf Deutsch. Der komplette Tag-Guide

Ua En Es Fr

HTML-<details>-Tag


Beispiel

Geben Sie Details an, die der Benutzer bei Bedarf öffnen und schließen kann:

<details>
  <summary>Epcot Center</summary>
  <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>
Try it Yourself »

Weitere "Try it Yourself" („Probieren Sie es selbst“)-Beispiele weiter unten.


Definition und Verwendung

Das Tag <details> gibt zusätzliche Details an, die der Benutzer bei Bedarf öffnen und schließen kann.

Das Tag <details> wird häufig zum Erstellen eines interaktiven Widgets verwendet, das der Benutzer öffnen und schließen kann. Standardmäßig ist das Widget geschlossen. Wenn es geöffnet ist, erweitert es sich und zeigt den darin enthaltenen Inhalt an.

Jede Art von Inhalten kann in das <details> getagelt werden.

Tipp: Das <summary> wird in Verbindung mit <details> verwendet, um eine sichtbare Überschrift für die Details anzugeben.


Browser-Unterstützung

Die Zahlen in der Tabelle geben die erste Browserversion an, die das Element vollständig unterstützt.

Element
<details> 12.0 79.0 49.0 6.0 15.0

Attribute

Attribut Wert Beschreibung
open open Geben Sie an, dass die Details für den Benutzer sichtbar (offen) sein sollen

Globale Attribute

Das Tag <details> unterstützt auch die Globale Attribute in HTML.


Ereignisattribute

Das Tag <details> unterstützt auch die Ereignisattribute in HTML.


Weitere Beispiele

Beispiel

Verwenden Sie CSS, um <details> und <summary> zu formatieren:

<html>
<style>
details > summary {
  padding: 4px;
  width: 200px;
  background-color: #eeeeee;
  border: none;
  box-shadow: 1px 1px 2px #bbbbbb;
  cursor: pointer;
}

details > p {
  background-color: #eeeeee;
  padding: 4px;
  margin: 0;
  box-shadow: 1px 1px 2px #bbbbbb;
}
</style>
<body>

<details>
  <summary>Epcot Center</summary>
  <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>

</body>
</html>
Try it Yourself »

Verwandte Seiten

HTML-DOM-Referenz: Details Objekt


Standard CSS -Einstellungen

Die meisten Browser werden das Element <details> mit den folgenden Standardwerten angezeigt:

details {
  display: block;
}