Text semantisch durchstreichen

23.8.2020

Texte durchstreichen im Web ist keine alltägliche Aufgabe. Doch wenn man dazu kommt, welches Tag ist dann zu verwenden?

Es stehen drei Tags zur Auswahl: <strike>, <s> und <del>. Alle diese Tags werden von den Browsern mit dem Standardstil “durchgestrichen” ausgeliefert. Doch wie unterscheiden sich diese Tags?

<strike>

Bei diesem Tag handelt es sich um ein Tag, welches seit der Einführung von HTML5 nicht mehr benötigt wird. Es ist somit die schlechteste Variante einen Text durchzustreichen. Das Tag ist weder semantisch, noch ist es aktuell.

This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strike

<s>

Dieses Tag ist der Nachfolger von <strike>. Es streicht den Text durch, wird jedoch auch nicht von Screenreadern vorgelesen.

Es gibt jedoch die Möglichkeit mit Pseusoelementen (::before und ::after) den Anfang und das Ende einer Durchstreichung anzukündigen. Dieses Vorgehen wird dann zum Problem, wenn man die Pseudoelemente für die Darstellung verwenden möchte, oder die Seite in mehreren Sprachen ausgeliefert werden soll.

<del>

Mit diesem Tag gibt man dem Benutzer einer Seite Bescheid, dass ein Element entfernt ist. Dieses Element wird auch von Screenreadern unterstützt.

<ins> zum Ausbessern

Wenn mit der Entfernung von Text auch eine Einfügung einher geht, so sollte man das <ins> Tag verwenden. So wird klar, welche Textpassagen entfernt und durch welche diese ausgetauscht werden sollen.

Zusammenfassung

Wenn es semantisch angebracht ist, weil zum Beispiel Inhalt entfernt wird, sollte man <del> und in allen anderen Fällen <s> verwenden.

See the Pen Text durchstreichen by wesselbaum (@wesselbaum) on CodePen.

Tags