Tag <summary>

Tag <summary>

Definition

Status: Aktueller Standard

Das Tag <summary> steht für summary (Zusammenfassung).

Das HTML-Element <summary> ist ein interaktives Tag, das als sichtbare Überschrift oder Beschriftung für ein <details>-Element dient. Es bildet den klickbaren Teil eines nativen Aufklapp-Widgets (Akkordeon), mit dem zusätzliche Inhalte ein- oder ausgeblendet werden können. Das <summary>-Tag muss immer das erste Kindelement innerhalb eines <details>-Containers sein. Ohne ein explizites <summary> zeigen Browser meist einen Standardtext wie „Details“ neben einem Pfeilsymbol an.

Syntax

<summary>...</summary>

Attribute bzw. Unterelemente

Global

Globale Attribute

Beispiele

= Tag

= Attribut

= Wert

Text

= Kommentar bzw. wichtig!

Beispiel <summary>

Der Code:

<details>
  <summary>Klick mich für mehr Infos</summary>
  <p>Hier stehen die versteckten Details, die erst nach dem Klick erscheinen.</p>
</details>

Ergebnis:

Ergebnis: <summary>-Demo 1

CSS-Tipps:

Über das CSS-Property "list-style: none" (oder "::-webkit-details-marker" in älteren Safari/Chrome-Versionen) lässt sich das Symbol entfernen und über die Pseudo-Klasse "::before" ersetzen:

  
summary {
  list-style: none;
  /* Zeigt an, dass es klickbar ist */
  cursor: pointer; 
}
summary::-webkit-details-marker {
  display: none;
}
/* 2. Herz-Symbol davor setzen */
summary::before {
  content: "❤ ";
  color: #e31b23;
  margin-right: 10px;
  display: inline-block;
  transition: transform 0.3s ease;
}
/* 3. Optional: Herz drehen oder vergrößern, wenn offen */
details[open] summary::before {
  transform: scale(1.5);
}

Ergebnis:

Ergebnis: <summary>-Demo 1
Marker anpassen