Quelle est la différence entre et ?

marque un texte qui n'est plus pertinent ou correct mais qu'on garde pour le contexte, comme un prix barré. marque un texte supprimé du document, souvent à côté d'un qui montre ce qui l'a remplacé, et peut porter les attributs datetime et cite.

Docs HTML exécutables : Souligner, barrer

Q: Comment souligner un texte en HTML ?

Entourez-le de , ou appliquez text-decoration: underline en CSS. N'utilisez que pour son sens précis (comme signaler un mot mal orthographié) ; pour un soulignement purement visuel, utilisez le CSS sur un ou sur l'élément lui-même.

Q: Comment barrer un texte en HTML ?

Utilisez pour un texte qui n'est plus exact, comme un ancien prix, et pour un texte supprimé lors d'une modification. Les deux tracent une ligne à travers le texte. En CSS, text-decoration: line-through fait la même chose visuellement.

Q: La balise est-elle obsolète ?

Non. a été dépréciée en HTML 4 mais est revenue en HTML5 avec un nouveau sens : un texte avec une annotation non textuelle, comme une faute d'orthographe ou un nom propre dans un texte chinois. Elle est valide, mais rarement le bon choix.

Souligner et barrer en HTML : balises u, ins, s et del

Soulignez du texte en HTML avec ou la propriété CSS text-decoration, et barrez-le avec <s> ou <del>. Découvrez le sens de chaque balise, comment <ins> et <del> marquent des modifications, et pourquoi souligner un texte qui n'est pas un lien déroute les lecteurs.

Cette page contient des éditeurs exécutables. Modifiez, exécutez et voyez la sortie instantanément.

Par Kevin Spektor, Cofondateur et CTO

Publié le Sep 24, 2026

Comment souligner un texte en HTML

Il y a deux façons : la balise , ou la propriété CSS text-decoration: underline. Les deux tracent la même ligne :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Underline</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    .underline { text-decoration: underline; }
  </style>
</head>
<body>
  <p>With the tag: <u>underlined text</u></p>
  <p>With CSS: <span class="underline">underlined text</span></p>
  <p>A link, for comparison: <a href="#">underlined by default</a></p>
</body>
</html>

Le problème de tout soulignement, c'est la troisième ligne : les lecteurs s'attendent à ce qu'un texte souligné soit un lien, et cliquent dessus. Ne soulignez un texte simple que s'il y a une raison claire.

Le sens de la balise u

 n'est pas un bouton « souligner » générique. En HTML actuel, elle désigne un texte avec une annotation non explicite : une marque qui dit « il y a quelque chose de particulier ici » sans dire quoi. Les vrais usages courants :

signaler une faute d'orthographe (comme le fait un traitement de texte, souvent avec une ligne rouge ondulée),
marquer les noms propres dans un texte chinois, qui est une convention typographique là-bas.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>u for spelling</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    u.spelling { text-decoration: underline wavy #dc2626; }
  </style>
</head>
<body>
  <p>Check this sentence: I <u class="spelling">recieved</u> the package.</p>
</body>
</html>

Pour la mise en valeur, utilisez  ou  (voir le gras), et pour les titres de livres, <cite>. Si vous voulez seulement l'apparence, utilisez le CSS.

Barrer : s et del

HTML a deux balises qui tracent une ligne à travers le texte, et elles ne veulent pas dire la même chose :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Strikethrough</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    .new { color: #16a34a; font-weight: bold; }
  </style>
</head>
<body>
  <p>Price: <s>$49</s> <span class="new">$29</span></p>
  <ul>
    <li><del>Buy milk</del></li>
    <li>Call the bank</li>
  </ul>
</body>
</html>

Balise	Signification	Usage typique
`<s>`	N'est plus exact ou pertinent, gardé pour le contexte	Ancien prix, type de billet épuisé
`<del>`	Supprimé du document	Modifications, journaux des changements, tâches terminées d'une liste

Marquer des modifications avec ins et del

<ins> est le partenaire de <del> : il marque un texte ajouté. Les navigateurs le soulignent par défaut. Les deux acceptent datetime (le moment du changement) et cite (une URL qui l'explique) :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ins and del</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    del { color: #dc2626; background: #fee2e2; }
    ins { color: #16a34a; background: #dcfce7; text-decoration: none; }
  </style>
</head>
<body>
  <p>
    The meeting is on
    <del datetime="2026-09-20">Monday</del>
    <ins datetime="2026-09-21">Tuesday</ins>
    at 10:00.
  </p>
</body>
</html>

Ce style rouge et vert est l'apparence familière d'un diff. text-decoration: none sur ins retire le soulignement par défaut pour qu'il ne ressemble pas à un lien.

Souligner et barrer avec CSS

text-decoration gère la partie visuelle pour n'importe quel élément : elle accepte une couleur et un style, et text-decoration-thickness fixe l'épaisseur. Pour les lignes purement décoratives, c'est le bon outil :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>text-decoration</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 20px; }
    .brand { text-decoration: underline #2563eb; text-decoration-thickness: 3px; text-underline-offset: 4px; }
    .dotted { text-decoration: underline dotted #f59e0b; }
    .through { text-decoration: line-through #dc2626; text-decoration-thickness: 2px; }
    .over { text-decoration: overline; }
  </style>
</head>
<body>
  <p><span class="brand">thick blue underline</span></p>
  <p><span class="dotted">dotted underline</span></p>
  <p><span class="through">red line through</span></p>
  <p><span class="over">overline</span></p>
</body>
</html>

Retirer le soulignement des liens, le décalage du soulignement et les autres détails de text-decoration sont sur la page souligner en CSS.

Accessibilité

La prise en charge de <s>, <del> et <ins> par les lecteurs d'écran est inégale : certains les annoncent comme supprimés ou insérés, beaucoup les lisent comme du texte normal, si bien qu'un auditeur peut entendre « Prix 49 dollars 29 dollars » sans savoir lequel est le prix actuel. Quand la différence compte, dites-la aussi avec des mots, par exemple avec un texte masqué visuellement mais lu à voix haute, ou simplement « Avant 49 $, maintenant 29$ ».

Erreurs fréquentes

Souligner un texte qui n'est pas un lien. Les lecteurs essaieront de cliquer. Pour mettre en évidence, utilisez plutôt le gras, la couleur ou un fond.
Utiliser  pour mettre en valeur. Utilisez  ou .
Utiliser <strike>. Elle est obsolète. Utilisez <s>, <del> ou text-decoration: line-through.
Utiliser <s> pour un contenu supprimé dans l'historique d'un document. C'est le rôle de <del>, qui peut aussi enregistrer quand cela s'est produit.
Compter sur la ligne seule pour porter le sens. Beaucoup de lecteurs d'écran ne l'annoncent pas.

Questions fréquentes

Comment souligner un texte en HTML ?

Entourez-le de , ou appliquez text-decoration: underline en CSS. N'utilisez  que pour son sens précis (comme signaler un mot mal orthographié) ; pour un soulignement purement visuel, utilisez le CSS sur un  ou sur l'élément lui-même.

Comment barrer un texte en HTML ?

Utilisez <s> pour un texte qui n'est plus exact, comme un ancien prix, et <del> pour un texte supprimé lors d'une modification. Les deux tracent une ligne à travers le texte. En CSS, text-decoration: line-through fait la même chose visuellement.

La balise est-elle obsolète ?

Non.  a été dépréciée en HTML 4 mais est revenue en HTML5 avec un nouveau sens : un texte avec une annotation non textuelle, comme une faute d'orthographe ou un nom propre dans un texte chinois. Elle est valide, mais rarement le bon choix.

Qu'est devenue la balise <strike> ?

<strike> est obsolète. Les navigateurs l'affichent encore barrée, mais ce n'est pas du HTML valide. Utilisez <s> ou <del> selon le sens, ou text-decoration: line-through.

Quelle est la différence entre <s> et <del> ?

<s> marque un texte qui n'est plus pertinent ou correct mais qu'on garde pour le contexte, comme un prix barré. <del> marque un texte supprimé du document, souvent à côté d'un <ins> qui montre ce qui l'a remplacé, et peut porter les attributs datetime et cite.

Concepts liés