W świecie tworzenia stron internetowych, gdzie semantyka HTML decyduje o czytelności i dostępności kodu, tag <s> zasługuje na szczególną uwagę. Ten prosty, ale znaczący element służy do oznaczania treści, która stała się nieaktualna lub nieistotna w kontekście. Nie myl go z czysto wizualnym przekreśleniem — <s> niesie konkretne znaczenie semantyczne.
W tym wpisie o HTML, CSS i JavaScript poznasz definicję <s>, praktyczne zastosowania, różnice względem podobnych elementów oraz dobre praktyki. Dowiesz się również, jak używać go świadomie, by poprawić SEO, dostępność i jakość kodu.
Czym dokładnie jest element <s>? Definicja i semantyka
Element <s> (ang. „strikethrough” — przekreślenie) reprezentuje zawartość, która nie jest już aktualna, trafna lub istotna w bieżącym kontekście. Przeglądarki domyślnie renderują go z przekreśleniem (CSS text-decoration: line-through), ale jego największa wartość tkwi w semantyce — sygnalizuje on użytkownikom, wyszukiwarkom i narzędziom asystującym, że dana informacja straciła ważność.
Typowe scenariusze, w których <s> sprawdza się najlepiej, to m.in.:
- stare ceny w e‑commerce podczas promocji,
- przeterminowane informacje o wydarzeniach lub terminach,
- korekty nieaktualnych komunikatów w treści widocznej dla użytkownika.
W specyfikacji HTML5 <s> należy do kategorii treści frazeologicznej (phrasing content), czyli jest elementem inline i może być używany np. w akapitach, nagłówkach czy listach. Nie wymaga atrybutów ani elementów potomnych.
Kluczowe cechy techniczne
Poniżej znajdziesz skrót najważniejszych właściwości elementu <s>:
- kontekst zewnętrzny – może występować w treści przepływu (flow), frazeologicznej (phrasing) i wyczuwalnej (palpable);
- kontekst wewnętrzny – akceptuje wyłącznie treść frazeologiczną;
- składnia – tagi otwierający i zamykający są obowiązkowe;
- CSS display – domyślnie
inline; - interfejs DOM –
HTMLElement.
W przeciwieństwie do niesemantycznych <div> lub <span>, <s> dodaje znaczenie do struktury dokumentu, wspierając ideę semantycznego HTML.
Podstawowe przykłady użycia tagu <s>
Klasyczny przykład z e‑commerce pokazujący zmianę ceny w promocji:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Przykład tagu <s></title>
</head>
<body>
<p>Nasz produkt kosztuje: <s>9,99 zł</s>. <strong>Uwaga, promocja!</strong> Nowa cena to: <b>7,99 zł</b>.</p>
</body>
</html>
Efekt wizualny — „9,99 zł” zostanie przekreślone, co jasno sygnalizuje starą cenę.
Kolejny przykład — aktualizacja stanu magazynowego:
<p><s>W lodówce stoją cztery jogurty.</s></p>
<p>W lodówce nie ma już jogurtu.</p>
W tym przypadku <s> wyraźnie wskazuje, że pierwsza informacja jest nieaktualna.
Zaawansowany przykład — lista produktów z rabatami
Na stronie sklepu z dynamicznymi cenami użyjesz <s> do oznaczania starych cen, a klas CSS do wyróżnienia nowych:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Sklep z rabatami</title>
<style>
s { color: #999; font-style: italic; }
.promocja { color: green; font-weight: bold; }
</style>
</head>
<body>
<ul>
<li>Laptop: <s>4999 zł</s> <span class="promocja">3999 zł</span></li>
<li>Smartfon: <s>2999 zł</s> <span class="promocja">2499 zł</span></li>
<li>Słuchawki: <s>499 zł</s> <span class="promocja">399 zł</span></li>
</ul>
</body>
</html>
Kod nie tylko wizualnie podkreśla promocje, ale także semantycznie oznacza stare ceny jako nieaktualne.
Różnice między <s> a podobnymi tagami: <del>, <strike> i CSS
Aby szybko porównać zastosowanie i status podobnych rozwiązań, skorzystaj z poniższej tabeli:
| Tag | Semantyka | Status w HTML5 | Domyślny styl CSS | Kiedy używać? |
|---|---|---|---|---|
<s> |
Nieaktualna lub nieistotna treść | Zalecany | text-decoration: line-through |
Promocje, korekty w treści bieżącej |
<del> |
Usunięta treść (historia edycji) | Zalecany | text-decoration: line-through |
Wersjonowanie, porównania zmian |
<strike> |
Przestarzały element | Nieobsługiwany | — | Nigdy — użyj <s> |
| Tylko CSS | Efekt wizualny bez semantyki | — | text-decoration: line-through |
Gdy chcesz wyłącznie wyglądu, bez znaczenia |
<del> służy do śledzenia modyfikacji dokumentu (np. w wiki), a <s> do treści „nieistotnych” w aktualnym kontekście.
Integracja z CSS i JavaScript — praktyczne rozszerzenia
Możesz spersonalizować wygląd przekreśleń, aby lepiej pasował do stylu marki:
s {
text-decoration: line-through;
color: #ff4444;
background-color: #ffe6e6;
padding: 2px 4px;
border-radius: 3px;
}
Jeśli chcesz dodawać przekreślenia dynamicznie (np. podczas aktywacji promocji), skorzystaj z prostego skryptu:
// Przykład: rabat po kliknięciu
function applyDiscounts() {
document.querySelectorAll('.cena-stara').forEach(el => {
el.innerHTML = '<s>' + el.textContent + '</s> ' + el.dataset.nowaCena;
});
}
<span class="cena-stara" data-nowa-cena="7,99 zł">9,99 zł</span>
<button onclick="applyDiscounts()">Aktywuj promocję</button>
Dzięki temu treść pozostaje spójna semantycznie, a interfejs — interaktywny i czytelny.
Najlepsze praktyki i pułapki
Aby używać <s> odpowiedzialnie i skutecznie, pamiętaj o poniższych zasadach:
- używaj semantycznie – tylko dla treści rzeczywiście nieaktualnych; nadużywanie obniża czytelność;
- dostępność – czytniki ekranu komunikują „przekreślone”, co wspiera użytkowników z niepełnosprawnościami;
- SEO – wyszukiwarki rozumieją
<s>i mogą ignorować przekreślone fragmenty w podglądach; - nie do samej stylizacji – gdy chcesz wyłącznie efektu wizualnego, zastosuj CSS na
<span>(semantyka > styl); - responsywność – jako element inline,
<s>dobrze skaluje się na urządzeniach mobilnych.
Świadome użycie <s> podnosi semantykę, dostępność i utrzymywalność projektu — to drobny detal o dużym wpływie na jakość frontendu.