<summary>

Zuletzt aktualisiert am 4. Februar 2026

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.

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

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

Beispiele

FAQ mit aussagekräftigen Summaries

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

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

Custom-Styling: Dreieck entfernen

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

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

Formatierter Inhalt im Summary

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

<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

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

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.

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

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

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

Email-Kompatibilität

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.

Verwandte Elemente