Poznaj Programowanie

Tagi HTML: strike

Piotr Grochal 5 min. czytania

Tag <strike> to element HTML służący do wyświetlania tekstu z poziomą kreską przecinającą litery, co wizualnie oznacza przekreślenie.

Jest to znacznik zdeprecjonowany i niezalecany w nowych projektach.

Historia i specyfikacja tagu <strike>

Tag <strike> pojawił się w starszych wersjach HTML (np. HTML 4.01) i jako element liniowy (inline) modyfikował wygląd fragmentu tekstu bez przerywania jego przepływu.

  • znacznik otwierający i zamykający – wymagane: <strike> i </strike>;
  • charakter – liniowy; może występować wewnątrz p, div, h1–h6, li i innych elementów blokowych i liniowych;
  • może zawierać – inne elementy inline, np. em, strong, a, img, span.

Przykład z dawnych implementacji:

<p>Przykładowy tekst, na którym <strike>testowane są elementy</strike> modyfikujące jego wygląd.</p>

Wynik: Przykładowy tekst, na którym ~~testowane są elementy~~ modyfikujące jego wygląd.

Od HTML5 znacznik został usunięty ze standardu (przestarzały/obsolete). Przeglądarki wciąż go renderują dla kompatybilności wstecznej, ale jego użycie może przestać działać w przyszłości.

Dlaczego <strike> jest zdeprecjonowany?

Główny powód to brak znaczenia semantycznego. HTML ewoluował w kierunku separacji treści od prezentacji – znaczniki powinny opisywać sens, a nie styl. <strike> jest czysto wizualny i nie informuje, dlaczego tekst jest przekreślony (np. czy jest usunięty, czy tylko nieaktualny). W HTML 4 dostępne były globalne atrybuty (np. class, id, style, title, dir, lang) oraz zdarzenia (np. onclick, onmouseover), jednak już wtedy zalecano ostrożność, bo to wciąż formatowanie wizualne.

Nowoczesne alternatywy dla <strike>

Zamiast <strike> używaj semantycznych elementów lub CSS – to lepsze dla dostępności, SEO i utrzymania kodu:

Tag/właściwość Opis Kiedy używać Przykład
<del> Oznacza usunięty tekst (np. w historii zmian); semantycznie poprawne dla edycji. Śledzenie redakcji, korekty. <p>To jest <del>stary</del> <ins>nowy</ins> tekst.</p> → To jest ~~stary~~ nowy tekst.
<s> Przekreśla nieaktualny lub nieistotny tekst (np. stara cena). Promocje, oznaczanie informacji jako nieaktualnych. <s>Dzisiejsza specjalność: łosoś</s> WYPRZEDANO → ~~Dzisiejsza specjalność: łosoś~~ WYPRZEDANO.
text-decoration: line-through Właściwość CSS dla czysto wizualnego przekreślenia, bez semantyki. Gdy chodzi wyłącznie o styl, a nie o znaczenie. p { text-decoration: line-through; } lub text-decoration: line-through underline red;

<del> i <s> dają ten sam efekt wizualny co <strike>, ale niosą dodatkową informację o sensie zmiany. Dla pełnej edycji łącz je z <ins> (wstawiony tekst).

Praktyczne przykłady użycia alternatyw

1. Promocja cenowa (użyj <s>)

Minimalny przykład z aktualną i starą ceną:

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Promocja</title>
</head>
<body>
<p>Obecna cena: <s>100 zł</s> 80 zł</p>
</body>
</html>

Wynik: Obecna cena: ~~100 zł~~ 80 zł.

2. Edycja tekstu z <del> i <ins>

Oznacz fragment jako usunięty i dodaj nową treść:

<p>Oryginał: To jest <del>stara wersja</del> <ins>nowa, poprawiona wersja</ins>.</p>

Wynik: Oryginał: To jest ~~stara wersja~~ nowa, poprawiona wersja.

3. CSS dla zaawansowanego przekreślenia

Ustal styl przekreślenia za pomocą CSS (fala, kolor, łączenie dekoracji):

.promocja {
text-decoration: line-through wavy red;
}
.styl-zlozony {
text-decoration: line-through underline blue;
}

Przykładowe użycie w HTML:

<p class="promocja">Stara cena: 150 zł</p>
<p>Nowa: 120 zł</p>

Efekt: przekreślenie z falistą, czerwoną linią lub kombinacja z podkreśleniem.

4. JavaScript do dynamicznego przekreślenia

Dodaj interaktywność – po kliknięciu tekst zostanie przekreślony:

<p id="cena">Cena: 100 zł</p>
<button onclick="przekresl()">Wyprzedane</button>
<script>
function przekresl() {
document.getElementById('cena').style.textDecoration = 'line-through';
}
</script>

Atrybuty i kompatybilność

W starszym HTML <strike> obsługiwał globalne atrybuty, takie jak id, class, style, title, a także zdarzenia (np. onclick, onmouseover). Dziś te mechanizmy stosuj z <s> lub <del>, wspierając się CSS/JS – to rozwiązanie semantyczne i przyszłościowe.

Kompatybilność przeglądarek (obsługiwane dla wstecznej zgodności, ale niezalecane do użycia):

Przeglądarka Wsparcie
Chrome Tak (od 2008)
Firefox Tak (od 2004)
Edge/Opera/Safari Pełne wsparcie, z ostrzeżeniami

Najlepsze praktyki w HTML/CSS/JS

  • unikaj <strike> – w nowym kodzie zastąp go <del>, <s> lub CSS (text-decoration: line-through);
  • stawiaj na semantykę – znaczniki opisują znaczenie, a wygląd kontroluj przez CSS;
  • dostępność – semantyczne znaczniki ułatwiają interpretację treści przez czytniki ekranu;
  • testy i responsywność – sprawdzaj efekt przekreślenia w różnych przeglądarkach i na różnych urządzeniach;
  • migracja starych stron – automatycznie wyszukaj <strike> i zamień na <s>, <del> lub odpowiedni CSS;
  • integracja z frameworkami – w React/Vue/Svelte stosuj klasy i stany do dynamicznych promocji i edycji.

Podsumowując kluczowe różnice

Aspekt <strike> (stare) Nowoczesne
Status Zdeprecjonowany <del>, <s>, CSS
Semantyka Brak Tak (usunięty/nieaktualny)
Elastyczność Ograniczona Pełna z CSS/JS