Etiqueta u de HTML - Aprende HTML

La etiqueta HTML  representa un fragmento de texto en línea con una anotación no articulada y no textual. Se trata de una definición deliberadamente amplia: marca texto que debe destacarse por una razón que no encaja en ningún otro elemento, pero sin indicar por qué en el propio texto. Los navegadores representan esa anotación con un subrayado por defecto, pero el subrayado es solo una señal visual, no el objetivo del elemento.

Existe un malentendido común que vale la pena aclarar: en HTML5, la etiqueta  no está obsoleta y no significa simplemente "subrayar esto." Fue redefinida y dejó atrás su antiguo significado puramente presentacional de HTML 4. Si solo deseas un subrayado por razones de estilo, eso corresponde a CSS, no a .

Los dos casos de uso canónicos de la especificación HTML son:

Marcar una palabra mal escrita, de la misma manera que un corrector ortográfico dibuja una línea ondulada debajo.
Marcar un nombre propio en texto chino (la marca de nombre propio, una convención de anotación en la tipografía china).

En aplicaciones modernas, el lugar más legítimo para usar  es un editor de texto enriquecido que necesite registrar una anotación de corrección ortográfica o de nombre propio como marcado semántico en lugar de como estilo.

Advertencia

El texto subrayado que no es un enlace se confunde fácilmente con un hipervínculo. La mayoría de los usuarios interpreta los subrayados como "esto es clicable." Usa  solo cuando realmente quieras indicar una anotación no textual, y considera cambiar su estilo (por ejemplo, con un subrayado punteado u ondulado) para que no parezca un enlace. Nunca subrayés texto solo para dar énfasis — usa  o  para eso. Para subrayados puramente decorativos, usa la propiedad CSS text-decoration en su lugar.

En la mayoría de las situaciones, un elemento diferente y más específico comunica mejor tu intención que :

 para énfasis de entonación,
 para texto de gran importancia,
 para resaltar frases o palabras clave relevantes,
<ins> para texto que ha sido insertado en un documento,
 para llamar la atención sin transmitir importancia,
<cite> para el título de una obra citada,
 para términos técnicos, frases en idiomas extranjeros o pensamientos.

Si deseas agregar una anotación textual (como una guía de pronunciación), usa la etiqueta <ruby> en su lugar.

Sintaxis

El elemento  va en pares. El contenido anotado se escribe entre las etiquetas de apertura () y cierre ().

Ejemplo: marcar una palabra mal escrita

Un uso habitual y alineado con la especificación es señalar un error ortográfico. Una class permite rediseñar el subrayado predeterminado como una línea roja ondulada, de la manera en que los editores muestran los errores de ortografía:

<!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

Ejemplo: anotar un nombre propio en texto chino

El otro uso canónico es la marca de nombre propio en chino, donde  anota una palabra como nombre propio:

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

Result

Ejemplo: el renderizado predeterminado

Por defecto, los navegadores subrayan el contenido de un elemento :

<!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>

Pruébalo tú mismo »

Ejemplo de la propiedad CSS text-decoration:

Si solo deseas un subrayado para estilo visual, usa CSS en lugar de :

<!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>

Pruébalo tú mismo »

Atributos

La etiqueta  admite todos los atributos globales y los atributos de eventos.

Práctica

¿Qué representa la etiqueta u de HTML en HTML5?

Un fragmento de texto con una anotación no articulada y no textual, como una palabra mal escrita.Texto que simplemente debe subrayarse para estilo visual.Texto de gran importancia.Texto enfatizado que cambia el significado de una oración.Un elemento obsoleto que los navegadores ya no admiten.