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>

Tipps

• Pfeil-Symbol mit CSS anpassen:

Fruits

Peaches

Apples

Plums

<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>

• Pfeil-Symbol als Bild ändern:

Fruitcake tiramisu sesame Fruitcake tiramisu sesame snaps toffee apple pie pastry caramels brownie.
Tiramisu icing topping Tiramisu icing topping ice cream cupcake toffee fruitcake marzipan. 
<style>
details.detail>summary:first-of-type {
 display: list-item;
 counter-increment: list-item 0;
 list-style: inside disclosure-closed;
 list-style-position: inside;
 list-style-image: url("bild.gif");
}
</style>

<details class="detail">
<summary>Fruitcake tiramisu sesame</summary>
Fruitcake tiramisu sesame snaps toffee apple pie pastry caramels brownie.
</details>

<details class="detail">
<summary>Tiramisu icing topping</summary>
Tiramisu icing topping ice cream cupcake toffee fruitcake marzipan.
</details>
Fruitcake tiramisu sesame Fruitcake tiramisu sesame snaps toffee apple pie pastry caramels brownie.
Tiramisu icing topping Tiramisu icing topping ice cream cupcake toffee fruitcake marzipan. 
<style>
details.detail2>summary:first-of-type {
 display: list-item;
 counter-increment: list-item 0;
 list-style: inside disclosure-closed;
 list-style-position: inside;
 list-style-type: "\1F44D";
}
</style>

<details class="detail2">
<summary>Fruitcake tiramisu sesame</summary>
Fruitcake tiramisu sesame snaps toffee apple pie pastry caramels brownie.
</details>

<details class="detail2">
<summary>Tiramisu icing topping</summary>
Tiramisu icing topping ice cream cupcake toffee fruitcake marzipan.
</details>

• Mit der Angabe: summary {width: fit-content;} in CSS, ist nur der Bereich um den Text anklickbar.

• JavaScript - HTML-Details automatisch schließen

Bausteine  Alle Anzeigen

Eine zufällige Auswahl von Codeschnipseln aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<meta> Meta-Angaben

CSS - Wertigkeiten verändern mit der !important-Regel

PHP - Dateigröße ermitteln und Maßeinheit anzeigen

JavaScript - Ein farbig blinkender Text

MySQL - Daten aus zwei DB-Tabellen auslesen

Grafiken mit Größenangabe
Um lange Wartezeiten beim Aufbau einer HTML-Seite zu vermeiden muss man die Größe einer vorhandenen Grafik mitangeben. Durch diese Angabe kann der Browser für die Grafik den Platz reservieren und kann den Rest der Seite laden, ohne auf das Downloaden der kompletten Grafik zu warten.
<img src="bild.gif" height="Höhe des Bildes in Pixeln" width="Breite des Bildes">
Verwenden Sie niemals die Attribute WIDTH und HEIGHT, um die Größe einer Grafik in HTML zu ändern. Wenn andere Größen benötigt werden, dann erstellen Sie dafür eine kleinere beziehungsweise größere Version der Grafik.