Jak zrobić przekreślony tekst w HTML?

Aby przekreślić tekst w HTML, najczęściej używa się znacznika <s> lub <del>. Oprócz tego można osiągnąć ten efekt poprzez CSS. Poniżej znajdziesz szczegółowy poradnik z przykładami i praktycznymi zastosowaniami.

Przekreślenie tekstu w html – metody

Znacznik <s>

Znakomicie nadaje się do przekreślania fragmentu tekstu, który jest nieaktualny, zmieniony lub utracił znaczenie, lecz nie jest to korekta dokumentu.

<p>To jest <s>stara cena</s> nowa cena!</p>

Efekt:
To jest ~~stara cena~~ nowa cena!

• Zastosowanie – najczęściej do oznaczania tekstu już nieaktualnego (np. stare ceny, nieaktualne hasła, usunięte bonusy);

Znacznik <del>

Ten znacznik stosujemy, gdy chcemy pokazać usunięcie fragmentu tekstu – wyraźnie sygnalizuje usunięcie treści w kontekście historii edycji dokumentu.

<p>Regulamin: <del>Punkt 4.1 jest nieaktualny</del></p>

Efekt:
Regulamin: ~~Punkt 4.1 jest nieaktualny~~

• Zastosowanie – najczęściej w dokumentach, wersjonowaniu treści oraz artykułach poddawanych korekcie.

Różnice –

• <s> – ogólne przekreślenie (nieaktualność),
• <del> – przekreślenie związane z usunięciem treści (historia zmian).

CSS: text-decoration: line-through

Jeśli potrzebujesz przekreślić tekst o określonej klasie, możesz użyć CSS.

<p class="przekresl">Ten tekst jest przekreślony poprzez CSS.</p>

.przekresl { text-decoration: line-through; }

• Zastosowanie – pełna kontrola nad stylem i możliwością stosowania efektu do wielu elementów jednocześnie.

Praktyczne zastosowania przekreślonego tekstu

• Sklepy internetowe – prezentowanie przecenionych produktów (stara cena przekreślona, nowa wyróżniona);

Cena: <s>199 zł</s> 139 zł!

• Aktualizacje regulaminów lub dokumentów – wskazanie usuniętych, zaktualizowanych zapisów;

<del>Poprzedni zapis regulaminu</del>

• Blogi i artykuły – podkreślenie zmian lub korekty treści bez ukrywania pierwotnych informacji;

Kiedyś uważałem, że <s>HTML jest trudny</s> – teraz to czysta przyjemność!

• Prezentacje ofert czy promocji – szybkie wizualne pokazanie zakończonych, nieaktualnych propozycji.

Kompatybilność przeglądarek

Znaczniki <s> i <del>, jak również styl CSS text-decoration: line-through, są obsługiwane przez wszystkie główne przeglądarki.

Podsumowanie

• Aby przekreślić tekst w HTML, użyj znacznika <s>, <del> lub właściwości CSS text-decoration: line-through;
• Wybierz odpowiedni znacznik w zależności od kontekstu prezentowanej treści;
• Efekt przekreślenia wykorzystywany jest w e-commerce, aktualizacjach dokumentów, korektach artykułów i wielu innych sytuacjach.