Jak przekreślić tekst w HTML? <del>, <s>, CSS co wybrać?

Nauczenie się, jak przekreślać tekst w HTML, to podstawowa umiejętność każdego webmastera. Ten artykuł dostarczy Ci konkretnych instrukcji i gotowych fragmentów kodu, które pozwolą Ci efektywnie oznaczać nieaktualne informacje lub usunięte treści, zarówno za pomocą tagów HTML, jak i stylów CSS. Zrozumienie różnic między tymi metodami pomoże Ci wybrać najlepsze rozwiązanie dla Twojego projektu.

Po co przekreślać tekst na stronach internetowych?

Wizualne wyróżnienie, które niesie konkretne znaczenie

Przekreślenie tekstu na stronie internetowej to znacznie więcej niż tylko zabieg estetyczny. To potężny wizualny sygnał, który natychmiast informuje użytkownika o zmianie, nieaktualności lub usunięciu danej treści. Kiedy widzę przekreślony tekst, od razu wiem, że informacja, którą czytam, ma już inny status. Może to oznaczać, że coś zostało zmienione, poprawione, lub po prostu przestało być ważne, ale z jakiegoś powodu nadal jest widoczne. To właśnie ta zdolność do przekazywania konkretnego znaczenia sprawia, że przekreślenie jest tak cennym narzędziem w webmasteringu.

Od promocji cenowych po oznaczanie zmian w dokumencie

Zastosowania przekreślonego tekstu są niezwykle różnorodne i praktyczne. Najczęściej spotykamy je w sklepach internetowych, gdzie służy do oznaczania starych cen w ofertach promocyjnych. Widząc produkt z przekreśloną ceną 199 zł i nową ceną 99 zł, użytkownik od razu dostrzega okazję i wartość promocji. Poza e-commerce, przekreślenie jest nieocenione w systemach zarządzania treścią czy narzędziach do porównywania wersji dokumentów. Pozwala ono w czytelny sposób wskazać, które fragmenty tekstu zostały usunięte z edytowanego dokumentu, co jest kluczowe np. w procesach recenzji czy zmian prawnych. Dzięki temu użytkownicy mogą śledzić ewolucję treści i rozumieć kontekst wprowadzonych modyfikacji.

Przekreślenie w HTML: poznaj kluczowe tagi

W HTML mamy do dyspozycji kilka tagów, które pozwalają na przekreślenie tekstu. Kluczowe jest zrozumienie ich semantycznego znaczenia, aby używać ich prawidłowo i zgodnie z przeznaczeniem.

Tag : Kiedy informacja przestaje być aktualna?

Tag (od "strikethrough") służy do oznaczania treści, która nie jest już trafna, dokładna lub aktualna, ale powinna pozostać widoczna dla użytkownika. Jest to idealne rozwiązanie, gdy chcemy pokazać, że dana informacja straciła ważność, ale jej obecność jest istotna dla kontekstu na przykład, aby pokazać, co było wcześniej. Typowym przykładem jest stara cena produktu, która jest wyświetlana obok nowej, aktualnej ceny. Dzięki temu użytkownik widzi, jaka była pierwotna wartość i jak duża jest obniżka. Pamiętajmy, że tag ten nie oznacza usunięcia treści, a jedynie jej nieaktualność.

Stara cena: 199 zł Nowa cena: 99 zł

Tag : Jak semantycznie oznaczyć usuniętą treść?

Tag (od "deleted text") ma znacznie silniejsze znaczenie semantyczne. Jego głównym celem jest oznaczanie treści, która została usunięta z dokumentu. Choć wizualnie przeglądarki renderują go tak samo jak (przekreślony tekst), to dla czytników ekranu, robotów wyszukiwarek i innych narzędzi parsowania ma on zupełnie inne znaczenie. Informuje, że dany fragment tekstu nie jest już częścią dokumentu, ale jest wyświetlany w celach informacyjnych, np. w systemach śledzenia zmian. Użycie jest kluczowe dla zachowania spójności i poprawności semantycznej, zwłaszcza w dokumentach, gdzie historia zmian jest istotna.

Oryginalny tekst: Ten produkt jest dostępny w magazynie.

Czego już nie używać? Słowo o przestarzałym tagu

Warto wspomnieć o tagu . Jest to tag przestarzały (deprecated) w HTML5 i nie powinien być używany w nowoczesnym kodzie. Jego funkcja była czysto prezentacyjna, co jest sprzeczne z filozofią HTML5, która dąży do oddzielenia struktury dokumentu od jego prezentacji. Zamiast , zawsze należy używać semantycznie odpowiednich tagów lub , bądź stylów CSS, jeśli przekreślenie ma charakter wyłącznie wizualny.

czy ? Semantyka ma znaczenie

Różnica między a może wydawać się subtelna, ponieważ wizualnie dają ten sam efekt. Jednak ich semantyczne znaczenie jest kluczowe i ma realne konsekwencje dla dostępności i SEO.

Praktyczny przykład: Stara i nowa cena produktu

W kontekście e-commerce, gdzie często prezentujemy obniżki cen, tag jest moim zdaniem najlepszym wyborem. Przekreślona cena informuje użytkownika, że ta wartość jest już nieaktualna, ale nadal jest widoczna, aby mógł porównać ją z nową, niższą ceną. Nie oznacza to, że cena została usunięta z historii produktu, lecz że straciła swoją ważność jako bieżąca oferta. To bardzo czytelny i intuicyjny sposób na podkreślenie promocji.

Cena regularna: 199 zł Cena promocyjna: 99 zł

Praktyczny przykład: Edycja i oznaczanie zmian w artykule

Kiedy pracujemy nad dokumentami, artykułami czy regulaminami, gdzie śledzenie zmian jest ważne, tag staje się niezastąpiony. Wyobraź sobie, że edytujesz artykuł i usuwasz pewien fragment tekstu. Zamiast go po prostu wymazać, możesz oznaczyć go jako usunięty za pomocą . Dzięki temu czytelnicy, zwłaszcza w systemach zarządzania treścią z historią wersji, mogą zobaczyć, co dokładnie zostało usunięte z pierwotnej treści. Jest to niezwykle przydatne w kontekście prawnym, naukowym czy redakcyjnym.

Zgodnie z nowymi wytycznymi, wszystkie poprzednie regulacje są nieważne obowiązują nowe zasady.

Jak roboty Google i czytniki ekranu widzą te różnice?

Różnice semantyczne mają ogromne znaczenie dla robotów wyszukiwarek (SEO) i dla czytników ekranu, które są używane przez osoby z niepełnosprawnościami wzroku. Roboty Google analizują semantykę, aby lepiej zrozumieć kontekst treści. Tekst oznaczony jako jest traktowany jako usunięty, co może wpływać na sposób indeksowania i interpretowania informacji. Z kolei dla czytników ekranu, ta różnica jest jeszcze bardziej krytyczna. Czytniki te zazwyczaj ogłaszają tekst oznaczony jako "usunięty", co daje użytkownikowi dodatkowy kontekst i pozwala zrozumieć, że dany fragment nie jest już częścią aktywnej treści. W przypadku , czytnik może po prostu przeczytać tekst, ale bez dodatkowego komunikatu o jego nieaktualności, chyba że zostanie to jasno określone w treści.

Przekreślanie tekstu za pomocą CSS

Poznaj właściwość text-decoration: line-through

Jeśli przekreślenie tekstu ma być jedynie efektem wizualnym, bez nadawania mu dodatkowego znaczenia semantycznego, to najlepszym i najbardziej nowoczesnym sposobem jest użycie właściwości CSS text-decoration: line-through;. Ta właściwość pozwala na dodanie linii przechodzącej przez tekst, dokładnie tak, jak robią to tagi HTML, ale wyłącznie na poziomie stylizacji. Jest to zgodne z zasadą oddzielania struktury od prezentacji, co jest fundamentem nowoczesnego web developmentu.

Kiedy styl CSS jest lepszym wyborem niż tag HTML?

CSS jest preferowaną metodą, gdy przekreślenie ma charakter czysto stylistyczny i nie niesie ze sobą żadnego znaczenia semantycznego dla treści. Na przykład, jeśli chcesz wizualnie przekreślić element listy zadań, które zostały ukończone, ale nie chcesz, aby czytniki ekranu interpretowały je jako "usunięte" czy "nieaktualne" w sensie semantycznym. W takich przypadkach, zastosowanie text-decoration: line-through; jest idealne, ponieważ pozwala na pełną kontrolę nad wyglądem, jednocześnie nie wprowadzając zamieszania w strukturze dokumentu czy jego interpretacji przez maszyny.

Przykłady kodu: Dodawanie przekreślenia do dowolnego elementu

Możesz zastosować text-decoration: line-through; do dowolnego elementu HTML. Poniżej przedstawiam kilka przykładów, jak to zrobić:

Ten tekst jest przekreślony za pomocą stylu wbudowanego.
 

Ten tekst jest przekreślony za pomocą klasy CSS.
 
/* W pliku style.css */
#zadanie-ukonczone { text-decoration: line-through;
} 
 
Kupić mleko
 
Nakarmić kota

HTML czy CSS? Jak wybrać najlepszą metodę?

Wybór między tagami HTML a stylami CSS do przekreślania tekstu jest kluczowy dla zachowania semantyki, dostępności i czystości kodu. Moja rada jest prosta i opiera się na podstawowych zasadach tworzenia stron internetowych.

Prosta zasada: Struktura (HTML) kontra prezentacja (CSS)

Pamiętaj o fundamentalnej zasadzie: HTML służy do nadawania struktury i znaczenia treści, natomiast CSS do jej prezentacji i stylizacji. Jeśli przekreślenie ma znaczenie semantyczne czyli informuje o tym, że treść została usunięta () lub jest nieaktualna () zawsze używaj odpowiedniego tagu HTML. Jeśli natomiast przekreślenie jest tylko efektem wizualnym, bez wpływu na znaczenie treści (np. lista ukończonych zadań), to zdecydowanie lepszym wyborem jest użycie właściwości CSS text-decoration: line-through;. To rozróżnienie jest kluczowe dla robotów wyszukiwarek, czytników ekranu i ogólnej jakości kodu.

Checklista: 3 pytania, które pomogą Ci podjąć właściwą decyzję

Aby ułatwić sobie wybór, zadaj sobie te trzy pytania:

1. Czy przekreślenie ma znaczenie dla treści? Czy informuje o usunięciu, nieaktualności lub innej zmianie, która powinna być zrozumiana przez maszyny (roboty, czytniki ekranu)?
   • Jeśli tak, użyj lub .
2. Czy treść jest faktycznie usunięta z dokumentu, czy tylko nieaktualna?
   • Jeśli usunięta, wybierz .
   • Jeśli nieaktualna, ale nadal widoczna dla kontekstu (np. stara cena), wybierz .
3. Czy przekreślenie jest tylko efektem wizualnym, bez wpływu na znaczenie? Czy chcesz po prostu, aby tekst wyglądał na przekreślony, ale nie ma to żadnego dodatkowego kontekstu semantycznego?
   • Jeśli tak, użyj CSS: text-decoration: line-through;.

Atrybuty i dostępność: o czym pamiętać?

Dbając o jakość kodu i doświadczenia użytkowników, warto zwrócić uwagę na dodatkowe aspekty związane z atrybutami i dostępnością.

Jak dodać kontekst do usunięcia? Użycie atrybutów cite i datetime w tagu

Tag oferuje dwa bardzo przydatne atrybuty, które pozwalają na dodanie dodatkowego kontekstu do usuniętej treści: cite i datetime. Atrybut cite może wskazywać na URL dokumentu, który wyjaśnia powód zmiany lub usunięcia. Atrybut datetime pozwala określić datę i czas, kiedy treść została usunięta. Użycie tych atrybutów jest szczególnie cenne w dokumentach, gdzie historia zmian jest kluczowa, np. w dokumentacji technicznej, aktach prawnych czy systemach zarządzania treścią. Dzięki nim, zarówno ludzie, jak i maszyny, mogą uzyskać pełniejszy obraz wprowadzonych modyfikacji.

Zgodnie z nowym regulaminem, poprzednie zasady dotyczące zwrotów obowiązywały przez 14 dni. Obecnie termin zwrotu wynosi 30 dni.

Czy osoby niewidome "zobaczą" Twoje przekreślenie? Dostępność a wybór metody

Kwestia dostępności (accessibility) jest niezwykle ważna, a wybór metody przekreślania ma na nią bezpośredni wpływ. Osoby niewidome lub niedowidzące korzystają z czytników ekranu, które przekształcają tekst na mowę. Czysto wizualne przekreślenie za pomocą CSS (text-decoration: line-through;) może być przez te czytniki całkowicie ignorowane. Oznacza to, że użytkownik nie otrzyma żadnej informacji o tym, że dany tekst jest przekreślony, a co za tym idzie straci ważny kontekst. Natomiast semantyczne użycie tagów HTML, zwłaszcza , jest kluczowe. Czytniki ekranu są zaprogramowane tak, aby komunikować, że tekst oznaczony jest "usunięty". Daje to użytkownikowi pełne zrozumienie, że dany fragment nie jest już aktywną częścią dokumentu. Dlatego też, jeśli przekreślenie ma znaczenie informacyjne, zawsze stawiaj na tagi HTML, aby zapewnić dostępność dla wszystkich użytkowników.

Unikaj tych błędów przy przekreślaniu tekstu

Jako doświadczony twórca stron, często widzę powtarzające się błędy, które można łatwo uniknąć. Oto najważniejsze z nich.

Błąd 1: Używanie CSS do oznaczania semantycznie ważnych zmian

To jeden z najczęstszych błędów. Jeśli przekreślenie tekstu ma informować o tym, że treść została usunięta, jest nieaktualna lub zmieniona w sposób, który ma znaczenie dla zrozumienia dokumentu, nigdy nie używaj do tego wyłącznie CSS. Jak już wspomniałem, czysto stylistyczne przekreślenie CSS nie niesie ze sobą żadnego znaczenia semantycznego. Oznacza to, że roboty wyszukiwarek nie będą w stanie poprawnie zinterpretować kontekstu zmiany, a czytniki ekranu dla osób z niepełnosprawnościami mogą całkowicie zignorować ten sygnał wizualny. Prowadzi to do utraty kontekstu, problemów z dostępnością i potencjalnie negatywnego wpływu na SEO.

Błąd 2: Stosowanie przestarzałego tagu

Chociaż przeglądarki nadal renderują tag , jego użycie jest niezgodne z nowoczesnymi standardami HTML5. Jest to tag przestarzały (deprecated) i jego obecność w kodzie może prowadzić do problemów z walidacją, a w przyszłości może być zupełnie nieobsługiwana. Zawsze dąż do pisania czystego, semantycznego i zgodnego ze standardami kodu. Zamiast , wybieraj , lub CSS.

Błąd 3: Mylenie tagów i w kontekście biznesowym

Wydaje się to drobnostką, ale w kontekście biznesowym, prawnym czy e-commerce, precyzyjne rozróżnianie między a jest niezwykle ważne. Oznaczenie starej ceny jako "usuniętej" () zamiast "nieaktualnej" () może wprowadzić w błąd. Podobnie, w dokumentach prawnych, gdzie każda zmiana jest śledzona, użycie zamiast dla faktycznie usuniętego fragmentu może mieć realne konsekwencje. Zawsze zastanów się, czy treść jest tylko nieaktualna, czy faktycznie została usunięta z dokumentu, zanim wybierzesz odpowiedni tag.

Podsumowanie: Świadomy wybór metody przekreślania

Mam nadzieję, że ten artykuł rozwiał wszelkie wątpliwości dotyczące przekreślania tekstu w HTML i CSS. Kluczem do sukcesu jest świadomy wybór metody, która najlepiej odpowiada semantyce i celowi, jaki chcemy osiągnąć.

Krótkie przypomnienie: Kiedy , kiedy , a kiedy CSS?

Przeczytaj również: Jak zmienić kolor czcionki w HTML? CSS to klucz do profesjonalizmu!

Dobre praktyki, które warto zapamiętać

• Priorytet dla semantyki: Zawsze stawiaj na semantyczne tagi HTML (, ), jeśli przekreślenie ma znaczenie dla treści.
• Dbałość o dostępność: Pamiętaj, że czytniki ekranu interpretują tagi HTML, ale mogą ignorować czysto wizualne style CSS.
• Unikaj przestarzałych rozwiązań: Nigdy nie używaj tagu . Jest on przestarzały i niezgodny z nowoczesnymi standardami.
• Rozdzielenie struktury od prezentacji: Jeśli przekreślenie jest tylko efektem wizualnym, użyj CSS.
• Kontekst to podstawa: Zawsze zastanów się nad kontekstem i celem przekreślenia, aby wybrać najbardziej odpowiednią metodę.