L'élément HTML <u> permet d'afficher un fragment de texte qui est annoté avec des éléments non textuels. Par défaut, le contenu de l'élément est souligné. Cela pourra par exemple être le cas pour marquer un texte comme étant un nom propre chinois, ou pour marquer un texte qui a été mal orthographié.

Attention ! Cet élément était auparavant appelé underline pour les anciennes versions des spécifications HTML. Si on souhaite simplement souligner du texte, il ne faudra pas utiliser cet élément mais la propriété CSS text-decoration avec la valeur "underline".

Catégories de contenu Contenu de flux, contenu phrasé, contenu tangible.
Contenu autorisé Contenu phrasé.
Omission de balises Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires
Parents autorisés Tout élément qui accepte du contenu phrasé.
Rôles ARIA autorisés Tous les rôles sont autorisés.
Interface DOM HTMLElement

Attributs

Cet élément inclut uniquement les attributs universels.

Notes d'utilisation

Étant seulement un élément de mise en forme, l'élément <u> a été déprécié en HTML 4 et XHTML 1. Il a été ré-introduit en HTML5 avec une autre signification : le contenu de l'élément est annoté avec une annotation non-textuelle.

La spécification rappelle que dans la majorité des cas, d'autres éléments que <u> doivent être utilisés.

Note : Attention à la mise en forme par défaut d'un élément <u> qui le souligne. Cela peut être source de confusion entre un tel texte et un lien hypertexte (également souligné par défaut).

Cas d'utilisation

L'élément <u> peut être utilisé afin d'indiquer des erreurs d'orthographe ou de grammaire, afin d'indiquer des noms propres au sein d'un texte écrit en chinois ou afin d'annoter un texte de façon visuelle.

L'élément <u> ne doit pas être utilisé afin de simplement souligner un texte ou afin d'indiquer le titre d'une œuvre.

Autres éléments pouvant être utilisés

Dans la plupart des cas, il faudra utiliser un autre élément que <u> :

  • <em> afin d'indiquer une emphase
  • <b> afin d'indiquer une attention particulière
  • <mark> afin de marquer certains mots-clés ou phrases
  • <strong> afin d'indiquer que le texte a une importance particulière
  • <cite> afin d'indiquer le titre d'une œuvre ou d'une publication
  • <i> afin d'indiquer un terme technique, des noms de navires, des pensées ou des translitérations au sein d'un texte occidental.

Afin de fournir une annotation textuelle, on pourra utiliser l'élément <ruby>.

Afin de modifier la mise en forme, sans apporter de modification sémantique, on utilisera la propriété text-decoration avec la valeur "underline".

Exemples

Indiquer une erreur d'orthographe

Dans cet exemple, on utilise <u> et des règles CSS pour afficher un paragraphe qui contient une coquille. L'erreur est indiquée avec une ligne ondulée rouge sous le texte.

HTML

<p>
  Ce paragraphe contient un mot mal
  <u class="spelling">rothografié</u>.
</p>

CSS

u.spelling {
  text-decoration: red wavy underline;
}

Résultat

Éviter <u>

La plupart du temps, ce n'est pas l'élément <u> qu'il faut utiliser. Voici quelques exemples de ces cas et les méthodes à privilégier.

Souligner pour la simple mise en forme

Pour souligner du texte sans que cela ait une quelconque portée sémantique, on utilisera un élément <span> qu'on mettra en forme avec la propriété CSS  text-decoration et la valeur "underline" :

HTML
<span class="underline">Le plat du jour</span>
<br>
Soupe de potiron avec un soupçon de noix de muscade
CSS
.underline {
  text-decoration: underline;
}
Résultat

Indiquer le titre d'un livre

Les titres de livres doivent être indiqués avec un élément <cite> et non avec <u> ou <i>.

HTML
<p>
  Nous avons lu <cite>La Horde du Contrevent</cite>
  au cours du premier trimestre.
</p>
Résultat avec la mise en forme par défaut

On notera que, par défaut, un élément <cite> est affiché en italique. Ceci peut être modifié grâce à CSS :

cite {
  font-style: normal;
  text-decoration: underline;
}
Résultat

Spécifications

Spécification État Commentaires
HTML Living Standard
La définition de '<u>' dans cette spécification.
Standard évolutif  
HTML5
La définition de '<u>' dans cette spécification.
Recommendation  
HTML 4.01 Specification
La définition de '<b>' dans cette spécification.
Recommendation  

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet OuiEdge Support complet OuiFirefox Support complet 1
Notes
Support complet 1
Notes
Notes Before Firefox 4, this element implemented the HTMLSpanElement interface instead of the standard HTMLElement interface.
IE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui

Légende

Support complet  
Support complet
Voir les notes d'implémentation.
Voir les notes d'implémentation.

Voir aussi

  • Les éléments <span>, <i>, <em><b> et <cite> qui, selon les cas, peuvent être utilisés à la place de <u>.
  • La propriété CSS text-decoration qui permet d'obtenir un effet stylistique semblable à la mise en forme par défaut d'un élément <u>.

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, marie-ototoi, ksad, tregagnon
Dernière mise à jour par : SphinxKnight,