<summary>

Das <summary>-Element ist der sichtbare, klickbare Teil eines <details>-Widgets. Es funktioniert wie ein Button: Ein Klick darauf klappt den restlichen Inhalt des <details>-Elements auf oder zu. Ohne <summary> zeigt der Browser einen generischen Text wie “Details” an. Deshalb solltest du immer ein eigenes <summary> mit aussagekräftigem Text verwenden.

Steckbrief <summary>

Kategorie: Einbettung & Widgets
Art: Interaktiv
Beispiele: 3
Browser: 5 von 5
E-Mail: 2 von 5
Stand: 04.02.2026

Grundlagen

<summary> und <details> gehören zusammen wie Frage und Antwort. Das <summary> beschreibt, was sich hinter dem Aufklapp-Bereich verbirgt, und der Nutzer entscheidet per Klick, ob er mehr sehen will. Der Browser zeigt standardmäßig ein kleines Dreieck (▶/▼) neben dem Text an, um die Interaktivität zu signalisieren.

<summary> muss das erste Kind-Element von <details> sein, nicht das zweite, dritte oder irgendwo dazwischen
Es kann Inline-Inhalte enthalten: Text, <strong>, <em>, <span>, Bilder und mehr
Der Browser rendert <summary> mit einem Disclosure-Dreieck (▶), das sich beim Öffnen dreht (▼)
<summary> verhält sich intern wie ein Button: Es ist per Tastatur fokussierbar und bedienbar
Pro <details> gibt es genau ein <summary>: Mehrere werden vom Browser ignoriert oder verursachen Probleme
Das Dreieck lässt sich per CSS über ::marker oder list-style: none anpassen oder entfernen

Syntax

index.html

Grundsyntax

<details>
  <summary>Mehr erfahren</summary>
  <p>Hier steht der versteckte Inhalt, der erst
    nach einem Klick auf die Zusammenfassung
    sichtbar wird.</p>
</details>

Beispiele

3 Beispiele

Gute Summaries beschreiben präzise, was sich dahinter verbirgt. “Mehr anzeigen” ist schlecht, “Welche Zahlungsmethoden werden akzeptiert?” ist gut.

index.html

FAQ-Bereich

<details>
  <summary>Welche Zahlungsmethoden werden
    akzeptiert?</summary>
  <p>Wir akzeptieren Kreditkarten (Visa,
    Mastercard), PayPal und SEPA-Lastschrift.</p>
</details>

<details>
  <summary>Wie lange dauert der Versand?</summary>
  <p>Innerhalb Deutschlands 2-3 Werktage,
    in die EU 5-7 Werktage.</p>
</details>

<details>
  <summary>Kann ich meine Bestellung
    stornieren?</summary>
  <p>Ja, solange die Bestellung noch nicht
    verschickt wurde.</p>
</details>

Das Standard-Dreieck passt nicht immer zum Design. Du kannst es über list-style: none entfernen und ein eigenes Icon per CSS einfügen.

index.html

Dreieck entfernen

<style>
  details summary {
    padding: 12px 16px;
    cursor: pointer;
    font-weight: bold;
    background: #4338ca;
    color: white;
    border-radius: 8px;
    /* Standard-Dreieck entfernen */
    list-style: none;
  }

  /* WebKit-Fallback */
  details summary::-webkit-details-marker {
    display: none;
  }

  /* Eigenes Icon */
  details summary::after {
    content: "▸";
    transition: transform 0.2s;
  }

  details[open] summary::after {
    transform: rotate(90deg);
  }
</style>

<details>
  <summary>Systemanforderungen</summary>
  <p>Windows 10+, macOS 12+ oder Linux.
    Mindestens 8 GB RAM.</p>
</details>

<summary> kann mehr als nur Text enthalten. Du kannst Inline-Elemente wie Icons, Badges oder formatierte Texte einbauen, solange du keine Block-Elemente verwendest.

index.html

Formatierter Inhalt

<details>
  <summary>
    <strong>Version 2.4.0</strong>
    <span class="badge">Neu</span>
  </summary>
  <ul>
    <li>Dark Mode für den Editor</li>
    <li>Performance-Verbesserungen</li>
    <li>Bugfix: Login-Problem auf Safari</li>
  </ul>
</details>

Barrierefreiheit

<summary> erhält vom Browser automatisch die ARIA-Rolle button. Das bedeutet: Screenreader kündigen es als interaktives Element an und teilen den Zustand mit (“erweitert” oder “reduziert”). Nutzer können es mit Tab fokussieren und mit Enter oder Space öffnen und schließen.

Genau deshalb solltest du kein <button> oder <a> innerhalb von <summary> verschachteln: Das wäre ein interaktives Element in einem interaktiven Element, was Screenreader verwirrt und die Tastaturnavigation durcheinanderbringt.

Achte darauf, dass der Text im <summary> den verborgenen Inhalt gut beschreibt. Blinde Nutzer können den versteckten Inhalt nicht “überfliegen” wie sehende Nutzer. Sie entscheiden allein anhand des Summary-Texts, ob sich das Aufklappen lohnt.

Häufige Fehler

4 Fehler

01 <summary> nicht als erstes Kind von <details>

Das <summary> muss das allererste Kind-Element sein. Steht es an einer anderen Position, verwenden einige Browser den Standard-Text “Details” und ignorieren dein <summary>.

02 Block-Elemente in <summary>

Ein <div> oder <p> innerhalb von <summary> ist laut HTML-Spezifikation nicht erlaubt. Überschriften (<h1> bis <h6>) sind die einzige Ausnahme: Sie sind explizit erlaubt. Trotzdem können <div> oder <p> zu Layout-Problemen und Barrierefreiheits-Fehlern führen, auch wenn manche Browser sie tolerieren. Verwende stattdessen <span> mit CSS-Styling.

03 <summary> außerhalb von <details>

Ein <summary> ohne umschließendes <details> hat keine besondere Bedeutung. Der Browser zeigt es als normalen Text an, ohne Dreieck und ohne Aufklapp-Verhalten.

04 Interaktive Elemente in <summary>

Buttons, Links oder Formularelemente innerhalb von <summary> sind problematisch. Da <summary> selbst wie ein Button wirkt, entsteht eine Verschachtelung interaktiver Elemente. Das verwirrt Screenreader und macht die Tastaturnavigation unvorhersehbar.

Browser-Kompatibilität

5 von 5

Das summary-Element wird von allen modernen Browsern vollständig unterstützt. Es funktioniert überall dort, wo auch das details-Element unterstützt wird.

Chrome

Komplett

Seit Chrome 12
Firefox

Komplett

Seit Firefox 49
Safari

Komplett

Seit Safari 6
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

2 von 5

Da summary nur innerhalb von details funktioniert und details in den meisten Email-Clients nicht unterstützt wird, hat summary in E-Mails kaum praktischen Nutzen.

Apple Mail

Komplett

Funktioniert zusammen mit details als aufklappbares Widget.
Gmail

Keine

Gmail entfernt details und summary komplett. Inhalte werden nicht oder nur als Fließtext angezeigt.
Outlook

Keine

Outlook unterstützt weder details noch summary. Inhalte immer direkt anzeigen.
Thunderbird

Komplett
Yahoo Mail

Keine

Kein Support. Verwende in E-Mails immer sichtbare Inhalte statt aufklappbarer Bereiche.

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da

<summary>

Grundlagen

Syntax

Beispiele

Barrierefreiheit

Häufige Fehler

Browser-Kompatibilität

Email-Kompatibilität

Newsletter