Poradniki Programowanie

HTML: jak przekreślić tekst?

Pinterest LinkedIn Tumblr

Dzisiaj szybka piłka dla wszystkich, którzy zastanawiają się jak w HTML uzyskać efekt przekreślonego tekstu. Jak to często bywa w HTML i CSS ten efekt można osiągnąć na kilka sposobów.

Jeszcze kilka lat temu, w czasach gdy popularny był HTML w wersji 4 (tak, HTML ma różne wersje) efekt przekreślonego tekstu można było uzyskać za pomocą tagu <strike>. Z racji tego, że wspomniana wersja HTML jest już przestarzała (ang. deprecated), to nie powinno się jej używać.

Przekreślenie tekst HTML za pomocą tagu

W nowszej wersji HTML, która jest już poprawnie rozumiana przez najnowsze przeglądarki efekt przekreślonego tekstu można osiągnąć na dwa sposoby. Pomiędzy nimi jest subtelna różnica, semantyczna. Wszystko zależeć będzie w jakim kontekście będziemy przekreślać tekst.

Tag <s>

Tagu HTML  <s> używa się aby przedstawić rzeczy (treści), które nie są już istotne lub nie są już dokładne.

Warto wspomnieć, że tag <s> nie jest odpowiedni do oznaczania zmian w dokumencie. W tym celu używa się tagu <del>. Tagu del można użyć np. w części aplikacji która pokazuje zmiany pomiędzy jedną wersją dokumentu (np. tekstu) a drugą. Taką funkcję posiada m.in. git (github, bitbucket) czy nawet WordPress.

Przekreślenie tekstu za pomocą tagu HTML <s>: To jest przekreślony tekst.

Przekreślenie tekstu za pomocą CSS

Podobny efekt można użyć za pomocą odpowiedniego stylu w CSS:

text-decoration: line-through;

Od ponad 5 lat dzielę się swoją wiedzą na temat elektroniki użytkowej. Tworzę poradniki technologiczne rozwiązujące realne problemy napotykane podczas użytkowania sprzętu. Recenzuję elektronikę taką jak routery, audio, smartfony, laptopy itp.

Skomentuj