<summary>: Das Offenlegungselement Zusammenfassung

Dieses Element umfasst nur die globalen Attribute.

Der Inhalt des <summary>-Elements kann jeglichen Überschrifteninhalt, einfachen Text oder HTML enthalten, das innerhalb eines Absatzes verwendet werden kann.

Ein <summary>-Element darf nur als erstes Kind eines <details>-Elements verwendet werden. Wenn der Benutzer auf die Zusammenfassung klickt, wird das übergeordnete <details>-Element geöffnet oder geschlossen, und ein toggle-Ereignis wird an das <details>-Element gesendet, das verwendet werden kann, um zu wissen, wann diese Statusänderung eintritt.

Der Inhalt der <details> bietet die zugängliche Beschreibung für die <summary>.

Wenn das erste Kind eines <details>-Elements kein <summary>-Element ist, wird der User-Agent einen Standardstring (typischerweise "Details") als Bezeichnung für das Offenlegungselement verwenden.

Laut der HTML-Spezifikation umfasst der Standardstil für <summary>-Elemente display: list-item. Dadurch wird es möglich, das neben der Bezeichnung angezeigte Symbol des Offenlegungs-Widgets zu ändern oder zu entfernen, das standardmäßig ein Dreieck ist.

Sie können den Stil auch auf display: block ändern, um das Offenlegungsdreieck zu entfernen.

Details dazu finden Sie im Abschnitt Browser-Kompatibilität, da nicht alle Browser die volle Funktionalität dieses Elements unterstützen.

Für Webkit-basierte Browser, wie Safari, ist es möglich, die Anzeige des Symbols über das nicht standardisierte CSS-Pseudo-Element ::-webkit-details-marker zu steuern. Um das Offenlegungsdreieck zu entfernen, verwenden Sie summary::-webkit-details-marker { display: none }.

Unten finden Sie einige Beispiele, die die Verwendung von <summary> zeigen. Weitere Beispiele finden Sie in der Dokumentation für das <details>-Element.

Ein einfaches Beispiel für die Verwendung von <summary> in einem <details>-Element:

<details open>
  <summary>Overview</summary>
  <ol>
    <li>Cash on hand: $500.00</li>
    <li>Current invoice: $75.30</li>
    <li>Due date: 5/6/19</li>
  </ol>
</details>

Ergebnis

Sie können die Überschriftenelemente in <summary> verwenden, wie folgt:

<details open>
  <summary><h4>Overview</h4></summary>
  <ol>
    <li>Cash on hand: $500.00</li>
    <li>Current invoice: $75.30</li>
    <li>Due date: 5/6/19</li>
  </ol>
</details>

Ergebnis

Dies hat derzeit einige Abstandsprobleme, die mithilfe von CSS behoben werden könnten.

Dieses Beispiel fügt dem <summary>-Element einige Semantiken hinzu, um die Bezeichnung als wichtig anzuzeigen:

<details open>
  <summary><strong>Overview</strong></summary>
  <ol>
    <li>Cash on hand: $500.00</li>
    <li>Current invoice: $75.30</li>
    <li>Due date: 5/6/19</li>
  </ol>
</details>

Ergebnis

• <details>