Aby uzyskać przekreślony tekst w HTML, należy użyć odpowiednich znaczników lub styli CSS. Poniżej znajdziesz szczegółowy poradnik wraz z przykładami, zastosowaniami i najlepszymi praktykami.
Podstawowe metody przekreślania tekstu w HTML
Znacznik <s>... </s> – przekreślenie wizualne
Znacznik <s> jest najprostszym sposobem przekreślenia tekstu w HTML. Służy głównie do oznaczania fragmentów, które straciły na aktualności lub zostały poprawione, ale nadal są widoczne dla użytkownika.
Przykład użycia –
<s>Ta informacja jest nieaktualna</s>Rezultat w przeglądarce:
~~Ta informacja jest nieaktualna~~.
Znacznik <del>... </del> – usunięcie semantyczne
Znacznik <del> informuje nie tylko o zmianie wizualnej (przekreśleniu), ale także o tym, że dana treść została usunięta w ramach edycji. Jest to rekomendowany wybór w dokumentach, gdzie ważne jest śledzenie zmian.
Przykład użycia –
<del>Cena 100 zł</del> Teraz tylko 75 zł!Rezultat w przeglądarce:
~~Cena 100 zł~~ Teraz tylko 75 zł!.
CSS: Własny styl przekreślenia (text-decoration)
Możesz dodać przekreślenie do dowolnego elementu za pomocą styli CSS, co daje dodatkową kontrolę nad wyglądem.
Przykład użycia (CSS w znaczniku span) –
<span style="text-decoration: line-through;">Przykład przekreślenia przez CSS</span>Efekt:
~~Przykład przekreślenia przez CSS~~
Zaawansowane możliwości – zmiana koloru linii przekreślenia
Standardowe przekreślenie ma kolor tekstu. Możesz jednak użyć CSS, aby zmienić kolor samej linii na inny niż kolor tekstu.
Przykład (przekreślenie czerwone na czarnym tekście) –
<s style="color: red;"> <span style="color: black;">To jest czarne przekreślenie czerwoną linią</span> </s>Efekt:To jest czarne przekreślenie czerwoną linią.
Porównanie znaczników <s> oraz <del>
| Znacznik | Efekt wizualny | Znaczenie semantyczne | Zalecane zastosowanie |
|---|---|---|---|
<s> |
Przekreślony tekst | Treść nieaktualna, ale widoczna | Wycofane informacje, zamiany, korekty |
<del> |
Przekreślony tekst | Treść usunięta | Zmiany w treści, śledzenie historii edycji |
Przykłady zastosowań w praktyce
- Aktualizacje cenników –
<del>Stara cena: 159 zł</del> Nowa cena: 139 zł!- Korekty błędów –
<s>Błędna odpowiedź</s> Poprawna odpowiedź- Zmiana reguł promocji –
<s>Promocja ważna do 31.03.2024</s> Promocja ważna do odwołania!- Prezentacja wersji zmian w dokumentacji lub regulaminach – użyj
<del>do oznaczania usuniętych fragmentów oraz<ins>(wstawienie) dla nowych treści.
Najlepsze praktyki
- Dobierz znacznik do kontekstu –
jeśli zmieniasz zawartość, użyj<del>lub<ins>. Jeśli tylko zaznaczasz nieaktualność – użyj<s>; - Dla zaawansowanej kontroli wyglądu stosuj CSS.;
- Zawsze dbaj o czytelność –
przekreślony tekst powinien być nadal czytelny (nie stosuj zbyt małego kontrastu).
Kompatybilność i wsparcie przeglądarek
Znaczniki <s> i <del> obsługiwane są przez wszystkie nowoczesne przeglądarki – nie wymagają dodatkowych bibliotek ani rozszerzeń.
Podsumowanie – aby wstawić przekreślony tekst w HTML, najprościej użyć znacznika <s>...</s> lub w przypadkach zmian treści <del>...</del>. Dla zaawansowanej stylizacji warto korzystać z CSS, co daje większą kontrolę nad wyglądem linii przekreślenia oraz pozwala na uzyskanie efektów nieosiągalnych przy pomocy samych znaczników.
Użycie właściwego rozwiązania zwiększa przejrzystość treści na stronie i poprawia jej czytelność.
