<del>: HTML-Element für gelöschten Text
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Das <del>-Element von HTML kennzeichnet einen Textbereich, der aus einem Dokument gelöscht wurde. Es kann beispielsweise verwendet werden, um nachverfolgte Änderungen oder Unterschiede zwischen Quellcodeversionen darzustellen. Das <ins>-Element dient dem gegenteiligen Zweck: Es kennzeichnet Text, der dem Dokument hinzugefügt wurde.
Dieses Element wird häufig, aber nicht zwingend, mit durchgestrichenem Text dargestellt.
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;
}
Attribute
Zu den Attributen dieses Elements gehören die globalen Attribute.
cite-
Ein URI für eine Ressource, die die Änderung erläutert, beispielsweise ein Sitzungsprotokoll.
datetime-
Dieses Attribut gibt Datum und Uhrzeit der Änderung an. Sein Wert muss eine gültige Datumszeichenfolge mit optionaler Uhrzeit sein. Wenn der Wert nicht als Datum mit optionaler Uhrzeit interpretiert werden kann, ist dem Element kein Zeitstempel zugeordnet. Das Format einer Zeichenfolge ohne Uhrzeit wird unter Datumszeichenfolgen beschrieben. Das Format einer Zeichenfolge mit Datum und Uhrzeit wird unter Lokale Datums- und Uhrzeitzeichenfolgen beschrieben.
Barrierefreiheit
Die meisten Screenreader kündigen das del-Element in ihrer Standardkonfiguration nicht an. Mithilfe der CSS-Eigenschaft content sowie der Pseudoelemente ::before und ::after lässt sich eine solche Ankündigung ergänzen.
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] ";
}
Manche Menschen, die Screenreader verwenden, deaktivieren bewusst die Ankündigung zusätzlicher Inhalte, um übermäßig ausführliche Ausgaben zu vermeiden. Setzen Sie diese Technik daher sparsam und nur dann ein, wenn das Verständnis darunter leiden würde, dass die Löschung des Textes nicht erkennbar ist.
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
| Inhaltskategorien | Phrasing Content, Flow Content. |
|---|---|
| Erlaubter Inhalt | Transparent. |
| Weglassen von Tags | Keines; sowohl das Start- als auch das End-Tag sind erforderlich. |
| Erlaubte Elternelemente | Jedes Element, das Phrasing Content zulässt. |
| Implizite ARIA-Rolle |
deletion
|
| Erlaubte ARIA-Rollen | Alle |
| DOM-Schnittstelle | [`HTMLModElement`](/de/docs/Web/API/HTMLModElement) |
Spezifikationen
| Spezifikation |
|---|
| HTML # the-del-element |