Jak uzyskać przekreślony tekst w HTML i CSS?

W świecie rzeczywistym pisząc cokolwiek czasem zachodzi potrzeba przekreślenia tego co się zapisało. W ramach cyfrowego pisania treści, zazwyczaj w przypadku pomyłek lepiej jest po prostu wykasować to co się źle napisało i napisać od nowa. Jednak czasem chciałoby się celowo wskazać, że coś jest niewłaściwe lub błędne i zachować przekreślenie tekstu lub ciągu liter na stronie internetowej. Jak jednak zrobić to na stronie internetowej?

Wbrew pozorom, nie jest to takie trudne. Niektóre edytory w systemach CMS udostępniają taką możliwość w ramach systemu i są poniekąd wbudowane. Co jednak gdy taka możliwość nie jest możliwa wprost? Wtedy jest kilka sposobów, które można podzielić na dwie grupy:

Zobaczmy zatem jak można przekreślić tekst na stronie!

Zobacz też wpis opisujący Jak używać :first-letter by uzyskać ozdobną literę na początku tekstu.

Uzyskanie przekreślenia tekstu lub liter w HTML

Jak uzyskać przekreślony tekst w HTML? Specyfikacja kodu HTML przekreślenie pozwala uzyskać na dwa sposoby. Co więcej pojedyncze przekreślone litery można uzyskać w ten sam sposób, gdyż wspomniane niżej znaczniki sprawiają, że dowolny ciąg znaków może zostać wyświetlony jako skreślone litery widoczne dla użytkownika w przeglądarce. Warto też wspomnieć, że wizualnie niezależnie od wybranej metody osoba przeglądająca stronę, nie zobaczy żadnej różnicy.

Znacznik <s> w HTML

Element <s> (strikethrough – linia przez) specyfikacji HTML pozwala uzyskać skreślony tekst. Kiedy jednak docelowo używa się tego elementu? Docelowo tylko wtedy gdy dana treść lub zawartość przestała być aktualna, a nie powinno się jej usuwać.

Na przykład przy prezentacji starej ceny można zastosować znacznika <s>, a nową aktualną już prezentować w standardowy sposób. Opcjonalnie używając starej nazwy, którą wiele osób kojarzy, gdy dana rzecz lub podmiot ją zmieniła na przykład Google AdWords i Google Ads. Można to wykorzystać w ramach optymalizacji treści artykułów pod kątem SEO.

Efekt przekreślenia treści można uzyskać w ten sposób:

<s>Litery HTML lub dowolna treść którą trzeba przekreślić</s>

Litery HTML lub dowolna treść którą trzeba przekreślić

Proste prawda? Natomiast są też inne możliwości.

Znacznik <del> w HTML

Kiedy w takim razie korzystać z elementu <del>? Semantycznie wtedy, gdy chcemy wskazać, że coś zostało permanentnie usunięte i już raczej nie powróci, a przynajmniej nie posiada obecnie swojego odpowiednika. Jak tego rodzaju przekreślenie wdrożyć na stronie lub blogu prezentuję niżej:

<del>peb.pl</del> Niestety nie ma już tego portalu 🙁

peb.pl Niestety nie ma już tego portalu 🙁

Jednak ingerencja w czysty kod HTML nie jest jedyną opcją dokonania przekreślenia. Można przecież użyć kodu CSS.

Przekreślenie w CSS (line-through)

Jest to dużo rzadziej stosowana metoda, Mogłoby się wydawać, że polega na wykorzystaniu w kodzie HTML, font decoration jako atrybutu w stylu CSS i tak rzeczywiście jest. Jednak jeśli już trzeba wykorzystać w tym celu CSS to należy to zrobić następująco:

<p style=”text-decoration: line-through”>Kod html, text css nadał przekreślenie</p>

Kod html, text css nadał przekreślenie

Jednak zazwyczaj robi się to z pomocą HTML, bo nie robi się tego często i tak jest łatwiej. Dodatkowo z użyciem HTML lepiej można nadać semantykę dla kodu, ale to już „wyższa szkoła jazdy” (co nie znaczy, że nieznacząca).

Przekreślenie w CSS z użyciem klasy

Zwolennicy separacji struktury HTML od warstwy wizualnej (całkiem słusznie!) optowaliby przy użyciu CSS zastosowanie odpowiedniej klasy CSS w tym celu zamiast nadawania stylu. W tym celu by uzyskać przekreślony tekst należałoby najpierw w kodzie HTML stworzyć coś w stylu:

<span class=”strikethrough>Przekreślony tekst w html</span>

Następnie w podpiętym w tym celu arkuszu stylów CSS dodać odpowiednią regułę:

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

I przekreślone litery zostały na stronie w sposób zgodny z separacją warstw logiki i widoku aplikacji. Może jest to przesada, ale przy większych projektach w ramach ujednolicenia kodu i lepszej kontroli nad oprogramowaniem jak najbardziej może mieć sens.

Przekreślenie tekstu a SEO

Sposób interpretacji przekreślenia tekstu przez Google w kontekście tego czym jest pozycjonowanie stron, to ciekawy ale niesamowicie niszowy temat, bardzo rzadko poruszany. Podjął się go jednak Barry Schwartz w styczniu 2014 na portalu seroundtable.com o czym można przeczytać w artykule: https://www.seroundtable.com/google-strike-del-tag-18000.html.

Przed testowaniem tego aspektu spytał on Johna Mullera o to na Twitterze i otrzymał następującą odpowiedź:

If these are only additional mentions of the same kind of content as you otherwise have on the page (and not the only mentions, or the primary content of the page), then removing them is fine.

Aby potwierdzić, jak to działa zrobił on test na frazie: erjdlcytnslx84mdss2.

Okazało się, że Google i tak bierze w ten sposób przekreślone frazy pod uwagę i je indeksuje.

Wygląd SERP-ów dla frazy erjdlcytnslx84mdss2 w Google.
Wynik SERP-ów dla frazy erjdlcytnslx84mdss2 w wyszukiwarce Google.

Oznacza to, że wtedy jak i teraz Google teoretycznie do dzisiaj przekreśleń nie ignoruje, a bierze pod uwagę w ramach wyników wyszukiwania.

Podsumowanie przekreślania tekstu na stronach

Okazuje się, że aby uzyskać przekreślony tekst na stronie internetowej jest kilka sposobów. Co więcej każdy z nich ma inne znaczenie semantyczne w kontekście HTML-a i interpretacji semantycznej. Jednak skreślony tekst, a także przekreślone litery są i tak przez Google interpretowane i wyświetlane w wynikach wyszukiwania, co oznacza, że czasem przy zmianach, jakie zaszły w Świecie warto je stosować przy aktualizowaniu treści, przynajmniej w teorii.

Chciałbym się w takim razie zapytać, jak Ty Drogi Czytelniku stosujesz przekreślenia tekstu na swoich stronach i czy w ogóle korzystasz z tej możliwości?

Może Ci się również spodoba

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *