Balise HTML u - Apprendre HTML

La balise HTML  représente un fragment de texte en ligne avec une annotation non articulée et non textuelle. C'est une définition volontairement large : elle marque un texte qui doit être distingué pour une raison qui ne correspond à aucun autre élément, sans pour autant expliquer pourquoi dans le texte lui-même. Par défaut, le navigateur rend cette annotation sous la forme d'un soulignement — mais le soulignement n'est qu'un repère visuel, ce n'est pas l'objet de l'élément.

C'est un malentendu courant qu'il convient de corriger : en HTML5, la balise  n'est pas obsolète, et elle ne signifie pas simplement « souligner ce texte ». Elle a été redéfinie par rapport à son ancienne signification purement présentationnelle en HTML 4. Si vous souhaitez simplement un soulignement pour le style, c'est un travail pour CSS, pas pour .

Les deux cas d'usage canoniques définis par la spécification HTML sont :

Marquer un mot mal orthographié, à la façon dont un correcteur orthographique trace une ligne ondulée dessous.
Marquer un nom propre dans un texte chinois (la marque de nom propre, une convention d'annotation dans la typographie chinoise).

Dans les applications modernes, l'endroit le plus légitime pour utiliser  est un éditeur de texte enrichi qui doit enregistrer une annotation d'orthographe ou de nom propre en tant que balisage sémantique plutôt que stylistique.

Avertissement

Le texte souligné sans lien est souvent confondu avec un hyperlien. La plupart des utilisateurs interprètent un soulignement comme « ceci est cliquable ». N'utilisez  que lorsque vous souhaitez réellement une annotation non textuelle, et envisagez de le restyliser (par exemple avec un soulignement en pointillés ou ondulé) pour qu'il ne ressemble pas à un lien. Ne soulignez jamais un texte uniquement pour mettre en évidence — utilisez  ou  à la place. Pour les soulignements purement décoratifs, utilisez la propriété CSS text-decoration à la place.

Dans la plupart des situations, un élément différent et plus spécifique communique mieux votre intention que  :

 pour l'emphase accentuée,
 pour un texte d'importance majeure,
 pour mettre en évidence des phrases ou des mots-clés pertinents,
<ins> pour du texte inséré dans un document,
 pour attirer l'attention sans exprimer d'importance,
<cite> pour le titre d'une œuvre citée,
 pour les termes techniques, les expressions étrangères ou les pensées.

Si vous souhaitez ajouter une annotation textuelle (comme un guide de prononciation), utilisez plutôt la balise <ruby>.

Syntaxe

L'élément  fonctionne par paires. Le contenu annoté est écrit entre les balises ouvrante () et fermante ().

Exemple : marquer un mot mal orthographié

Un usage courant et conforme à la spécification consiste à signaler une erreur orthographique. Une class permet de restyliser le soulignement par défaut en une ligne ondulée rouge, à la façon dont les éditeurs indiquent les fautes d'orthographe :

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .spelling-error {
        text-decoration: red wavy underline;
      }
    </style>
  </head>
  <body>
    <p>The word <u class="spelling-error">teh</u> is misspelled.</p>
  </body>
</html>

Result

Exemple : annoter un nom propre dans un texte chinois

L'autre usage canonique est la marque de nom propre en chinois, où  annote un mot en tant que nom propre :

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
  </head>
  <body>
    <p><u>李白</u>是著名的诗人。</p>
  </body>
</html>

Result

Exemple : le rendu par défaut

Par défaut, les navigateurs soulignent le contenu d'un élément  :

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
  </head>
  <body>
    <p>Here we used <u>the &lt;u&gt; element</u>.</p>
  </body>
</html>

Essayez vous-même »

Exemple avec la propriété CSS text-decoration :

Si vous souhaitez uniquement un soulignement pour le style visuel, utilisez CSS plutôt que  :

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document.</title>
    <style>
      span {
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <p>Here we used <span> CSS property text-decoration:underline</span>.</p>
  </body>
</html>

Essayez vous-même »

Attributs

La balise  prend en charge tous les attributs globaux et les attributs d'événements.

Pratique

Que représente la balise HTML u en HTML5 ?

Un fragment de texte avec une annotation non articulée et non textuelle, comme un mot mal orthographié.Du texte qui doit simplement être souligné pour le style visuel.Du texte d'une grande importance.Du texte mis en emphase qui change le sens d'une phrase.Un élément obsolète que les navigateurs ne prennent plus en charge.