HTML <ins> Tag
La balise <ins> définit une portion de texte insérée dans le document. Description, attributs et exemples.
La balise HTML <ins> marque une portion de texte qui a été insérée dans un document. C'est un élément sémantique et éditorial : il ne se contente pas de souligner du texte, il enregistre qu'un ajout a été effectué. Les navigateurs affichent le contenu souligné par défaut, mais vous pouvez modifier cela avec la propriété CSS text-decoration.
<ins> est presque toujours associé à son homologue, la balise <del>, qui marque le texte qui a été supprimé. Ensemble, elles décrivent une modification — ce qui a été retiré et ce qui a été ajouté à la place. C'est exactement l'information que vous souhaitez conserver dans :
- Les journaux de modifications et notes de version — montrant ce qui a été ajouté dans une nouvelle version.
- Les documents juridiques et contractuels — enregistrant les amendements sans perdre le libellé d'origine.
- Le suivi des modifications / diffs de documents — la vue « redline » à laquelle les éditeurs sont habitués dans les traitements de texte.
Puisque <ins> concerne uniquement le balisage d'une modification, utilisez un élément différent si vous souhaitez simplement un effet visuel : <u> pour un style de soulignement sans signification éditoriale, <em> ou <strong> pour l'emphase, et <mark> pour mettre en évidence un texte pertinent.
Syntaxe
La balise <ins> fonctionne par paires. Le contenu est placé entre la balise ouvrante (<ins>) et la balise fermante (</ins>).
<ins>This text was added.</ins>Exemple de la balise HTML <ins> :
Balise HTML <ins>
<!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>Résultat
Associer <ins> à <del> pour afficher un diff de document
L'utilisation la plus courante de <ins> consiste à afficher un « redline » d'une modification : l'ancien texte barré et le nouveau texte souligné, côte à côte. Le contenu de <del> est le texte supprimé ; le contenu de <ins> est le remplacement.
<!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>Par défaut, les parties <del> apparaissent avec un trait au milieu et les parties <ins> apparaissent soulignées, ce qui permet au lecteur de voir d'un coup d'œil ce qui a changé.
Les attributs cite et datetime
<ins> et <del> acceptent tous deux deux attributs qui enregistrent pourquoi et quand une modification a eu lieu. Ils n'ont aucun effet visuel en eux-mêmes — ce sont des métadonnées lisibles par les machines que les outils d'édition et les technologies d'assistance peuvent exploiter.
cite— une URL pointant vers un document (une issue, un ticket, un compte-rendu de réunion) qui explique la raison de l'insertion.datetime— la date, et éventuellement l'heure, à laquelle le texte a été inséré.
La valeur de datetime suit le même format que <time> : YYYY-MM-DDThh:mm. La partie date (YYYY-MM-DD) est obligatoire ; la partie heure est facultative. Si vous incluez une heure, séparez-la de la date par la lettre T, et vous pouvez ajouter les secondes et un décalage de fuseau horaire (par exemple 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>| Valeur | Signification |
|---|---|
2023-10-01 | Date uniquement — 1er octobre 2023 |
2023-10-01T09:00 | Date et heure locale — 09:00 |
2023-10-01T09:00:00Z | Date, heure et fuseau horaire UTC |
Encapsuler du contenu de niveau bloc
<ins> est un contenu transparent : il peut encapsuler du texte en ligne ou des blocs entiers (contenu de flux) tels que des paragraphes et des éléments de liste, à condition que le contexte environnant autorise ces blocs. Cela permet de marquer un paragraphe entier ou plusieurs éléments de liste comme nouvellement insérés.
<!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>Style et accessibilité
La plupart des lecteurs d'écran n'annoncent pas <ins> et <del> par défaut, ce qui signifie qu'un utilisateur se fiant à l'audio peut ne pas remarquer qu'une modification a eu lieu. Ajouter un aria-label à <ins> n'est pas une solution fiable — aria-label n'est pas standard sur cet élément et la prise en charge est incohérente.
L'approche recommandée consiste à exposer la modification via le contenu généré par CSS, en utilisant les pseudo-éléments ::before et ::after. L'étiquette insérée devient ainsi partie intégrante du texte rendu, que les lecteurs d'écran peuvent lire, et vous centralisez le style visuel en un seul endroit.
<!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>Attributs
| Attribut | Valeur | Description |
|---|---|---|
| cite | URL | Indique l'URL d'un document qui explique la raison de l'insertion. |
| datetime | YYYY-MM-DDThh:mm | Définit la date (et l'heure facultative) de l'insertion. |
La balise <ins> prend également en charge les Attributs globaux et les Attributs d'événement.
Balises associées
<del>— marque le texte qui a été supprimé (l'homologue de<ins>).<s>— représente un contenu qui n'est plus exact ou pertinent (pas une modification éditoriale).<mark>— met en évidence du texte pour référence ou pertinence.<u>— style de soulignement non textuel, sans signification éditoriale.