Tag <del> w HTML służy do oznaczania treści, która została usunięta, jest nieaktualna lub wkrótce zostanie usunięta z dokumentu. Dzięki niemu przeglądarki automatycznie przekreślają taki tekst (styl text-decoration: line-through), a jednocześnie nadaje on semantyczny sens – informuje czytniki ekranu i wyszukiwarki o zmianach w treści.
To nie tylko stylizacja, ale wyraźny sygnał o historii zmian, istotny dla dostępności i SEO.
Element ten jest szczególnie przydatny w blogach, systemach CMS, dokumentacji technicznej czy aplikacjach wersjonujących kod. W połączeniu z tagiem <ins> (do wstawionego tekstu) pozwala wizualizować edycje, jak w narzędziach typu Google Docs czy GitHub.
Podstawowe cechy elementu <del>
Według specyfikacji HTML5, <del> należy do kategorii treści ogólnej i może występować w kontekście zewnętrznym lub wewnętrznym elementów nadrzędnych, takich jak <p>, <article> czy <dl>. Nie ma wymaganych elementów potomnych ani atrybutów – tagi otwierający i zamykający są obowiązkowe.
Najważniejsze właściwości elementu <del> to:
- CSS display –
inline(domyślnie przekreślenie liniowe); - Dostępność – tak, wspiera ARIA i czytniki ekranu (oznajmia „usunięty tekst”);
- Semantyka – nie chodzi tylko o styl; to informacja o historii zmian, kluczowa dla SEO i dostępności.
Nie pomijaj tagów! Składnia to zawsze <del>treść</del>. Pominięcie kończącego tagu uniemożliwia prawidłowe parsowanie HTML.
Atrybuty elementu <del>
<del> obsługuje dwa kluczowe atrybuty specyficzne dla oznaczania zmian w treści:
1. cite – źródło informacji o usunięciu
Podajesz URL do zasobu wyjaśniającego, dlaczego tekst jest nieaktualny (np. changelog, artykuł z poprawką). Wartość to ciąg znaków URL, bez domyślnej.
Przykład z rekordem świata (z podanym źródłem):
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Rekordy świata</title>
</head>
<body>
<dl>
<dt>Aktualny rekord świata – bieg na 100m mężczyzn</dt>
<dd>
<del cite="https://rekord.jednostek.pl/100m">
<p>9.69 s – Usain Bolt (Jamajka, 2008)</p>
</del>
<ins>
<p><strong>9.58 s</strong> – Usain Bolt (Jamajka, 2009)</p>
</ins>
</dd>
</dl>
</body>
</html>
Efekt: przekreślony stary rekord z linkiem do źródła poprawki. Przeglądarki nie renderują cite jako klikalnego linku, ale atrybut wspiera semantykę.
2. datetime – data i czas usunięcia
Określa datę (format ISO 8601, np. YYYY-MM-DD lub YYYY-MM-DDTHH:MM), od kiedy tekst jest nieaktualny. Brak domyślnej wartości.
Przykład z datą poprawki:
<dl>
<dt>Cena produktu X</dt>
<dd>
<del datetime="2026-03-01">199 zł</del>
<ins datetime="2026-03-20"><strong>179 zł</strong> (promocja!)</ins>
</dd>
</dl>
Efekt: użytkownicy z czytnikami ekranu słyszą „usunięte 1 marca 2026”. Idealne do historii cen, changelogów czy postów blogowych z aktualizacjami.
Uwaga: oba atrybuty są opcjonalne, ale mocno zalecane dla pełnej semantyki. Możesz je łączyć: <del cite="..." datetime="...">.
Praktyczne przykłady użycia <del> w projektach
1. Blog z poprawkami artykułu
Wyobraź sobie post o frameworkach JS – oznacz stare informacje i dodaj aktualne, np. tak:
<article>
<h2>Najlepsze frameworki 2026</h2>
<p>
Dawniej <del>React</del> był jedynym wyborem,
<ins>ale teraz dominuje Svelte + Vue 4</ins>.
</p>
<p>
<del datetime="2025-12-15">Angular nadal w czołówce.</del>
Teraz skup się na <strong>Signals</strong> w Angularze.
</p>
</article>
Stylizacja CSS dla lepszego efektu wizualnego:
del {
text-decoration: line-through wavy red; /* Fala zamiast linii prostej */
background-color: #ffebee;
padding: 2px 4px;
border-radius: 3px;
}
ins {
text-decoration: underline green;
background-color: #e8f5e8;
}
Efekt: czytelne śledzenie zmian, jak w profesjonalnym edytorze.
2. Lista definicji z aktualizacjami (<dl> + <del>)
Tag <del> świetnie pasuje do list definicyjnych – pokaż ewolucję pojęć i definicji:
<dl>
<dt><abbr title="HyperText Markup Language">HTML</abbr></dt>
<dt>Hypertext Markup Language</dt>
<dd>
<del>Język znaczników hipertekstowych (stara definicja).</del>
<ins>Język znaczników do strukturyzowania treści webowych.</ins>
</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets – do stylizacji HTML.</dd>
</dl>
Semantyka: jedno pojęcie może mieć wiele definicji, a <del> pokazuje ich aktualizacje.
3. E-commerce: historia cen
Przy prezentacji zmian cen możesz połączyć cite i datetime dla pełnej transparentności:
<section>
<h3>Cena iPhone 18 Pro</h3>
<p>
<del cite="https://sklep.apple.com/changelog" datetime="2026-01-10">5699 zł</del>
<ins datetime="2026-03-20"><strong>5299 zł</strong></ins> (nowa cena!)
</p>
</section>
Transparentność buduje zaufanie – użytkownik widzi, co i kiedy się zmieniło.
4. Dokumentacja kodu z wersjonowaniem
W README lub changelogu możesz wyróżnić usunięty i dodany kod tak jak poniżej:
<pre><code>
Funkcja:
<del>function sum(a, b) { return a + b; }</del>
<ins>const sum = (a, b) => a + b; // ES6 arrow function</ins>
</code></pre>
Warto dodać odwołanie za pomocą <cite> do commita (np. URL do GitHuba).
Różnice: <del> kontra inne tagi przekreślające
Dla jasności wyboru odpowiedniego znacznika zobacz krótkie porównanie:
| Tag | Zastosowanie | Semantyka? | Domyślny styl |
|---|---|---|---|
<del> |
Usunięty/nieaktualny tekst | Tak | line-through |
<s> |
Nieaktualna sugestia (np. promocja) | Nie | line-through |
<strike> |
Przestarzały (nie używaj!) | Nie | line-through |
Zawsze wybieraj <del> dla semantyki; <s> to tylko prezentacja.
Najczęstsze błędy i dobre praktyki
Poniżej lista częstych potknięć oraz wskazówek, które poprawią jakość i dostępność treści:
- Błąd – używanie
<del>wyłącznie do stylizacji; to psuje semantykę dla czytników ekranu; - Dobra praktyka – łącz
<del>z<ins>dla pełnego kontekstu zmian; - Błąd – niepoprawny format w
datetime(użyj ISO 8601); - Dobra praktyka – testuj w narzędziach jak WAVE lub Lighthouse (sprawdzisz semantykę i dostępność);
- Responsywność – w CSS dostosuj
text-decorationna urządzeniach mobilnych (np. kolorowa fala zamiast cienkiej linii); - Integracja JavaScript – wykorzystuj
<del>przy dynamicznych edycjach treści.
Przykładowy skrypt JavaScript, który podmienia wskazany element na <del> z datą usunięcia:
function markDeleted(element) {
const del = document.createElement('del');
del.setAttribute('datetime', new Date().toISOString().split('T')[0]);
del.textContent = element.textContent;
element.parentNode.replaceChild(del, element);
}