Tout savoir sur la balise <u> en HTML

La balise <u> appliquait historiquement une barre de soulignement (underline 🇺🇸) purement visuel.

Depuis HTML 5, elle possède une valeur sémantique : elle sert à marquer un texte non standard (par exemple un nom propre en langue étrangère, une erreur d’orthographe, un nom scientifique ou encore un terme).

Pour souligner simplement du texte pour la mise en forme, la bonne pratique est d’utiliser le CSS avec une propriété text-decoration: underline;. Réservez <u> aux cas où le soulignement porte un sens, comme la mention d’une orthographe incorrecte. 😉

Structure et syntaxe de la balise <u>

Structure et syntaxe de base

<u> est une balise conteneur (donc qui fonctionne par paire) :

• elle dispose d'une balise d’ouverture : <u>
• ainsi que d'une balise fermante : </u>

Voici sa syntaxe :

<u>[Texte souligné avec valeur sémantique]</u>

Exemple d’utilisation

<p>Le mot <u>believeme</u> est orthographié incorrectement ; on attend <em>believemy</em>.</p>

Le mot mal orthographié est souligné pour attirer l’attention sans confondre le soulignement décoratif et le soulignement sémantique.

Essayez par vous-même !

Attributs

<u> accepte les attributs classiques du HTML (class, id, style, title, etc.). Elle ne possède pas d’attributs spécifiques.

Différence avec d’autres balises similaires

• <em> : ajoute une emphase sémantique, italique par défaut.
• <i> : met aussi en italique mais sans aucune signification particulière (un peu comme <b> comparé à une balise <strong>).
• <strong> : indique une importance accrue, rendu en gras.

Bonnes pratiques

Utilisez <u> pour signaler quelque chose : erreurs d’orthographe, annotations de relecture, etc.

Pour un simple soulignement décoratif appliquez plutôt une classe CSS avec text-decoration: underline comme nous l'avons vu ensemble.

Surtout, ne combinez pas un <u> sémantique avec un lien : cela fait doublon et est totalement inutile.

La balise <u> n’est pas reconnue par les lecteurs d’écran comme emphase ; ne l’utilisez pas pour remplacer <em> ou <strong>.

Compatibilité des navigateurs

<u> est supportée par tous les navigateurs modernes :