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>

Beispiel anzeigen

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

JavaScript - Iframe-Inhalt zeitlich steuern

MySQL - Text automatisch nach Zeichenanzahl kürzen