Jak używać HTML do przekreślania tekstu?

Jak używać HTML do przekreślania tekstu?
Autor Andrzej Zieliński
Andrzej Zieliński22.02.2024 | 6 min.

html przekreślenie jest prostym i skutecznym sposobem na wyróżnienie lub ukrycie wybranych fragmentów tekstu na stronie internetowej. W tym poradniku dowiesz się, jak za pomocą kilku tagów HTML oraz styli CSS przekreślić tekst, tak aby był on widoczny, ale wyraźnie oznaczony. Ta technika pozwoli Ci zaznaczyć nieaktualne lub usunięte treści lub po prostu zwrócić uwagę czytelnika na konkretne słowa lub zdania. Zobacz, jak łatwo i szybko możesz dodać przekreślony tekst na swojej stronie.

Kluczowe wnioski:
  • Tagi i pozwalają na szybkie dodanie przekreślenia w HTML.
  • Styl tekstu można precyzyjnie kontrolować za pomocą CSS.
  • Przekreślenie pomaga zwrócić uwagę na ważne słowa lub frazy.
  • Technika ta pozwala oznaczyć nieaktualne lub usunięte treści.
  • Przekreślenie tekstu jest proste i dobrze wygląda na stronie www.

Zastosowanie tagu

Tag del w HTML służy do oznaczania usuniętego lub nieaktualnego fragmentu tekstu, który ma być przekreślony. Jest to prosty i skuteczny sposób na wyróżnienie takiego tekstu na stronie internetowej.

Aby użyć tagu del, należy otaczać nim wybrany tekst, który chcemy przekreślić. Na przykład:

To zdanie zostanie przekreślone

Po zastosowaniu tagu del przeglądarka automatycznie przekreśli zawarty w nim tekst, dodając pośrodku linię. Dzięki temu od razu widać, że jest to treść nieaktualna lub usunięta.

Tag del można stosować zarówno do pojedynczych słów, jak i całych akapitów czy sekcji tekstu. Pozwala to na elastyczne przekreślanie tekstu tam, gdzie jest to potrzebne.

Kiedy stosować tag

Przekreślony tekst za pomocą tagu del przydaje się w kilku sytuacjach:

  • Aktualizacja treści - można oznaczyć stare, nieaktualne już informacje.
  • Korekta błędów - poprawione literówki lub błędy można przekreślić.
  • Usunięcie treści - fragmenty tekstu usunięte, ale widoczne.

Dzięki temu unikamy sytuacji, gdy czytelnik natknie się na nieaktualne lub błędne informacje. Jednocześnie pozostawiamy taki tekst czytelny i widoczny, co zwiększa transparentność.

Jak ustawić styl dla tagu

Sam tag del bez dodatkowego stylowania wyświetli domyślne, cienkie przekreślenie tekstu. Jednak za pomocą CSS możemy precyzyjnie kontrolować sposób w jaki przekreślony tekst będzie wyglądał.

Aby to zrobić, musimy zdefiniować style dla selektora del w CSS:

del {

  text-decoration: line-through;

  color: gray;

}

Teraz przekreślony tekst będzie szary i z grubszą linią. Możemy też ustawić np. kolor tła, grubość linii czy styl linii (kropkowana, kreskowana). Daje to dużą swobodę w dostosowaniu wyglądu.

Przykładowe style dla tagu

Oto kilka przykładów ciekawych stylów dla tagu del:

del {
text-decoration: line-through red;
}
Czerwona linia przekreślenia
del {
background-color: #ffe6e6;
}
Różowe tło
del {
text-decoration-style: dotted;
}
Kropkowana linia

Eksperymentując ze stylami CSS można uzyskać ciekawe efekty i dostosować przekreślenie tekstu do potrzeb i charakteru strony.

Tag jako alternatywa dla przekreślania

Oprócz tagu del do przekreślania tekstu w HTML możemy użyć również tagu . Jest to mniej semantyczny znacznik, który również dodaje linię przez środek tekstu.

Tag oznaczał wcześniej tekst "nieaktualny", ale obecnie traktowany jest raczej jako alternatywa stylistyczna dla del. Nie niesie specjalnego znaczenia.

Zasadnicza różnica to taka, że tag del semantycznie oznacza "usunięty" fragment, a s po prostu przekreśla. Wybór tagu zależy więc od kontekstu i potrzeb.

Kiedy używać zamiast

Tag s zamiast del warto zastosować gdy:

  • Chcemy tylko wizualnie przekreślić tekst, bez konotacji "usunięty".
  • Tworzymy np. listę zakupów i przekreślamy kupione produkty.
  • Mamy wersje językowe strony i tekst jest tłumaczony, ale oryginał pozostawiony.

W pozostałych przypadkach lepiej używać bardziej semantycznego tagu del.

Przekreślenie tekstu za pomocą CSS

Jak używać HTML do przekreślania tekstu?

Oprócz tagów HTML, przekreślenie tekstu możemy także osiągnąć za pomocą samego CSS, bez użycia del czy s. Służy do tego własność text-decoration.

Aby skorzystać z tej techniki, musimy do elementu tekstowego dodać w CSS:

p {

  text-decoration: line-through;

}

Spowoduje to przekreślenie wszystkich akapitów na stronie. Oczywiście zamiast p możemy wybrać dowolny inny selektor CSS.

Kiedy stosować przekreślenie w CSS

Ta metoda jest dobra gdy:

  • Chcemy globalnie przekreślić wszystkie elementy danego typu.
  • Mamy już istniejący styl w CSS i nie chcemy zmieniać kodu HTML.
  • Potrzebujemy większej kontroli i specyficznych efektów.

Wadą jest brak semantycznego znaczenia - czysto stylistyczny zabieg.

Przekreślenie pojedynczych słów w tekście

Tagi del i s oraz CSS pozwalają przekreślić całe sekcje tekstu. Czasem jednak chcemy przekreślić pojedyncze słowa w akapicie lub zdaniu.

Jednym ze sposobów na to jest otoczenie słowa spannem i przekreślenie span:

Oto przekreślone słowo w zdaniu.

Wadą tej metody jest mieszanie stylów w HTML. Lepszym rozwiązaniem jest użycie CSS:

Oto przekreślone słowo w zdaniu.

A w CSS dodajemy:

.single span.crossed { text-decoration: line-through; }

Dzięki klasom mamy czysty kod i możliwość wielokrotnego użycia stylu przekreślenia pojedynczych słów w różnych miejscach.

Zagnieżdżanie tagów dla złożonego przekreślenia

Czasami potrzebujemy bardziej złożonego efektu przekreślenia, niż prosta pojedyncza linia. Możemy to osiągnąć dzięki zagnieżdżaniu tagów del.

Na przykład, aby przekreślić tekst podwójną linią, robimy tak:

Tekst przekreślony podwójnie

Efektem będą dwie linie krzyżujące się na tekście. Podobnie można oznaczyć potrójne przekreślenie.

Innym pomysłem jest zagnieżdżenie del wewnątrz akapitu:

To jest zdanie z przekreślonym fragmentem w środku.

Efektem jest przekreślenie tylko części tekstu. Technikę tą można rozbudować o dodatkowe style CSS dla uzyskania ciekawych efektów.

Podsumowując, html przekreślenie to prosta i przydatna funkcja, która pozwala efektywnie i semantycznie oznaczyć nieaktualne, usunięte lub poprawione fragmenty tekstu na stronie internetowej. Zarówno tagi HTML del i s oraz stylowanie CSS dają duże możliwości i kontrolę nad sposobem w jaki przekreślony tekst będzie wyświetlany. Dzięki temu można przekazać czytelnikowi dodatkowe znaczenie i zwrócić jego uwagę na ważne elementy treści.

Podsumowanie

Przekreślenie tekstu za pomocą HTML jest bardzo przydatną i prostą techniką, która pozwala wizualnie oznaczyć nieaktualne lub usunięte fragmenty na stronie internetowej. Użycie tagów takich jak del czy s w połączeniu ze stylowaniem CSS daje duże możliwości w zakresie html przekreślenie.

html przekreślenie pozwala zwrócić uwagę czytelnika na ważne lub zmienione elementy treści. To przydatne narzędzie w codziennej pracy webdevelopera i administratora strony www.

5 Podobnych Artykułów

  1. Seria iPhone 6s: Kompletny przegląd
  2. Nokia Lumia 640: Tani smartfon Microsoftu z systemem Windows Phone
  3. Google My Business Sekrety skutecznego pozycjonowania lokalnego
  4. Wybór kamery domowej WiFi w 2024: Najlepsze modele na rynku
  5. GeForce 8600/8800: Kultowe karty graficzne firmy Nvidia - Przegląd
tagTagi
shareUdostępnij artykuł
Autor Andrzej Zieliński
Andrzej Zieliński

Jestem pasjonatem i ekspertem w dziedzinie elektroniki, który dzieli się wiedzą i doświadczeniem na własnym portalu. Moja przygoda z technologią zaczęła się w dzieciństwie od demontażu starych radii, a teraz, z ponad 20 latami doświadczenia, prowadzę miejsce, gdzie entuzjaści i profesjonaliści mogą znaleźć głębokie analizy, przewodniki i recenzje najnowszych gadżetów. Jako właściciel, stawiam na rzetelność i aktualność informacji, by czytelnicy mieli dostęp do zaufanych treści, które wspierają ich codzienne i zawodowe życie z elektroniką.

Oceń artykuł
rating-fill
rating-fill
rating-fill
rating-fill
rating-fill
Ocena: 0.00 Liczba głosów: 0

Komentarze(0)

email
email

Polecane artykuły