<ins> : l'élément de texte inséré

Exemple interactif

<p>&ldquo;Vous êtes en retard&nbsp;!&rdquo;</p>
<del>
  <p>&ldquo;Je suis désolé pour le retard.&rdquo;</p>
</del>
<ins cite="../howtobeawizard.html" datetime="2018-05">
  <p>&ldquo;Un sorcier n'est jamais en retard&hellip;&rdquo;</p>
</ins>

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

del {
  background-color: #ffbbbb;
}

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;
  font-family: "Georgia", serif;
  font-size: 1rem;
}

Attributs

Cet élément inclut les attributs universels.

cite

Cet attribut définit l'URI d'une ressource qui explique la modification (par exemple un lien vers le compte rendu d'une réunion ou un ticket dans un système de suivi).

datetime

Cet attribut indique la date et l'heure de la modification et doit être une date valide avec une chaîne horaire optionnelle. Si la valeur ne peut pas être analysée comme une date avec une chaîne horaire optionnelle, l'élément n'a pas d'horodatage associé. Pour le format de la chaîne sans heure, voir Format d'une chaîne de date valide. Le format de la chaîne incluant la date et l'heure est décrit dans Format d'une chaîne de date et heure locales valides.

Accessibilité

Par défaut, la plupart des outils d'assistance n'annoncent pas la présence de l'élément ins. On peut le rendre annonçable via la propriété CSS content et grâce aux pseudo-éléments ::before et ::after.

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: " [Début de l'insertion]";
}

ins::after {
  content: " [Fin de l'insertion] ";
}

Certaines personnes qui utilisent des lecteurs d'écran désactivent sciemment ces annonces pour éviter une verbosité trop importante. Il est donc important de ne pas abuser de cette technique et de ne l'appliquer qu'à des situations où il est nécessaire de comprendre que du contenu a été inséré.

• Brève note pour rendre vos marques plus accessibles | The Paciello Group ^(angl.)
• Ajuster les styles au niveau du texte | Adrian Roselli ^(angl.)

Exemples

HTML

<p>Le texte <ins>Ce texte a été ajouté</ins> original.</p>

Résultat

Résumé technique

Spécifications

Compatibilité des navigateurs

Voir aussi

• <del> qui permet d'indiquer la suppression d'un fragment dans un document.