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.
Użycie tagów HTML do przekreślenia tekstu
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ę.
Stylizacja przekreślenia za pomocą 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
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.
