HTML del und ins: Änderungen und Änderungsdatum kennzeichnen

HTML <del> markiert Inhalte, die aus einem Dokument gelöscht wurden, und <ins> markiert eingefügte Inhalte. Obwohl ihr Standardaussehen normalerweise ein Durchstreichen bzw. Unterstreichen ist, besteht ihr Hauptzweck darin, die Bedeutung einer Änderung zu vermitteln; sie verwalten nicht automatisch Dokumentversionen und speichern auch keine Bearbeitungshistorie.

Vollständiges Beispiel: gelöschte und eingefügte Inhalte

Die folgende Ankündigung des Zeitplans ist ein Übungsbeispiel. Speichern Sie es als changes.html und öffnen Sie es in einem Browser, um sowohl die alten als auch die neuen Werte zu sehen. Das Datum und der Grund erscheinen ebenfalls im sichtbaren Text, damit Leser die Änderung verstehen können, selbst wenn Farben oder Linien schwer zu erkennen sind.

<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Beispiel einer Terminänderung</title>
</head>
<body>
  <h1>Übungstreffen: Terminänderung</h1>
  <p>Beginn:
    <del datetime="2026-10-30" cite="#reason">10:00</del>
    <ins datetime="2026-10-30" cite="#reason">11:00</ins>
  </p>
  <p>Der bisherige Beginn war 10:00 Uhr; der neue Beginn ist 11:00 Uhr.</p>
  <p id="reason">Am 30. Oktober 2026 wurde der Termin geändert, um mehr Vorbereitungszeit zu ermöglichen.</p>
</body>
</html>

Bei typischen Standardstilen ist 10:00 durchgestrichen und 11:00 unterstrichen. CSS kann ihr Erscheinungsbild ändern. Die Anwendung von del löscht den Originaltext nicht aus den Daten, daher sollte es nicht verwendet werden, um Passwörter, persönliche Informationen oder andere Inhalte zu verstecken, die nicht öffentlich sein dürfen.

Die Rolle von datetime und cite

Das optionale datetime-Attribut hält das Datum oder Datum und Uhrzeit der Änderung fest. Das Beispiel-2026-10-30 ist ein Datum im Jahr-Monat-Tag-Format. Wenn Sie eine genaue Uhrzeit benötigen, können Sie eine explizite Zeitzonenangabe hinzufügen, wie in 2026-10-30T09:00:00+09:00. Das Hinzufügen eines Datums plant keine Veröffentlichung und bewirkt nicht, dass die Dokumentänderung automatisch zu diesem Zeitpunkt erfolgt.

Das cite-Attribut gibt die URL einer Ressource an, die die Änderung erklärt. Im Beispiel wird #reason verwendet, um auf einen erklärenden Absatz im selben Dokument zu verweisen. Das Attribut zeigt nicht automatisch eine Erklärung oder einen anklickbaren Link an, daher sollte jeder notwendige Grund und das Datum auch im sichtbaren Text enthalten sein.

Unterscheiden Sie Dokumentbearbeitungen von dekorativen Linien

Verwenden Sie del und ins, um Bearbeitungen an einem Dokument darzustellen. Für eine Durchstreichung von Informationen, die nicht mehr korrekt oder relevant sind, berücksichtigen Sie auch die Bedeutung von <s>. Verwenden Sie CSS text-decoration für rein dekorative Linien. Eine identische visuelle Erscheinung impliziert nicht dieselbe Bedeutung.

Bildschirmlesegeräte geben möglicherweise nicht jede Lösch- oder Einfügegrenze mit ihren Standardeinstellungen bekannt. Für eine wichtige Änderung erklären Sie die alten und neuen Werte in einem Satz, wie im Beispiel gezeigt. Unterscheiden Sie nicht nur durch Farbe zwischen den beiden Zuständen und geben Sie klar an, welche Informationen derzeit gültig sind. Die MDN-Referenz zu del und MDN-Referenz zu ins beschreiben die Elemente und ihre Attribute.