HTML <ins> Tag
Das <ins>-Tag markiert eingefügten Text in einem Dokument. Beschreibung, Attribute und Beispiele.
Das HTML-Tag <ins> markiert einen Textabschnitt, der in ein Dokument eingefügt wurde. Es ist ein semantisches, redaktionelles Element: Es unterstreicht Text nicht nur, sondern hält fest, dass eine Ergänzung vorgenommen wurde. Browser stellen den Inhalt standardmäßig unterstrichen dar, was sich jedoch mit der CSS-Eigenschaft text-decoration ändern lässt.
<ins> wird fast immer zusammen mit seinem Gegenstück, dem Tag <del>, verwendet, das Text markiert, der entfernt wurde. Gemeinsam beschreiben sie eine Änderung — was entfernt und was an seiner Stelle eingefügt wurde. Genau diese Information möchte man festhalten in:
- Changelogs und Versionshinweisen — um zu zeigen, was in einer neuen Version hinzugekommen ist.
- Rechtlichen und vertraglichen Dokumenten — um Änderungen festzuhalten, ohne den ursprünglichen Wortlaut zu verlieren.
- Änderungsverfolgung / Dokument-Diffs — die „Redline"-Ansicht, die Redakteure aus Textverarbeitungsprogrammen kennen.
Da <ins> ausschließlich der Kennzeichnung einer Änderung dient, sollte für rein visuelle Effekte ein anderes Element verwendet werden: <u> für nicht-textliche Annotationsstile, <em> oder <strong> zur Betonung, und <mark> zum Hervorheben relevanter Textstellen.
Syntax
Das Tag <ins> wird paarweise verwendet. Der Inhalt steht zwischen dem öffnenden (<ins>) und dem schließenden (</ins>) Tag.
<ins>This text was added.</ins>Beispiel des HTML-Tags <ins>:
HTML <ins> Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>She likes <del datetime="2023-01-01">violets</del> <ins datetime="2023-10-01">snowdrops</ins>.</p>
</body>
</html>Ergebnis
<ins> mit <del> kombinieren, um einen Dokument-Diff anzuzeigen
Die häufigste Verwendung von <ins> besteht darin, eine „Redline" einer Änderung darzustellen: der alte Text durchgestrichen und der neue Text unterstrichen, nebeneinander. Der <del>-Inhalt ist der entfernte Wortlaut; der <ins>-Inhalt ist der Ersatz.
<!DOCTYPE html>
<html>
<head>
<title>Document diff</title>
</head>
<body>
<p>
The meeting is scheduled for
<del>Monday</del>
<ins>Wednesday</ins>
at
<del>9:00 AM</del>
<ins>10:30 AM</ins>.
</p>
</body>
</html>Standardmäßig erscheinen die <del>-Abschnitte durchgestrichen und die <ins>-Abschnitte unterstrichen, sodass der Leser auf einen Blick erkennt, was sich geändert hat.
Die Attribute cite und datetime
Sowohl <ins> als auch <del> akzeptieren zwei Attribute, die festhalten, warum und wann eine Änderung vorgenommen wurde. Sie haben für sich allein keine sichtbare Wirkung — es handelt sich um maschinenlesbare Metadaten, die Bearbeitungswerkzeuge und Hilfstechnologien auswerten können.
cite— eine URL, die auf ein Dokument verweist (ein Issue, ein Ticket, ein Besprechungsprotokoll), das den Grund für die Einfügung erläutert.datetime— das Datum und optional die Uhrzeit, zu der der Text eingefügt wurde.
Der datetime-Wert folgt demselben Format wie <time>: YYYY-MM-DDThh:mm. Der Datumsteil (YYYY-MM-DD) ist erforderlich; der Zeitteil ist optional. Wenn eine Uhrzeit angegeben wird, muss sie mit dem Buchstaben T vom Datum getrennt werden; Sekunden und eine Zeitzonenverschiebung können ergänzt werden (zum Beispiel 2023-10-01T14:30:00Z).
<p>
Price:
<del datetime="2023-09-30" cite="/changelog#price-update">$49</del>
<ins datetime="2023-10-01T09:00" cite="/changelog#price-update">$59</ins>
</p>| Wert | Bedeutung |
|---|---|
2023-10-01 | Nur Datum — 1. Oktober 2023 |
2023-10-01T09:00 | Datum und Ortszeit — 09:00 |
2023-10-01T09:00:00Z | Datum, Uhrzeit und UTC-Zeitzone |
Block-Inhalte einschließen
<ins> ist ein transparentes Element: Es kann sowohl Inline-Text als auch ganze Blöcke (Flow-Inhalte) wie Absätze und Listenelemente umschließen, solange der umgebende Kontext diese Blöcke erlaubt. Dadurch ist es möglich, einen ganzen Absatz oder mehrere Listenelemente als neu eingefügt zu kennzeichnen.
<!DOCTYPE html>
<html>
<head>
<title>Inserted block</title>
</head>
<body>
<h2>Release 2.0 — what's new</h2>
<ins datetime="2023-10-01">
<p>Added dark mode and keyboard shortcuts.</p>
<ul>
<li>Press <kbd>?</kbd> to view all shortcuts.</li>
<li>Toggle the theme from the settings menu.</li>
</ul>
</ins>
</body>
</html>Gestaltung und Barrierefreiheit
Die meisten Screenreader kündigen <ins> und <del> standardmäßig nicht an, sodass ein Benutzer, der auf Audio angewiesen ist, möglicherweise nicht mitbekommt, dass eine Änderung vorgenommen wurde. Das Hinzufügen eines aria-label zu <ins> ist keine zuverlässige Lösung — aria-label ist für dieses Element nicht standardisiert und die Unterstützung ist uneinheitlich.
Die empfohlene Vorgehensweise ist es, die Änderung durch von CSS generierten Inhalt sichtbar zu machen, mithilfe der Pseudo-Elemente ::before und ::after. Die eingefügte Bezeichnung wird Teil des gerenderten Textes, den Screenreader vorlesen können, und die visuelle Gestaltung bleibt an einer Stelle gebündelt.
<!DOCTYPE html>
<html>
<head>
<title>Accessible ins styling</title>
<style>
ins {
background-color: #d4f7d4;
text-decoration: none;
border-bottom: 2px solid green;
}
ins::before {
content: " [inserted: ";
}
ins::after {
content: "] ";
}
</style>
</head>
<body>
<p>The deadline is <ins datetime="2023-10-01">next Friday</ins>.</p>
</body>
</html>Attribute
| Attribut | Wert | Beschreibung |
|---|---|---|
| cite | URL | Gibt die URL eines Dokuments an, das den Grund für die Einfügung erläutert. |
| datetime | YYYY-MM-DDThh:mm | Legt das Datum (und optional die Uhrzeit) der Einfügung fest. |
Das Tag <ins> unterstützt außerdem die globalen Attribute und die Ereignis-Attribute.
Verwandte Tags
<del>— markiert Text, der entfernt wurde (das Gegenstück zu<ins>).<s>— stellt Inhalte dar, die nicht mehr zutreffend oder relevant sind (keine Änderungsmarkierung).<mark>— hebt Text zur Referenz oder Relevanz hervor.<u>— nicht-textliches Unterstreichungs-Styling ohne redaktionelle Bedeutung.