<s>: Das Durchgestrichen-Element

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 ihn. Verwenden Sie das <s>-Element, um Dinge darzustellen, die nicht mehr relevant oder nicht mehr korrekt sind. Allerdings ist <s> nicht geeignet, um Dokumentenänderungen zu kennzeichnen; hierfür sollten die <del> und <ins> Elemente, wie angemessen, verwendet werden.

Probieren Sie es aus

<p><s>There will be a few tickets available at the box office tonight.</s></p> <p>SOLD OUT!</p> 
s { /* Add your styles here */ }

Attribute

Dieses Element enthält nur die globalen Attribute.

Barrierefreiheit

Die Anwesenheit des s-Elements wird von den meisten Screenreader-Technologien in ihrer Standardkonfiguration nicht angekündigt. Es kann zur Ankündigung gebracht werden, indem die CSS-Eigenschaft content zusammen mit den Pseudo-Elementen ::before und ::after verwendet wird.

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 Menschen, die Screenreader verwenden, deaktivieren absichtlich die Ankündigung von Inhalten, die zusätzliche Redundanz erzeugen. Aus diesem Grund ist es wichtig, diese Technik nicht zu missbrauchen und sie nur in Situationen anzuwenden, in denen das Nichtwissen über durchgestrichene Inhalte das Verständnis erheblich 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 Phrasing-Inhalt, flussfähiger Inhalt.
Erlaubter Inhalt Phrasing-Inhalt.
Tag-Auslassung Keine, sowohl das Start- als auch das End-Tag sind obligatorisch.
Erlaubte Eltern Jedes Element, das Phrasing-Inhalt 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, das Alter Ego des <s>-Elements, ist veraltet und sollte auf Websites nicht mehr verwendet werden.
  • Das <del> Element sollte stattdessen 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.