<u> : l'élément d'annotation non textuelle
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
L'élément HTML <u> représente une portion de texte en ligne devant être rendue de manière à indiquer qu'elle comporte une annotation non textuelle. Par défaut, il est affiché avec un unique soulignement continu, mais cela peut être modifié via CSS.
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".
Exemple interactif
<p>
Vous pouvez utiliser cet élément pour signaler des fautes d'orthographe, par
exemple <u>épèlé</u>, afin que le rédacteur puisse les <u>corig</u>.
</p>
p {
margin: 0;
}
u {
text-decoration: red wavy underline;
}
Voir la section Notes d'utilisation pour plus de détails sur le moment où il est approprié d'utiliser <u> et quand ce n'est pas le cas.
Attributs
Cet élément inclut uniquement les attributs universels.
Notes d'utilisation
Comme d'autres éléments purement liés à la mise en forme, l'élément HTML d'origine <u> (soulignement) a été déprécié dans HTML 4 ; cependant, <u> a été réintroduit dans HTML5 avec une nouvelle signification sémantique : marquer un texte comme ayant une annotation non textuelle appliquée.
Note :
Évitez d'utiliser l'élément <u> avec sa mise en forme par défaut (texte souligné) d'une manière qui pourrait être confondue avec un lien hypertexte, également souligné par défaut.
Cas d'utilisation
Les cas d'utilisation valides de l'élément <u> incluent l'annotation des erreurs d'orthographe, l'application d'une marque de nom propre (angl.) pour indiquer les noms propres dans un texte chinois, et d'autres formes d'annotation.
Vous ne devez pas utiliser <u> pour souligner du texte à des fins de présentation, ni pour indiquer des titres de livres.
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.
Pour fournir des annotations textuelles (par opposition aux annotations non textuelles créées avec <u>), utilisez l'élément <ruby>.
Pour appliquer une apparence soulignée sans signification sémantique, utilisez la valeur underline de la propriété CSS text-decoration.
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 pour 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
Résumé technique
| 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ôle ARIA implicite |
generic
|
| Rôles ARIA autorisés | Tous les rôles sont autorisés. |
| Interface DOM | HTMLElement |
Spécifications
| Specification |
|---|
| HTML # the-u-element |