X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

HTML-Tag <details>

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+


Finden Sie das nützlich?

Ähnliche Artikel