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.
<table> Tabelle
CSS - Display-Flex mit Tabellen
PHP - Ganzzahl (Integer) überprüfen