Das Tag <details> enthält zusätzliche Angaben, die der Benutzer beim Wunsch eröffnen und lesen kann. Voreingestellt wird der Inhalt des Tages nicht angezeigt. Um den Inhalt anzuzeigen, muss man das Attribut open verwenden.
Das Tag <summary> erstellt eine sichtbare Überschrift und durch den Klick drauf wird zusätzliche Information angezeigt/ausgeblendet. Wenn es keine Überschrift gibt, wird der Browser die Überschrift “Mehr” voreingestellt anzeigen.
Syntax
Das Tag <details> wird gepaart verwendet. Sein Inhalt wird in den Start- (<details>) und Endtags (</details>) geschrieben.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
</head>
<body>
<details>
<summary>Klicken Sie hier, um Details zu sehen.</summary>
<p>Detaillierte Information finden Sie hier.</p>
</details>
</body>
</html>Ergebnis
Attribute
| Attribut | Wert | Beschreibung |
|---|---|---|
| open | open | Es zeigt an, dass die Information im Tag ursprünglich sichtbar sein muss. |
Das Tag <details> unterschtützt Globale Attribute und Globale Eventhandler.
Browser-Support
|
|
|
|
|---|---|---|---|
| 12+ | 49+ | 6+ | 15+ |
Übe dein Wissen
Was ist die Funktion des <body> HTML-Tags?
Richtig!
Falsch!