HTML-Element <del> 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 HTML-Element <del> stellt einen Textbereich dar, der aus einem Dokument gelöscht wurde. Dies kann beispielsweise beim Darstellen von Informationen zu „Änderungen nachverfolgen“ oder von Quellcode-Diffs verwendet werden. Das Element <ins> kann für den gegenteiligen Zweck verwendet werden: um Text anzugeben, der dem Dokument hinzugefügt wurde.
Dieses Element wird häufig (aber nicht zwingend) durch Anwenden eines Durchstreichungsstils auf den 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
Die Attribute dieses Elements umfassen die globalen Attribute.
cite-
Ein URI für eine Ressource, die die Änderung erläutert (z. B. Sitzungsprotokolle).
datetime-
Dieses Attribut gibt die Uhrzeit und das Datum der Änderung an und muss eine gültige Datumszeichenfolge mit optionaler Uhrzeit sein. Wenn der Wert nicht als Datum mit optionaler Uhrzeitzeichenfolge geparst werden kann, hat das Element keinen zugeordneten Zeitstempel. Informationen zum Format der Zeichenfolge ohne Uhrzeit finden Sie unter Datumszeichenfolgen. Das Format der Zeichenfolge, wenn sie sowohl Datum als auch Uhrzeit enthält, wird unter Lokale Datums- und Uhrzeitzeichenfolgen behandelt.
Barrierefreiheit
Das Vorhandensein des Elements del wird von den meisten Screenreader-Technologien in ihrer Standardkonfiguration nicht angesagt. Es kann durch Verwendung der CSS-Eigenschaft content zusammen mit den Pseudoelementen ::before und ::after angesagt werden.
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 bewusst die Ansage von Inhalten, die zusätzliche Ausführlichkeit erzeugen. Deshalb ist es wichtig, diese Technik nicht missbräuchlich zu verwenden und sie nur in Situationen anzuwenden, in denen das Nichtwissen darüber, dass Inhalt gelöscht wurde, das Verständnis beeinträchtigen würde.
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-Inhalt, Flow-Inhalt. |
|---|---|
| Erlaubter Inhalt | Transparent. |
| Weglassen von Tags | Keines, sowohl das Start- als auch das End-Tag sind obligatorisch. |
| Erlaubte Elternelemente | Jedes Element, das Phrasing-Inhalt akzeptiert. |
| Implizite ARIA-Rolle |
deletion
|
| Erlaubte ARIA-Rollen | Beliebige |
| DOM-Schnittstelle | [`HTMLModElement`](/de/docs/Web/API/HTMLModElement) |
Spezifikationen
| Spezifikation |
|---|
| HTML # the-del-element |