HTML del et ins : afficher les modifications et leur date

HTML <del> marque le contenu supprimé d'un document, et <ins> marque le contenu inséré. Bien que leur apparence par défaut soit généralement du texte barré et du texte souligné, leur principal objectif est de transmettre la signification d'un changement ; ils ne gèrent pas automatiquement les versions du document ni l'historique de l'édition.

Exemple complet : montrer le contenu supprimé et inséré ensemble

L'annonce de programme suivante est un exemple pratique. Enregistrez-la sous changes.html et ouvrez-la dans un navigateur pour voir à la fois les anciennes et nouvelles valeurs. La date et la raison apparaissent également en texte visible afin que les lecteurs puissent comprendre le changement même lorsque les couleurs ou les lignes sont difficiles à distinguer.

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Exemple de changement d’horaire</title>
</head>
<body>
  <h1>Réunion d’exercice : changement d’horaire</h1>
  <p>Heure de début:
    <del datetime="2026-10-30" cite="#reason">10:00</del>
    <ins datetime="2026-10-30" cite="#reason">11:00</ins>
  </p>
  <p>L’heure de début était 10:00 ; elle est désormais fixée à 11:00.</p>
  <p id="reason">Le 30 octobre 2026, l’horaire a été modifié pour permettre davantage de préparation.</p>
</body>
</html>

Avec les styles par défaut typiques, 10:00 est barré et 11:00 est souligné. Le CSS peut modifier leur apparence. Appliquer del n'efface pas le texte original des données, donc ne l'utilisez pas pour masquer des mots de passe, des informations personnelles ou d'autres contenus qui ne doivent pas être publics.

Rôle des attributs datetime et cite

L'attribut optionnel datetime enregistre la date, ou la date et l'heure, à laquelle le changement a été effectué. L'exemple 2026-10-30 est une date au format année-mois-jour. Si vous avez besoin d'une heure précise, vous pouvez inclure un décalage horaire explicite, comme dans 2026-10-30T09:00:00+09:00. Ajouter une date ne planifie pas une publication et ne fait pas changer le document automatiquement à ce moment-là.

L'attribut cite spécifie l'URL d'une ressource expliquant le changement. L'exemple utilise #reason pour pointer vers un paragraphe explicatif dans le même document. L'attribut n'affiche pas automatiquement une explication ou un lien cliquable, il faut donc inclure toute raison et date nécessaire dans le texte visible également.

Distinguer les modifications de document des lignes décoratives

Utilisez del et ins pour représenter les modifications apportées à un document. Pour un texte barré indiquant une information qui n'est plus exacte ou pertinente, considérez également la signification de <s>. Utilisez le CSS text-decoration pour des lignes purement décoratives. Une apparence visuelle identique n'implique pas une signification identique.

Les lecteurs d'écran peuvent ne pas annoncer chaque limite de suppression ou d'insertion avec leurs paramètres par défaut. Pour un changement important, expliquez les anciennes et nouvelles valeurs dans une phrase, comme dans l'exemple. Ne distinguez pas les deux états uniquement par la couleur, et indiquez clairement quelle information est actuellement valide. Les références MDN de del et MDN de ins décrivent les éléments et leurs attributs.