HTML <details>-Tag

Der <details>-Tag ist eines der HTML5-Elemente. Er erstellt ein Offenlegungs-Widget: ein interaktives Steuerelement, das der Benutzer öffnen kann, um zusätzlichen Inhalt anzuzeigen, und wieder schließen kann, um ihn auszublenden. Standardmäßig bleibt der Inhalt verborgen, und der Browser zeichnet ein kleines Dreieck (den Offenlegungs-Marker), das sich dreht, um den geöffneten oder geschlossenen Zustand anzuzeigen.

Das erste untergeordnete Element von <details> sollte ein <summary>-Element sein, das die sichtbare Beschriftung festlegt, auf die der Benutzer klickt, um das Widget umzuschalten. Das <summary> ist das eigentliche Steuerelement – der restliche Inhalt innerhalb von <details> ist das, was ein- oder ausgeblendet wird. Wenn Sie <summary> weglassen, stellt der Browser eine Standardbeschriftung wie „Details" bereit.

Warum <details> verwenden

Der große Vorteil von <details> ist, dass es ein vollständig funktionierendes Ein-/Ausblende-Widget ohne JavaScript bereitstellt. Der Browser übernimmt das Öffnen und Schließen, die Tastaturunterstützung und die Barrierefreiheit für Sie.

Typische Anwendungsfälle:

FAQ-Listen — jede Frage ist ein <summary>, und die Antwort wird beim Klicken angezeigt.
Progressive Offenlegung — verstecken Sie erweiterte Einstellungen, langen Rechtstext oder „Weiterlesen"-Abschnitte, damit die Seite übersichtlich bleibt.
Accordion-Fallback ohne JavaScript — da es ohne Skripting funktioniert, ist <details> eine robuste Grundlage für Accordions. Selbst wenn Ihr JavaScript nicht geladen wird, ist der Inhalt noch erreichbar.

Im Vergleich zu einem manuell erstellten JavaScript-Accordion ist <details> weniger Code, automatisch per Tastatur und Screenreader zugänglich und degradiert graceful. Greifen Sie nur dann auf ein benutzerdefiniertes JavaScript-Widget zurück, wenn Sie ein Verhalten benötigen, das das native Element nicht bieten kann (z. B. animierte Höhenübergänge über den gesamten Inhalt).

Syntax

Der <details>-Tag wird paarweise verwendet. Der Inhalt wird zwischen dem öffnenden (<details>) und dem schließenden (</details>) Tag geschrieben.

Beispiel des HTML-`<details>`-Tags:

HTML-<details>-Tag

<!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>

Probier es selbst »

Ergebnis

Das Attribut `open`

Fügen Sie das boolean-Attribut open hinzu, damit das Widget beim Laden der Seite ausgeklappt ist:

<details open>
  <summary>What is HTML?</summary>
  <p>HTML is the standard markup language for documents designed to be displayed in a web browser.</p>
</details>

Das Attribut open spiegelt den aktuellen Zustand in Echtzeit wider. Wenn der Benutzer das Widget umschaltet, fügt der Browser open automatisch hinzu oder entfernt es vom Element – Sie müssen es nicht selbst verwalten. Sie können es auch selbst per Skript umschalten:

const details = document.querySelector('details');
details.open = true;   // expand
details.open = false;  // collapse

Das Lesen von details.open zeigt Ihnen, ob das Widget aktuell geöffnet ist.

Beispiel des HTML-`<details>`-Tags innerhalb eines `<form>`-Tags:

HTML-<details>-Tag

<!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>

Probier es selbst »

Attribute

Attribut	Wert	Beschreibung
open	open	Gibt an, dass die Informationen im Tag anfangs in ausgeklappter Form angezeigt werden sollen.

Der <details>-Tag unterstützt außerdem die globalen Attribute und die Ereignis-Attribute.

So gestalten Sie einen HTML-<details>-Tag

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

Gestaltung des Offenlegungs-Markers

Die meisten Browser rendern das Öffnen-/Schließen-Dreieck über das ::marker-Pseudo-Element auf dem <summary>. Um es zu ändern oder zu entfernen, setzen Sie list-style auf das summary:

/* Remove the default triangle */
summary {
  list-style: none;
}

/* Replace it with your own characters */
summary::marker {
  content: "▶ ";
}
details[open] summary::marker {
  content: "▼ ";
}

Ältere WebKit-basierte Browser (älteres Safari/Chrome) verwendeten stattdessen das nicht standardisierte Pseudo-Element summary::-webkit-details-marker. Um diese abzudecken, blenden Sie es ebenfalls aus:

summary::-webkit-details-marker {
  display: none;
}

Das `toggle`-Ereignis

Das <details>-Element löst bei jedem Öffnen oder Schließen ein toggle-Ereignis aus. Dies ist der richtige Einstiegspunkt für Lazy-Loading von Inhalten, das Senden von Analytics oder die Synchronisierung des UI-Zustands:

const details = document.querySelector('details');

details.addEventListener('toggle', () => {
  if (details.open) {
    console.log('Opened');
  } else {
    console.log('Closed');
  }
});

Das Ereignis wird ausgelöst, nachdem der Zustand bereits geändert wurde, sodass details.open den neuen Wert innerhalb des Handlers widerspiegelt.

Barrierefreiheit

Die native Kombination aus <details>/<summary> ist von Haus aus barrierefrei. Browser stellen das <summary> mit einer schaltflächenähnlichen Rolle und das <details> als group bereit, geben den ausgeklappten/eingeklappten Zustand an Screenreader weiter und machen das summary per Tastatur fokussierbar und mit Enter und Space bedienbar. Dies ist ein wesentlicher Grund, das native Element einem skriptierten Accordion vorzuziehen – Sie erhalten korrekte Semantik und Tastaturunterstützung kostenlos, ohne aria-expanded selbst verwalten zu müssen.

Gruppierung mit dem Attribut `name`

Moderne Browser (Chrome 120+ und andere aktuelle Engines) unterstützen ein name-Attribut auf <details>. Wenn mehrere <details>-Elemente denselben name teilen, verhalten sie sich als exklusive Gruppe, ähnlich einem Accordion: Das Öffnen eines Elements schließt automatisch die anderen.

<details name="faq" open>
  <summary>Question one</summary>
  <p>Answer one.</p>
</details>
<details name="faq">
  <summary>Question two</summary>
  <p>Answer two.</p>
</details>

Da dies eine neuere Funktion ist, ignorieren Browser, die name nicht unterstützen, es einfach und lassen jedes Widget unabhängig öffnen – eine sichere progressive Erweiterung.

Übung

Was trifft auf den HTML-<details>-Tag zu?

Der <details>-Tag erstellt ein Offenlegungs-Widget, das durch Klicken auf sein <summary>-Element umgeschaltet wird.Der <details>-Tag kann Schaltflächen und andere HTML-Elemente darin enthalten.Das Hinzufügen des open-Attributs macht den <details>-Inhalt standardmäßig sichtbar.Der <details>-Tag benötigt JavaScript, um geöffnet und geschlossen zu werden.

Warum <details> verwenden

Syntax

Beispiel des HTML-<details>-Tags:

Ergebnis

Das Attribut open

Beispiel des HTML-<details>-Tags innerhalb eines <form>-Tags: