<s>

Treść, która przestała być aktualna, na przykład stara cena. Przeglądarka ją przekreśla.

Wyświetlanie
inline
Znacznik zamykający
Wymagany
Dozwolona zawartość
Treść frazowa (phrasing content)
Na tej stronie

Przykład

#
HTML
<p>
  Kurs React:
  <s>249 zł</s>
  <strong>149 zł</strong>
</p>
<p><s>Certyfikat w wersji papierowej</s> Certyfikat wydajemy teraz tylko w PDF.</p>
Podgląd

Definicja i zastosowanie

#

Element <s> oznacza informację, która nie jest już aktualna ani trafna: starą cenę w promocji, wyprzedany wariant produktu czy nieaktualne godziny otwarcia. Przeglądarki domyślnie wyświetlają ją przekreśloną.

Różnica względem <del> jest subtelna, ale ważna. <del> oznacza fragment usunięty z dokumentu podczas edycji, np. w historii zmian regulaminu. <s> mówi po prostu: „to było prawdą, ale już nie jest”, bez sugerowania, że ktoś poprawiał tekst.

Większość czytników ekranu domyślnie nie informuje o przekreśleniu. Użytkownik może więc usłyszeć „249 zł 149 zł” bez żadnego kontekstu. Warto dodać tekst ukryty wizualnie, np. „Cena regularna:” i „Cena promocyjna:”.

Składnia

#
Składnia
<s>nieaktualna treść</s>

Atrybuty

#

Ten element nie ma własnych atrybutów. Obsługuje atrybuty globalne, takie jak class, id czy hidden.

Domyślny CSS

#

Większość przeglądarek wyświetla ten element z takimi stylami domyślnymi:

CSS
s {
  text-decoration: line-through;
}

Obsługa przeglądarek

#

Szeroko dostępne

Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.

  • Chrome
  • Edge
  • Firefox
  • Safari

Dobre praktyki

#
  • Zmiany w treści dokumentu, np. poprawki w regulaminie, oznaczaj przez <del> i <ins>.
  • Element <strike> jest przestarzały. Zamiast niego użyj <s> albo <del>.
  • Jeśli przekreślenie niesie ważną informację, np. przy cenach, dopisz tekst ukryty wizualnie dla czytników ekranu.

Powiązane hasła

#

Widzisz błąd albo brakuje przykładu? Napisz do nas.