HTML <summary> Tag

Das <summary>-Tag definiert die klickbare Beschriftung — das sichtbare Label — für ein <details>-Disclosure-Widget. Ein Klick auf die Zusammenfassung klappt den restlichen Inhalt des <details>-Elements auf oder zu, sodass die Zusammenfassung immer sichtbar bleibt, egal ob das Widget geöffnet oder geschlossen ist.

Das <summary>-Element muss das erste Kind eines <details>-Elements sein. Fehlt ein <summary> innerhalb von <details>, liefert der Browser eine Standardbeschriftung (meistens das Wort „Details"), was selten gewünscht ist — daher sollte nahezu jedes Disclosure-Widget eines enthalten.

Diese Seite behandelt die Syntax von <summary>, sein Verhalten, seine Barrierefreiheitseigenschaften, das toggle-Event und das Styling (einschließlich der Entfernung des Aufklappdreiecks).

Syntax

Das <summary>-Tag wird paarweise verwendet. Der Beschriftungstext steht zwischen dem öffnenden <summary>- und dem schließenden </summary>-Tag, direkt innerhalb von <details>.

Beispiel des HTML `<summary>`-Tags

HTML <summary>-Tag

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

Probier es selbst »

Umfangreicher Inhalt innerhalb von `<summary>`

Eine Zusammenfassung ist nicht auf reinen Text beschränkt. Sie kann Inline-Inhalte wie <strong>, <em>, <code> oder ein Symbol enthalten, was sich gut eignet, um die Beschriftung hervorzuheben:

<details>
  <summary><strong>Shipping & returns</strong> — read before ordering</summary>
  <p>Orders ship within 2 business days. Returns accepted for 30 days.</p>
</details>

Halten Sie die Zusammenfassung kurz und aussagekräftig: Sie ist das Label, das ein Benutzer liest (und ein Screenreader vorliest), um zu entscheiden, ob er das Widget öffnen möchte.

Barrierefreiheit

Das <summary>-Element stellt assistiver Technologie eine implizite ARIA-button-Rolle zur Verfügung und ist standardmäßig fokussierbar sowie per Tastatur bedienbar:

Tab bewegt den Fokus zur Zusammenfassung.
Enter oder Space schaltet das übergeordnete <details>-Element auf oder zu.

Deshalb sollten Sie keinen echten <button> oder Link innerhalb der Zusammenfassung verschachteln — die Zusammenfassung ist bereits das Steuerelement. Stellen Sie sicher, dass die Zusammenfassung ein klares, beschreibendes Label enthält, damit Benutzer, die per Tab oder Screenreader navigieren, wissen, was das Widget enthüllt.

Das `toggle`-Event und `details.open`

Der geöffnete/geschlossene Zustand eines Disclosure-Widgets liegt am <details>-Element, nicht an der Zusammenfassung. Das boolean-Attribut open spiegelt diesen Zustand wider, und Sie können ihn in JavaScript als details.open lesen oder setzen.

Immer wenn sich der Zustand ändert — durch Klick, Tastatur oder Skript — löst der Browser ein toggle-Event am <details>-Element aus. Durch Abhören dieses Events können Sie auf das Öffnen oder Schließen des Widgets reagieren (zum Beispiel um Inhalte lazy zu laden oder Analysedaten zu senden), anstatt den Zustand abzufragen:

const details = document.querySelector('details');

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

Styling des `<summary>`-Tags

Der Standardstil für ein <summary> verwendet die CSS-Eigenschaft display mit dem Wert list-item, was das Aufklappdreieck (den Marker) neben der Beschriftung erzeugt.

Sie können die Zusammenfassung wie jedes andere Element gestalten — Farbe ändern, Innenabstand hinzufügen oder einen cursor setzen:

summary {
  color: blue;
  cursor: pointer;
  padding: 8px;
}

Entfernen des Aufklappdreiecks

Um das Standarddreieck browserübergreifend zuverlässig auszublenden, entfernen Sie den Listenmarker und löschen zusätzlich den veralteten WebKit/Blink-Marker:

summary {
  list-style: none; /* Firefox and standards-based browsers */
}

summary::-webkit-details-marker {
  display: none; /* Safari and older Chrome */
}

Attribute

Das <summary>-Tag hat keine eigenen erforderlichen Attribute. Es unterstützt die Globalen Attribute und die Event-Attribute.

Erstellen einer FAQ / eines Akkordeons

Da jedes <details>-Element unabhängig funktioniert, können Sie mehrere auf einer Seite platzieren, um eine FAQ oder ein Akkordeon zu erstellen. Jedes <summary> ist die Frage, und der versteckte Inhalt ist die Antwort:

<details>
  <summary>How do I track my order?</summary>
  <p>Use the tracking link in your confirmation email.</p>
</details>

<details>
  <summary>Can I change my shipping address?</summary>
  <p>Yes, as long as the order has not yet shipped.</p>
</details>

<details>
  <summary>Do you ship internationally?</summary>
  <p>We ship to most countries. Rates are shown at checkout.</p>
</details>

Um jeweils nur einen Abschnitt geöffnet zu lassen (ein echtes Akkordeon), geben Sie den <details>-Elementen das gleiche name-Attribut, damit der Browser sie gegenseitig ausschließt.

Das <summary>-Tag ist eines der HTML5-Elemente. Siehe auch das <details>-Element, das es beschriftet.

Übungen

Übung

Welche Aussage über das HTML summary-Tag ist korrekt?

Es definiert das immer sichtbare, klickbare Label für ein Details-Disclosure-Widget und muss dessen erstes Kind sein.Es wird im Browser nur angezeigt, während das Details-Element geschlossen ist.Es bietet visuelle Unterstützung für die Website-Navigation.Es wird verwendet, um Meta-Informationen innerhalb der Webseite anzugeben.