Lekcja 3.4: Przekreślenie (<s>, <del>)
Przekreślanie tekstu w HTML
W HTML istnieją dwa główne znaczniki służące do przekreślania tekstu: <s> i <del>. Oba wizualnie renderują tekst jako przekreślony, ale mają różne znaczenie semantyczne i zastosowanie.
Znacznik <s>
Znacznik <s> (od angielskiego "strikethrough") służy do oznaczania tekstu, który jest już nieaktualny, nieprawidłowy lub nieistotny. Nie oznacza on tekstu usuniętego (do tego służy <del>), ale raczej treść, która straciła swoją ważność lub poprawność.
<p>Promocja trwa do <s>30 kwietnia</s> 15 maja.</p>
<p>Dostępne kolory: Czerwony, Niebieski, <s>Zielony (wyprzedany)</s>, Czarny.</p>Promocja trwa do 30 kwietnia 15 maja.
Dostępne kolory: Czerwony, Niebieski, Zielony (wyprzedany), Czarny.
Znacznik <s> jest odpowiedni, gdy chcemy pokazać, że coś było kiedyś prawdą lub było dostępne, ale już nie jest, bez sugerowania, że zostało formalnie usunięte z dokumentu.
Znacznik <del>
Znacznik <del> (od angielskiego "deleted") służy do oznaczania tekstu, który został usunięty z dokumentu. Jest to semantyczny odpowiednik znacznika <ins> (tekst wstawiony) i często używany jest razem z nim do śledzenia zmian w treści.
Przeglądarki domyślnie renderują zawartość <del> jako przekreśloną.
<p>Cena regularna: <del>199 zł</del>, Cena promocyjna: 149 zł.</p>
<p>Poprzednia wersja: <del>Funkcja X była dostępna tylko dla użytkowników premium.</del> Nowa wersja: Funkcja X jest dostępna dla wszystkich użytkowników.</p>Cena regularna: 199 zł, Cena promocyjna: 149 zł.
Poprzednia wersja: Funkcja X była dostępna tylko dla użytkowników premium. Nowa wersja: Funkcja X jest dostępna dla wszystkich użytkowników.
Podobnie jak <ins>, znacznik <del> może posiadać atrybuty:
cite: URL do dokumentu wyjaśniającego powód usunięcia.datetime: Data i czas dokonania usunięcia.
<p>Usunięto sekcję o <del cite="log.html#zmiana456" datetime="2025-04-28T21:10:00Z">starych funkcjach</del>.</p>Różnice między <s> a <del>
Główna różnica między tymi znacznikami leży w ich znaczeniu semantycznym:
| Znacznik <s> | Znacznik <del> |
|---|---|
| Oznacza tekst nieaktualny, nieprawidłowy lub nieistotny | Oznacza tekst usunięty z dokumentu |
| Używany do pokazania, że coś straciło ważność | Używany do śledzenia zmian (edycji) w dokumencie |
| Przykład: |
Przykład: |
Kiedy używać <s>, a kiedy <del>?
- Użyj
<del>, gdy chcesz semantycznie oznaczyć tekst jako usunięty z dokumentu, często w kontekście edycji lub porównywania wersji. - Użyj
<s>, gdy chcesz oznaczyć tekst jako nieaktualny, nieprawidłowy lub już nieistotny, ale nadal widoczny w dokumencie. - Do zwykłego przekreślania tekstu w celach stylistycznych (bez znaczenia semantycznego) używaj CSS.
Przekreślanie tekstu za pomocą CSS
Najlepszym sposobem na przekreślenie tekstu w celach czysto wizualnych jest użycie CSS z właściwością text-decoration i wartością line-through.
<p style="text-decoration: line-through;">Ten tekst jest przekreślony za pomocą CSS.</p>
<span style="text-decoration: line-through double red;">Ten tekst ma podwójne, czerwone przekreślenie.</span>Ten tekst jest przekreślony za pomocą CSS.
Ten tekst ma podwójne, czerwone przekreślenie.CSS oferuje większą kontrolę nad wyglądem przekreślenia (kolor, styl linii, grubość) niż znaczniki HTML.
Zadanie praktyczne (z rozwiązaniem)
Zadanie: Stwórz listę zadań do wykonania, używając znacznika <s> do oznaczenia zadań już ukończonych.
Rozwiązanie:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Lista Zadań</title>
<style>
ul {
list-style: none;
padding: 0;
}
li {
margin-bottom: 5px;
}
s {
color: grey;
}
</style>
</head>
<body>
<h1>Moja Lista Zadań</h1>
<ul>
<li><s>Zrobić zakupy spożywcze</s></li>
<li>Napisać raport miesięczny</li>
<li><s>Odebrać paczkę z poczty</s></li>
<li>Zadzwonić do klienta</li>
<li>Nauczyć się znacznika <s> w HTML</li>
</ul>
</body>
</html>Dodatkowe zadania do samodzielnego wykonania:
- Stwórz przykład porównania dwóch wersji tekstu, używając znaczników
<ins>i<del>. - Użyj atrybutów
citeidatetimew znaczniku<del>, aby dodać więcej informacji o usunięciu. - Eksperymentuj z różnymi stylami przekreślenia za pomocą CSS (
text-decoration-line,text-decoration-style,text-decoration-color). - Znajdź stronę internetową (np. sklep internetowy z promocjami), która używa przekreśleń i zastanów się, czy używa znacznika
<s>czy<del>i czy jest to poprawne semantycznie.
Najczęściej zadawane pytania
Jaka jest różnica między <s> a <del>?
Znacznik <s> oznacza tekst nieaktualny lub nieistotny, podczas gdy <del> semantycznie oznacza tekst usunięty z dokumentu. Oba domyślnie renderują się jako przekreślone, ale mają różne znaczenie w kontekście treści.
Czy <s> jest przestarzały w HTML5?
Nie, znacznik <s> nie jest przestarzały w HTML5. Ma on specyficzne znaczenie semantyczne - oznaczanie treści, która jest już nieaktualna, nieprawidłowa lub nieistotna.
Czy <strike> to to samo co <s>?
Znacznik <strike> był używany w starszych wersjach HTML i miał podobne działanie do <s>. Jednak <strike> jest przestarzały w HTML5 i nie powinien być używany. Zamiast niego należy używać <s> lub CSS.
Jak przekreślić tekst bez używania <s> lub <del>?
Najlepszym sposobem na przekreślenie tekstu w celach czysto wizualnych jest użycie CSS z właściwością text-decoration: line-through;. Daje to większą kontrolę nad wyglądem przekreślenia i unika problemów semantycznych.
Kiedy używać <del> razem z <ins>?
Znaczniki <del> i <ins> są często używane razem do pokazywania zmian w dokumencie, np. w systemach kontroli wersji lub podczas edycji tekstu. <del> oznacza usuniętą treść, a <ins> treść dodaną.