HTML `<details>`-Element

Das <details>-Element ist eines der HTML5-Elemente. Es erstellt ein Aufklapp-Widget und enthält zusätzliche Informationen, die der Benutzer öffnen und einsehen kann. Standardmäßig wird der Inhalt des Elements nicht angezeigt. Um ihn anzuzeigen, muss das open-Attribut gesetzt werden. Ein Aufklapp-Widget wird üblicherweise durch ein kleines Dreieck dargestellt, das sich dreht, um den geöffneten oder geschlossenen Zustand anzuzeigen.

Das <summary>-Element legt den sichtbaren Titel fest, der beim Anklicken zusätzliche Informationen ein- oder ausblendet. Ist kein Header angegeben, zeigt der Browser standardmäßig „Weitere Details“ an.

Syntax

Das <details>-Element wird immer in Paaren verwendet. Der Inhalt wird zwischen dem öffnenden (<details>)- und dem schließenden (</details>)-Tag notiert.

Beispiel für das HTML `<details>`-Element:

HTML <details>-Element

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <details>
      <summary>Click to see details</summary>
      <p>Detailed information is here.</p>
    </details>
  </body>
</html>

Try it Yourself »

Ergebnis

details-Beispiel

Beispiel für das HTML `<details>`-Element innerhalb eines `<form>`-Elements:

HTML <details>-Element

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form action="action_form.php" method="get">
      <details>
        <summary>Departure airport:</summary>
        <input type="text" list="airports" name="airports" />
        <datalist id="airports">
          <option value="Birmingham">
          <option value="Cambridge">
          <option value="Oxford">
          <option value="Bangor">
        </datalist>
        <input type="submit" value="confirm" />
      </details>
    </form>
  </body>
</html>

Try it Yourself »

Attribute

Attribut	Wert	Beschreibung
open	open	Gibt an, dass die Informationen im Element initial in erweiterter Form angezeigt werden sollen.

Das <details>-Element unterstützt auch die Globalen Attribute und die Ereignisattribute.

So stylen Sie ein HTML <details>-Element

css

details {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0.5em;
}
summary {
  font-weight: bold;
  cursor: pointer;
}

Sie können das Aufklapp-Symbol auch mit dem ::marker-Pseudo-Element anpassen.

Praxis

Was trifft auf das HTML <details>-Element zu?

Das HTML <details>-Element erzeugt eine Aufklapp-Box, wenn es angeklickt wird.Das HTML <details>-Element kann Buttons enthalten.Das HTML <details>-Element kann CSS-Stile enthalten.Das HTML <details>-Element kann keine anderen HTML-Elemente enthalten.

HTML <details>-Element ​

Syntax ​

Beispiel für das HTML <details>-Element: ​

Ergebnis ​

Beispiel für das HTML <details>-Element innerhalb eines <form>-Elements: ​

Attribute ​