HTML `<summary>`-Tag

Das <summary>-Tag wird verwendet, um den sichtbaren Header für das <details>-Element zu definieren. Durch einen Klick auf den Header kann der Benutzer die Informationen anzeigen oder ausblenden.

Das <summary>-Element sollte immer das erste Element innerhalb eines <details>-Tags sein. Wenn Sie auf die Zusammenfassung klicken, wird das übergeordnete <details>-Element geöffnet oder geschlossen. Anschließend wird das toggle-Ereignis an <details> gesendet, das verwendet werden kann, um Sie über den Zustandwechsel zu informieren. Sie können dieses Ereignis mit JavaScript abhören:

document.querySelector('details').addEventListener('toggle', (e) => {
  console.log('Details is now', e.target.open ? 'open' : 'closed');
});

Wenn das erste Kind des <details>-Elements kein <summary>-Element ist, wird eine Standardzeichenfolge als Beschriftung der Aufklappbox verwendet.

Der Standardstil für <summary>-Tags enthält die CSS display-Eigenschaft mit dem Wert „list-item“, der es ermöglicht, das Symbol zu ändern, das als Aufklapp-Widget angezeigt wird. Wenn Sie das Aufklapp-Dreieck entfernen möchten, können Sie display: block verwenden.

Das <summary>-Tag ist eines der HTML5-Elemente.

Syntax

Das <summary>-Tag kommt in Paaren vor. Der Inhalt wird zwischen dem öffnenden (<summary>) und dem schließenden (</summary>) Tag geschrieben.

Beispiel für das HTML `<summary>`-Tag:

HTML <summary>-Tag

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <details>
      <summary>Copyright 2013-2014.</summary>
      <p>W3docs. All rights reserved.</p>
      <p>The content of the website is the property of W3Docs.com.</p>
    </details>
  </body>
</html>

Try it Yourself »

Ergebnis

Beispiel für summary

Attribute

Das <summary>-Tag unterstützt Globale Attribute und die Ereignisattribute.

So stylen Sie ein HTML <summary>-Tag

css

summary {
  color: blue;
  list-style: none; /* Hides the disclosure triangle */
}

Praxis

Was ist der Zweck des <summary>-Tags in HTML?

Es wird verwendet, um eine Zusammenfassung zu erstellen, die nur angezeigt wird, wenn das <details>-Element geschlossen ist.Es bietet visuelle Unterstützung für die Website-Navigation.Es wird verwendet, um Metainformationen innerhalb der Webseite anzugeben.Es wird in Verbindung mit dem <details>-Tag verwendet, um den Inhalt auf Wunsch des Benutzers ein- oder ausklappen zu können.

HTML <summary>-Tag ​

Syntax ​

Beispiel für das HTML <summary>-Tag: ​

Ergebnis ​