HTML - Element: <summary> - Offenlegungs-Vorrichtung
Der <summary>-Tag (HTML 5) (summary = Zusammenfassung) definiert eine sichtbare Überschrift für den <details>-Tag. Die Überschrift kann angeklickt werden, um Details anzuzeigen oder auszublenden.
<!DOCTYPE html> <html> <head> <title>Details anzeigen oder ausblenden</title> </head> <body> <h1>Details anzeigen oder ausblenden</h1> <details> <summary>Das Blindtextchen</summary> <p>Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans.</p> </details> </body> </html>
Attribute
Mit dem Attribut open wird die Zusammenfassung geöffnet angezeigt:
<details open> <summary>Das Blindtextchen</summary> <p>Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans.</p> </details>
Element mit CSS anpassen
<style>
summary.beispiel::marker {
color: Red;
font-size: 1.5em;
}
</style>
<details>
<summary class="beispiel">Fruits</summary>
<p>Peaches</p>
<p>Apples</p>
<p>Plums</p>
</details>
Fruits
Peaches
Apples
Plums
Bausteine Alle Anzeigen
Eine zufällige Auswahl von Codeschnipseln
aus den Bereichen HTML, CSS,
PHP, JavaScript und MySQL.
<header> Kopfbereich
CSS - Wertigkeiten verändern mit der !important-Regel
PHP - Verbindungsfehler zur Datenbank anzeigen