<s>: Das Durchstreichungselement

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Das <s> HTML-Element rendert Text mit einem Durchstrich oder einer Linie durch den Text. Verwenden Sie das <s>-Element, um Dinge darzustellen, die nicht mehr relevant oder nicht mehr korrekt sind. Jedoch ist <s> nicht geeignet, um Dokumentenänderungen anzuzeigen; dafür verwenden Sie die <del> und <ins> Elemente, wie es passend ist.

Probieren Sie es aus

<p><s>There will be a few tickets available at the box office tonight.</s></p>

<p>SOLD OUT!</p>
/* stylelint-disable-next-line block-no-empty */
s {
}

Attribute

Dieses Element enthält nur die globalen Attribute.

Zugänglichkeit

Die Präsenz des s-Elements wird von den meisten Vorlesetechnologien in ihrer Standardkonfiguration nicht angesagt. Es kann jedoch durch die Verwendung der CSS-Eigenschaft content, zusammen mit den Pseudo-Elementen ::before und ::after, angesagt werden.

css
s::before,
s::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

s::before {
  content: " [start of stricken text] ";
}

s::after {
  content: " [end of stricken text] ";
}

Einige Personen, die Bildschirmleser verwenden, deaktivieren bewusst das Ansagen von Inhalten, die zusätzliche Weitschweifigkeit erzeugen. Aus diesem Grund ist es wichtig, diese Technik nicht zu missbrauchen und sie nur in Situationen anzuwenden, in denen das Nichtwissen, dass Inhalte durchgestrichen sind, das Verständnis beeinträchtigen würde.

Beispiele

css
.sold-out {
  text-decoration: line-through;
}
html
<s>Today's Special: Salmon</s> SOLD OUT<br />
<span class="sold-out">Today's Special: Salmon</span> SOLD OUT

Ergebnis

Technische Zusammenfassung

Inhaltskategorien Phrasierungsinhalt, Flussinhalt.
Erlaubte Inhalte Phrasierungsinhalt.
Tag-Weglassung Keine, sowohl das Start- als auch das Endtag sind erforderlich.
Erlaubte Eltern Jedes Element, das Phrasierungsinhalt akzeptiert.
Implizite ARIA-Rolle deletion
Erlaubte ARIA-Rollen Beliebig
DOM-Schnittstelle [`HTMLElement`](/de/docs/Web/API/HTMLElement)

Spezifikationen

Specification
HTML
# the-s-element

Browser-Kompatibilität

Siehe auch

  • Das <strike>-Element, der Alter Ego des <s>-Elements, ist veraltet und sollte auf Webseiten nicht mehr verwendet werden.
  • Das <del>-Element sollte verwendet werden, wenn Daten gelöscht wurden.
  • Die CSS-Eigenschaft text-decoration-line sollte verwendet werden, um den früheren visuellen Aspekt des <s>-Elements zu erreichen.