<summary>: Das Offenlegungselement Zusammenfassung
Das <summary>
HTML-Element gibt eine Zusammenfassung, Beschriftung oder Legende für das Offenlegungselement eines <details>
-Elements an. Durch Klicken auf das <summary>
-Element wird der Status des übergeordneten <details>
-Elements umgeschaltet, sodass es geöffnet oder geschlossen wird.
Probieren Sie es aus
Attribute
Dieses Element umfasst nur die globalen Attribute.
Verwendungshinweise
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>
.
Standard-Textbezeichnung
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.
Standardstil
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 }
.
Beispiele
Unten finden Sie einige Beispiele, die die Verwendung von <summary>
zeigen. Weitere Beispiele finden Sie in der Dokumentation für das <details>
-Element.
Einfaches Beispiel
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
Zusammenfassungen als Überschriften
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.
Warnung:
Da das <summary>
-Element standardmäßig die Rolle button hat (die alle Rollen von Kindelementen entfernt), funktioniert dieses Beispiel nicht für Benutzer unterstützender Technologien wie Screenreader. Das <h4>
wird seine Rolle verlieren und daher nicht als Überschrift für diese Benutzer behandelt.
HTML in Zusammenfassungen
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
Technische Zusammenfassung
Inhaltskategorien | keine |
---|---|
Erlaubter Inhalt | Phraseninhalt, optional vermischt mit Überschrifteninhalt |
Tag-Auslassung | Keine; sowohl das Start- als auch das End-Tag sind obligatorisch. |
Erlaubte Eltern | Das <details> -Element. |
Implizite ARIA-Rolle | Keine entsprechende Rolle |
Erlaubte ARIA-Rollen | Keine role erlaubt |
DOM-Schnittstelle | [`HTMLElement`](/de/docs/Web/API/HTMLElement) |
Spezifikationen
Specification |
---|
HTML Standard # the-summary-element |
Browser-Kompatibilität
BCD tables only load in the browser