<ins>: Das eingefügte Textelement

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Das <ins> HTML-Element repräsentiert einen Textbereich, der einem Dokument hinzugefügt wurde. Sie können das <del>-Element verwenden, um ähnlich einen Textbereich darzustellen, der aus dem Dokument gelöscht wurde.

Probieren Sie es aus

<p>&ldquo;You're late!&rdquo;</p>
<del>
  <p>&ldquo;I apologize for the delay.&rdquo;</p>
</del>
<ins cite="../how-to-be-a-wizard.html" datetime="2018-05">
  <p>&ldquo;A wizard is never late &hellip;&rdquo;</p>
</ins>

del,
ins {
  display: block;
  text-decoration: none;
  position: relative;
}

del {
  background-color: #fbb;
}

ins {
  background-color: #d4fcbc;
}

del::before,
ins::before {
  position: absolute;
  left: 0.5rem;
  font-family: monospace;
}

del::before {
  content: "−";
}

ins::before {
  content: "+";
}

p {
  margin: 0 1.8rem 0;
  font-family: Georgia, serif;
  font-size: 1rem;
}

Attribute

Dieses Element beinhaltet die globalen Attribute.

cite

Dieses Attribut definiert den URI einer Ressource, die die Änderung erklärt, wie ein Link zu Sitzungsprotokollen oder einem Ticket in einem Problemlösungssystem.

datetime

Dieses Attribut gibt die Zeit und das Datum der Änderung an und muss ein gültiges Datum mit optionaler Zeitangabe sein. Wenn der Wert nicht als Datum mit optionaler Zeitangabe geparst werden kann, hat das Element keinen zugeordneten Zeitstempel. Für das Format der Zeichenkette ohne Zeitangabe, siehe Format eines gültigen Datumsstrings. Das Format der Zeichenkette, wenn es sowohl Datum als auch Zeit enthält, wird in Format eines gültigen lokalen Datums- und Zeitstrings behandelt.

Barrierefreiheit

Die Präsenz des <ins>-Elements wird von den meisten Bildschirmlesetechnologien in ihrer Standardkonfiguration nicht angesagt. Es kann so angepasst werden, dass es angekündigt wird, indem die CSS-Eigenschaft content zusammen mit den Pseudo-Elementen ::before und ::after verwendet wird.

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

ins::before {
  content: " [insertion start] ";
}

ins::after {
  content: " [insertion end] ";
}

Einige Personen, die Bildschirmleser verwenden, deaktivieren bewusst die Ankündigung von Inhalten, die zusätzliche Wortfülle schaffen. Daher ist es wichtig, diese Technik nicht zu missbrauchen und sie nur in Situationen anzuwenden, in denen das Nichtwissen darüber, dass Inhalte eingefügt wurden, das Verständnis nachteilig beeinflussen würde.

Beispiele

html
<ins>This text has been inserted</ins>

Ergebnis

Technische Zusammenfassung

Inhaltskategorien Phrasierungsinhalt, Flussinhalt.
Erlaubter Inhalt Transparent.
Tag-Auslassung Keiner, sowohl der Start- als auch der Endtag sind obligatorisch.
Erlaubte Eltern Jedes Element, das Phrasierungsinhalt akzeptiert.
Implizite ARIA-Rolle insertion
Erlaubte ARIA-Rollen Beliebig
DOM-Schnittstelle [`HTMLModElement`](/de/docs/Web/API/HTMLModElement)

Spezifikationen

Specification
HTML
# the-ins-element

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

  • <del>-Element zur Markierung von Löschungen in einem Dokument