<del> : l'élément de texte supprimé

Exemple interactif

<blockquote>
  Il n'y a <del>rien</del> <ins>aucun code</ins> de bon ou de mauvais, mais
  <del>penser</del> <ins>l'exécuter</ins> le rend ainsi.
</blockquote>

del {
  text-decoration: line-through;
  background-color: #ffbbbb;
  color: #555555;
}

ins {
  text-decoration: none;
  background-color: #d4fcbc;
}

blockquote {
  padding-left: 15px;
  border-left: 3px solid #d7d7db;
  font-size: 1rem;
}

Cet élément est souvent (mais pas nécessairement) rendu en appliquant un style barré au texte.

Attributs

Cet élément inclut les attributs universels.

cite

Une URL pour une ressource expliquant le changement (cela peut être un procès verbal d'une réunion par exemple).

datetime

Cet attribut indique l'heure et la date du changement et doit être une chaîne de caractères représentant une date valide, avec une heure facultative. Si la valeur ne peut pas être analysée comme telle, l'élément n'aura pas d'information temporelle associée. Voir l'article sur les formats pour la représentation d'une date seule ou d'une date avec une heure.

Accessibilité

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

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

del::before {
  content: " [Début de la suppression]";
}

del::after {
  content: " [Fin de la suppression] ";
}

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é supprimé.

• Note courte sur la façon de laisser votre marque (plus accessible) | The Paciello Group ^(angl.)
• Ajustement des styles de niveau texte | Adrian Roselli ^(angl.)

Exemples

<p><del>Ce texte a été supprimé.</del> mais pas celui-ci</p>
<del><p>Ce paragraphe a été supprimé.</p></del>

Résultat

Résumé technique

Spécifications

Compatibilité des navigateurs

Voir aussi

• L'élément <ins> permet de représenter les insertions dans un texte
• L'élément <s> permet de représenter des portions de texte qui ne sont plus pertinentes (elles sont généralement barrées)