details & summary: native Aufklapp-Bereiche

Manche Inhalte sollen erst auf Wunsch erscheinen: eine Antwort in einer FAQ, ein Detail zur Bestellung, eine selten gebrauchte Option. Für genau diesen Fall kennt HTML ein eigenes Element-Paar – <details> und <summary>. Es liefert ein fertiges Aufklapp-Verhalten („Disclosure“) mit, ganz ohne JavaScript und ohne ARIA. Das macht es zum Musterbeispiel für den Grundgedanken von semantischem HTML: das richtige Element wählen, statt Verhalten von Hand nachzubauen.

Aufbau: zwei Elemente, eine Aufgabe

<details> umschließt den gesamten Bereich. Das erste Kind ist immer ein <summary> – die sichtbare, anklickbare Beschriftung. Alles danach ist der Inhalt, der auf- und zuklappt:

<details>
  <summary>Versand & Lieferzeit</summary>
  <p>Innerhalb Deutschlands liefern wir in zwei bis drei Werktagen.</p>
</details>

Den Rest erledigt der Browser: Das <summary> ist fokussierbar, per Enter und Leertaste bedienbar und wird Screenreadern als aufklappbarer Bereich samt Zustand („eingeblendet“/„ausgeblendet“) angekündigt. Diese Arbeit musst du dir nicht selbst machen.

Das open-Attribut

Standardmäßig ist ein <details> zugeklappt. Mit dem Attribut open startet es aufgeklappt – praktisch für den Abschnitt, den die meisten zuerst sehen sollen:

<details open>
  <summary>Worum geht es hier?</summary>
  <p>Diese Anleitung zeigt Schritt für Schritt …</p>
</details>

open ist mehr als Optik: Der Browser setzt und entfernt es selbst, sobald die Nutzerin auf- oder zuklappt. Du kannst dich also jederzeit darauf verlassen, dass der DOM den tatsächlichen Zustand widerspiegelt – etwa für den CSS-Selektor details[open] oder ein optionales Skript.

Nur eines offen: das name-Attribut

Bekommen mehrere <details> denselben name, bilden sie eine Gruppe, in der immer nur eines geöffnet ist – ein echtes Akkordeon, ganz ohne Skript:

<details name="faq">
  <summary>Wie hoch sind die Versandkosten?</summary>
  <p>Ab 50 € liefern wir kostenfrei …</p>
</details>
<details name="faq">
  <summary>Wie lange dauert die Lieferung?</summary>
  <p>In der Regel zwei bis drei Werktage …</p>
</details>

Diese Funktion ist in allen aktuellen Browsern verfügbar. In sehr alten Browsern fehlt nur die „nur eines offen“-Logik – die Bereiche lassen sich dann trotzdem einzeln auf- und zuklappen. Ein sauberes Beispiel für Progressive Enhancement: Die Funktion verbessert das Erlebnis, ohne dass etwas kaputtgeht.

Gestalten mit CSS

Das Dreieck vor dem <summary> ist ein Listenmarker. Du kannst ihn entfernen oder ersetzen und das geöffnete <details> gezielt ansprechen:

summary {
  cursor: pointer;
  list-style: none; /* entfernt das Standard-Dreieck */
}
details[open] summary {
  font-weight: 700;
}

Die Bedeutung bleibt dabei unangetastet – du änderst nur das Aussehen, nicht das Verhalten oder die Ansage.

Randnotiz – auch für Crawler ein Gewinn. Der Inhalt eines geschlossenen <details> steht ganz normal im HTML und ist damit für Suchmaschinen und KI-Crawler lesbar. Anders als bei per JavaScript nachgeladenen Aufklapp-Boxen geht hier keine Information verloren. Viele moderne Browser klappen ein <details> außerdem automatisch auf, wenn der gesuchte Text per Seitensuche (Strg+F) darin gefunden wird.

Wann <details> passt – und wann nicht

Gut geeignet ist es überall, wo ein Bereich optional sichtbar sein soll: FAQ, „Mehr anzeigen“, weiterführende Hinweise, erweiterte Einstellungen. Nicht gedacht ist es als Baustein für die Hauptnavigation – ein aufklappbares Menü folgt einem eigenen Muster (siehe Menüs & Dropdowns). Und sobald du Verhalten brauchst, das über Auf- und Zuklappen hinausgeht – eine gesteuerte Animation, „alle ausklappen“, besondere Zustände –, ist die ARIA-Variante mit <button aria-expanded> die richtige Wahl. Beides zeigt die Seite Akkordeons barrierefrei umsetzen.

Häufige Fehler

• <summary> ist nicht das erste Kind. Steht etwas anderes an erster Stelle, bricht das Verhalten – das <summary> muss direkt nach <details> kommen.
• Mehrere <summary> in einem <details>. Genau eines ist vorgesehen; alles Weitere gehört in den Inhaltsbereich.
• Eine Überschrift komplett ins <summary> packen. Ein <summary> ist bereits ein Bedienelement. Wenn du eine Überschrift brauchst, sollte sie nicht das ganze Summary umschließen – sonst gerät die Überschriften-Hierarchie durcheinander.
• <details> per ARIA „nachrüsten“. role oder aria-expanded sind überflüssig und können schaden – das Element bringt seine Semantik schon mit (siehe erste Regel von ARIA).
• Aufklappbare Navigation aus <details> bauen, wo ein Disclosure-Menü das passendere Muster wäre.

Häufige Fragen

Brauche ich für <details> JavaScript?

Nein. Auf- und Zuklappen, Tastaturbedienung und die Ansage für Screenreader sind nativ enthalten. Skript brauchst du erst, wenn du das Standardverhalten erweitern willst – dann reagierst du auf das toggle-Ereignis.

Ist <details> dasselbe wie ein Akkordeon?

Es ist die einfachste Form davon. Ein klassisches Akkordeon aus mehreren Bereichen baust du, indem du mehrere <details> untereinander stellst – mit gemeinsamem name, wenn immer nur eines offen sein soll. Mehr Kontrolle bietet die ARIA-Variante unter Akkordeons.

Kann ich das Standard-Dreieck ändern?

Ja. Es ist ein Listenmarker, den du per CSS (list-style: none am <summary>) entfernst und durch ein eigenes Symbol ersetzt. Die Semantik bleibt erhalten.

Fazit

<details> und <summary> sind das native Werkzeug für aufklappbare Inhalte: fokussierbar, tastaturbedienbar und korrekt angekündigt – ohne eine Zeile Skript. Mit open steuerst du den Startzustand, mit name baust du ein exklusives Akkordeon. Greife erst dann zur ARIA-Variante, wenn das native Element wirklich nicht ausreicht. Damit ist es ein Paradebeispiel für die Haltung hinter semantischem HTML: erst schauen, was die Plattform schon kann.