HTML <del> Tag
Das <del>-Tag markiert gelöschten Text. Lernen Sie cite, datetime, die Verwendung mit <ins> und Barrierefreiheit mit Beispielen.
Das <del>-Tag markiert einen Textabschnitt, der aus einem Dokument gelöscht wurde. Es ist ein semantisches Element: Es streicht Text nicht nur durch, sondern hält fest, dass der Inhalt als Teil einer Bearbeitung absichtlich entfernt wurde. Browser stellen es standardmäßig mit einer Durchstreichung dar, aber die Bedeutung steckt im Markup, nicht im Styling.
Verwenden Sie <del>, wann immer Sie eine Änderungshistorie anzeigen möchten, zum Beispiel:
- Nachverfolgte Bearbeitungen — den ursprünglichen Text sichtbar lassen und gleichzeitig zeigen, dass er entfernt wurde (Changelogs, Wikis, kollaborative Dokumente).
- Preissenkungen — den alten Preis durchstreichen und den neuen daneben anzeigen.
- Korrekturen — einen Fehler im Dokument festhalten (eine veröffentlichte Korrektur), anstatt ihn stillschweigend zu löschen.
<del> wird fast immer mit dem <ins>-Tag kombiniert, das neu eingefügten Text markiert und standardmäßig unterstrichen dargestellt wird. Zusammen drücken sie aus: „Dies wurde durch jenes ersetzt."
Wann <del> NICHT verwendet werden sollte
Wenn Sie nur einen Durchstreichungseffekt ohne die Bedeutung „wurde bearbeitet" wünschen, ist <del> das falsche Mittel:
- Für Inhalte, die nicht mehr zutreffend oder relevant sind (aber nicht durch eine Bearbeitung gelöscht wurden) — wie ein ausverkauftes Produkt oder ein abgelaufenes Angebot — verwenden Sie das
<s>-Tag. - Für eine rein visuelle Durchstreichung ohne semantische Absicht verwenden Sie die CSS-Eigenschaft text-decoration mit dem Wert
line-through.text-decoration: line-throughist präsentationsbezogen und wird von assistiver Technologie ignoriert, während<del>ihr eine Bedeutung vermittelt.
Kurz gesagt: Greifen Sie zu <del>, wenn die Durchstreichung bedeutet „in einer Bearbeitung entfernt", und zu CSS, wenn Sie nur die Linie benötigen.
Sie können ein <del>-Element frei mit CSS gestalten — zum Beispiel seine Farbe ändern oder die standardmäßige Durchstreichung ersetzen — ohne seine Bedeutung zu verlieren, da die Semantik im Tag steckt, nicht im Styling.
Barrierefreiheit
Screenreader behandeln <del> nicht alle gleich. Standardmäßig lesen NVDA und JAWS den gelöschten Text in der Regel wie jeden anderen Text vor und kündigen nicht an, dass er gelöscht wurde, es sei denn, der Benutzer aktiviert die entsprechende Ausführlichkeitseinstellung — ein sehender Benutzer sieht die Durchstreichung, während ein Screenreader-Benutzer möglicherweise nichts über die Bearbeitung hört.
Wenn die Löschung selbst wichtig ist, um den Inhalt zu verstehen (zum Beispiel der Unterschied zwischen einem alten und einem neuen Preis), fügen Sie einen expliziten Hinweis hinzu, anstatt sich auf die visuelle Linie zu verlassen:
<p>
Price:
<del><span class="visually-hidden">Old price: </span>$99</del>
<ins><span class="visually-hidden">New price: </span>$79</ins>
</p>Vermeiden Sie es, „gelöscht"-Text über CSS content einzufügen — generierter Inhalt wird von assistiver Technologie inkonsistent verarbeitet. Bevorzugen Sie sichtbaren Text, ein aria-label oder aria-describedby am Element, wenn zusätzlicher Kontext benötigt wird.
Syntax
Das <del>-Tag kommt paarweise vor. Der Inhalt wird zwischen dem öffnenden (<del>) und dem schließenden (</del>) Tag geschrieben.
Beispiel für das HTML <del>-Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>My favorite color is <del>green</del> <ins>blue</ins>!</p>
</body>
</html>Praxisbeispiel: eine Preissenkung
Die häufigste Verwendung von <del> kombiniert mit <ins> ist die Anzeige eines alten Preises neben einem neuen:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Special offer: <del>$99</del> <ins>$79</ins></p>
</body>
</html>Der alte Preis bleibt auf der Seite (durchgestrichen) und der neue Preis ist als eingefügt markiert, sodass sowohl das visuelle Ergebnis als auch das Markup dieselbe Geschichte erzählen.
Beispiel für das HTML <del>-Tag mit dem cite-Attribut
Das cite-Attribut enthält eine URL, die auf ein Dokument verweist, das erklärt, warum der Text geändert wurde — einen Changelog-Eintrag, einen Diff oder einen Issue-Tracker-Link, nicht den gelöschten Inhalt selbst:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>
The release date is
<del cite="https://example.com/changelog#2023-10-25">October 25</del>
<ins cite="https://example.com/changelog#2023-11-02">November 2</ins>.
</p>
</body>
</html>Beispiel für das HTML <del>-Tag mit dem datetime-Attribut
Das datetime-Attribut zeichnet auf, wann die Löschung in maschinenlesbarer Form stattfand:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>The <del datetime="2023-10-25T14:30:00Z">old text</del> was replaced with new content.</p>
</body>
</html>Das datetime-Format
Der datetime-Wert folgt dem Format YYYY-MM-DDThh:mm:ssTZD:
YYYY-MM-DD— das Datum (Jahr, Monat, Tag). Dieser Teil ist erforderlich.T— ein wörtliches Trennzeichen zwischen Datum und Uhrzeit.hh:mm:ss— die Uhrzeit. Der gesamte Uhrzeitteil ist optional — ein reines Datum ist gültig.TZD— der Zeitzonenbezeichner: entwederZfür UTC oder ein Offset wie+02:00/-05:00.
Gültige Werte:
2023-10-25 <!-- date only -->
2023-10-25T14:30 <!-- date + time, no seconds -->
2023-10-25T14:30:00Z <!-- UTC -->
2023-10-25T14:30:00+02:00 <!-- with a time-zone offset -->Ungültige Werte:
25-10-2023 <!-- wrong order; must be YYYY-MM-DD -->
2023/10/25 <!-- wrong separators; must use hyphens -->
2023-10-25 14:30:00 <!-- space instead of the "T" separator -->Attribute
| Attribut | Wert | Beschreibung |
|---|---|---|
| cite | URL | URL eines Dokuments (Changelog, Diff, Issue), das erklärt, warum der Text bearbeitet oder gelöscht wurde. |
| datetime | YYYY-MM-DDThh:mm:ssTZD | Das Datum (und optionale Uhrzeit), wann der Text gelöscht wurde. |
Das <del>-Tag verwendet auch die globalen Attribute und die Ereignis-Attribute.
Verwandte Tags
<ins>— markiert eingefügten Text; der natürliche Partner von<del>.<s>— markiert Text, der nicht mehr zutreffend oder relevant ist (nicht durch eine Bearbeitung gelöscht).