Przekreślenie HTML

Przekreślanie tekstu w HTML i/lub CSS jest prostą techniką stylizacji, która pozwala wizualnie wskazać usunięcie, zmianę lub nieaktualność informacji. Ten artykuł wprowadzi Cię w sposoby przekreślania tekstu, korzystając z różnych metod dostępnych w HTML i CSS, zapewniając przy tym praktyczne przykłady i najlepsze praktyki. Jak zobaczysz poniżej, przekreślanie za pomocą HTML i CSS nie powinno być używane zamiennie. Powinieneś używać HTML-a i CSS zgodnie z semantyką, bo pomaga to np. SEO i czytnikom treści. 

Jak przekreślić treść w HTML?

HTML oferuje specjalne tagi do przekreślania tekstu: <del> i <s>. Oba te tagi wyświetlają tekst z przekreśleniem, ale z różnym semantycznym znaczeniem.

Tag <del>

Tag <del> jest używany do oznaczenia usunięcia tekstu z dokumentu. Jest to szczególnie przydatne w dokumentach, które śledzą zmiany lub korekty, ponieważ jasno wskazuje, co zostało usunięte. Przykład użycia:

<p>To jest <del>stary</del> <ins>nowy</ins> tekst.</p>

Ten kod pokazuje, jak użyć tagu <del> do przekreślenia słowa "stary" i tagu <ins> do podkreślenia słowa "nowy", co razem demonstruje edycję tekstu.

Tag <s>

Tag <s> służy do przekreślania tekstu, który nie jest już aktualny lub relevantny, ale bez konotacji usunięcia. Jest to bardziej ogólna forma przekreślenia, która może być stosowana w różnych kontekstach, np. w przypadku promocji, które się zakończyły. Przykład użycia:

<p>Cena: <s>199,99 zł</s> 149,99 zł</p>

W tym przykładzie cena została przekreślona, aby wskazać, że stara oferta została zmieniona na nową, niższą cenę.

Tag <strike>

W HTML 4 do przekreślania tekstu był używany tag <strike>. Jednak w nowszych wersjach HTML, począwszy od HTML5, jego użycie zostało zaniechane i uznane za przestarzałe (deprecated), ale w starszych stronach można spotkać się z takimi tagami. 

Jak przekreślić treść w CSS?

CSS oferuje jeszcze większą elastyczność w przekreślaniu tekstu za pomocą właściwości text-decoration. Możesz użyć tej właściwości nie tylko do przekreślania tekstu, ale także do stylizacji przekreślenia, np. zmiany koloru czy stylu linii.

Właściwość text-decoration

Podstawowe użycie właściwości text-decoration do przekreślenia tekstu wygląda tak:

text-decoration: line-through;

Ta deklaracja CSS przekreśli tekst elementu, do którego jest zastosowana. Możesz również połączyć przekreślenie z innymi efektami, takimi jak podkreślenie czy przekreślenie na kolorowo:

text-decoration: line-through underline red;

Ten kod spowoduje, że tekst będzie jednocześnie przekreślony i podkreślony czerwoną linią.

Praktyczne zastosowania przekreślenia tekstu

Przekreślenie tekstu ma wiele praktycznych zastosowań w projektowaniu stron internetowych i dokumentach online, od wizualnego oznaczania zmian w treści, przez informowanie o nieaktualnych cenach lub promocjach, po dodawanie komentarzy edytorskich w tekstach. Odpowiednie użycie przekreślenia może poprawić czytelność i zrozumienie dokumentu przez czytelnika.

Najlepsze praktyki przekreślania tekstu

Przy stosowaniu przekreśleń w HTML i CSS, warto pamiętać o kilku najlepszych praktykach:

• Zawsze używaj semantycznie odpowiednich tagów HTML (<del> i <s>) dla odpowiedniego kontekstu.
• Stosuj CSS do dodatkowej stylizacji przekreśleń, aby były one spójne z ogólnym projektem strony.
• Używaj przekreśleń z rozwagą, aby nie przeciążać użytkownika nadmiarem informacji.

Przekreślanie tekstu, choć prosty mechanizm, może znacząco wpłynąć na prezentację i percepcję treści. Poprzez świadome wykorzystanie tej techniki, możesz skutecznie komunikować się ze swoimi czytelnikami, wskazując zmiany, aktualizacje lub nieaktualność informacji w klarowny i estetyczny sposób.

---

---