<del> HTML gelöschtes Textelement

Probieren Sie es aus

<blockquote>
  There is <del>nothing</del> <ins>no code</ins> either good or bad, but
  <del>thinking</del> <ins>running it</ins> makes it so.
</blockquote>

del {
  text-decoration: line-through;
  background-color: #ffbbbb;
  color: #555555;
}

ins {
  text-decoration: none;
  background-color: #d4fcbc;
}

blockquote {
  padding-left: 15px;
  border-left: 3px solid #d7d7db;
  font-size: 1rem;
}

Dieses Element wird oft (aber nicht notwendigerweise) durch die Anwendung eines Durchstreichstils auf den Text gerendert.

Attribute

Zu den Attributen dieses Elements gehören die globalen Attribute.

cite

Ein URI für eine Ressource, die die Änderung erklärt (zum Beispiel Sitzungsprotokolle).

datetime

Dieses Attribut zeigt die Zeit und das Datum der Änderung an und muss ein gültiger Datumsstring mit optionaler Uhrzeit sein. Wenn der Wert nicht als Datum mit optionalem Zeitstring geparst werden kann, hat das Element keinen zugeordneten Zeitstempel. Für das Format des Strings ohne Uhrzeit siehe Datumsstrings. Das Format des Strings, wenn es sowohl Datum als auch Uhrzeit enthält, wird in Lokale Datums- und Zeitstrings behandelt.

Barrierefreiheit

Das Vorhandensein des del Elements wird in der Standardeinstellung von den meisten Screenreader-Technologien nicht angekündigt. Es kann zur Ankündigung gebracht werden, indem die CSS content Eigenschaft zusammen mit den ::before und ::after Pseudo-Elementen verwendet wird.

del::before,
del::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

del::before {
  content: " [deletion start] ";
}

del::after {
  content: " [deletion end] ";
}

Einige Personen, die Screenreader verwenden, deaktivieren absichtlich die Ankündigung von Inhalten, die zusätzliche Ausführlichkeit schaffen. Daher ist es wichtig, diese Technik nicht zu missbrauchen und sie nur in Situationen anzuwenden, in denen das Nichtwissen von gelöschten Inhalten das Verständnis negativ beeinflussen würde.

• Kurze Notiz zur Verbesserung der Markierung (zugänglicher) | Vispero
• Text Level Styles anpassen | Adrian Roselli

Beispiele

<p><del>This text has been deleted</del>, here is the rest of the paragraph.</p>
<del><p>This paragraph has been deleted.</p></del>

Ergebnis

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• <ins> Element für Einfügungen in einen Text
• <s> Element für Durchstreichungen, die sich von der Darstellung gelöschten Textes unterscheiden