Balise HTML <del>
La balise <del> marque le texte supprimé d'un document. Attributs cite et datetime, association avec <ins>, accessibilité et exemples.
La balise <del> marque une portion de texte qui a été supprimée d'un document. C'est un élément sémantique : il ne se contente pas de barrer le texte, il indique que le contenu a été intentionnellement retiré dans le cadre d'une modification. Les navigateurs l'affichent avec un texte barré par défaut, mais le sens est porté par le balisage, pas par le style.
Utilisez <del> chaque fois que vous souhaitez afficher un historique des modifications, par exemple :
- Suivi des modifications — conserver le texte original visible tout en montrant qu'il a été supprimé (journaux de modifications, wikis, documents collaboratifs).
- Réductions de prix — barrer l'ancien prix et afficher le nouveau à côté.
- Corrections — préserver une erreur dans l'historique (une correction publiée) plutôt que de la supprimer silencieusement.
<del> est presque toujours associé à la balise <ins>, qui marque le texte nouvellement inséré et est souligné par défaut. Ensemble, ils expriment « ceci a été remplacé par cela ».
Quand NE PAS utiliser <del>
Si vous souhaitez uniquement un effet de texte barré sans signification de « contenu modifié », <del> est le mauvais outil :
- Pour du contenu qui n'est plus exact ou pertinent (mais qui n'a pas été supprimé dans le cadre d'une modification) — comme un produit épuisé ou une offre expirée — utilisez la balise
<s>. - Pour un texte barré purement visuel sans intention sémantique, utilisez la propriété CSS text-decoration avec la valeur
line-through.text-decoration: line-throughest purement présentationnel et est ignoré par les technologies d'assistance, alors que<del>leur transmet une signification.
En résumé : utilisez <del> quand le texte barré signifie « supprimé lors d'une modification », et utilisez CSS quand vous avez simplement besoin de la ligne.
Vous pouvez librement restyliser un élément <del> avec CSS — par exemple changer sa couleur ou remplacer le texte barré par défaut — sans en perdre la signification, car la sémantique est dans la balise, pas dans le style.
Accessibilité
Les lecteurs d'écran ne traitent pas tous <del> de la même manière. Par défaut, NVDA et JAWS lisent généralement le texte supprimé de manière intégrée, comme n'importe quel autre texte, et n'annoncent pas qu'il a été supprimé, à moins que l'utilisateur n'active le paramètre de verbosité approprié — ainsi, un utilisateur voyant voit le texte barré tandis qu'un utilisateur de lecteur d'écran peut ne rien entendre concernant la modification.
Lorsque la suppression elle-même est importante pour comprendre le contenu (par exemple, la différence entre un ancien prix et un nouveau), ajoutez un indicateur explicite plutôt que de vous fier à la ligne visuelle :
<p>
Price:
<del><span class="visually-hidden">Old price: </span>$99</del>
<ins><span class="visually-hidden">New price: </span>$79</ins>
</p>Évitez d'essayer d'injecter du texte « supprimé » via la propriété CSS content — le contenu généré est exposé de manière incohérente aux technologies d'assistance. Préférez du texte visible, un aria-label ou un aria-describedby sur l'élément lorsqu'un contexte supplémentaire est nécessaire.
Syntaxe
La balise <del> vient par paires. Le contenu est écrit entre les balises ouvrante (<del>) et fermante (</del>).
Exemple de la balise HTML <del>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>My favorite color is <del>green</del> <ins>blue</ins>!</p>
</body>
</html>Exemple concret : une réduction de prix
L'utilisation la plus courante de <del> associé à <ins> est d'afficher un ancien prix à côté d'un nouveau :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Special offer: <del>$99</del> <ins>$79</ins></p>
</body>
</html>L'ancien prix reste sur la page (barré) et le nouveau prix est marqué comme inséré, de sorte que le résultat visuel et le balisage racontent la même histoire.
Exemple de la balise HTML <del> avec l'attribut cite
L'attribut cite contient une URL pointant vers un document qui explique pourquoi le texte a été modifié — une entrée de journal des modifications, un diff, ou un lien vers un gestionnaire de tickets, et non le contenu supprimé lui-même :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>
The release date is
<del cite="https://example.com/changelog#2023-10-25">October 25</del>
<ins cite="https://example.com/changelog#2023-11-02">November 2</ins>.
</p>
</body>
</html>Exemple de la balise HTML <del> avec l'attribut datetime
L'attribut datetime enregistre quand la suppression a eu lieu sous une forme lisible par machine :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>The <del datetime="2023-10-25T14:30:00Z">old text</del> was replaced with new content.</p>
</body>
</html>Le format datetime
La valeur datetime suit le format YYYY-MM-DDThh:mm:ssTZD :
YYYY-MM-DD— la date (année, mois, jour). Cette partie est obligatoire.T— un séparateur littéral entre la date et l'heure.hh:mm:ss— l'heure. La partie heure dans son ensemble est facultative — une date simple est valide.TZD— le Designateur de Fuseau Horaire : soitZpour UTC, soit un décalage tel que+02:00/-05:00.
Valeurs valides :
2023-10-25 <!-- date only -->
2023-10-25T14:30 <!-- date + time, no seconds -->
2023-10-25T14:30:00Z <!-- UTC -->
2023-10-25T14:30:00+02:00 <!-- with a time-zone offset -->Valeurs invalides :
25-10-2023 <!-- wrong order; must be YYYY-MM-DD -->
2023/10/25 <!-- wrong separators; must use hyphens -->
2023-10-25 14:30:00 <!-- space instead of the "T" separator -->Attributs
| Attribut | Valeur | Description |
|---|---|---|
| cite | URL | URL d'un document (journal des modifications, diff, ticket) qui explique pourquoi le texte a été modifié ou supprimé. |
| datetime | YYYY-MM-DDThh:mm:ssTZD | La date (et l'heure facultative) à laquelle le texte a été supprimé. |
La balise <del> utilise également les Attributs globaux et les Attributs d'événement.
Balises associées
<ins>— marque le texte inséré ; le partenaire naturel de<del>.<s>— marque le texte qui n'est plus exact ou pertinent (pas supprimé lors d'une modification).