La Etiqueta U

Se utiliza para subrayar texto, pero en HTML5 se redefine para marcar texto con una anotación no textual, como palabras mal escritas, nombres propios en idiomas orientales u otros casos específicos.

La etiqueta <u> en HTML se utiliza para subrayar texto, pero su uso ha evolucionado con el tiempo. Originalmente, se empleaba solo para aplicar un estilo visual de subrayado, pero en HTML5 se redefine para marcar texto con una anotación no textual, como palabras mal escritas, nombres propios en idiomas orientales u otros casos específicos. Aquí te explicamos cómo implementarla correctamente.

Sintaxis básica

La estructura básica es:

<u>Texto subrayado</u>

Ejemplo:

<p>Este es un <u>texto subrayado</u> con la etiqueta &lt;u&gt;.</p>

Resultado:

Este es un texto subrayado con la etiqueta <ul>.

¿Cuándo usar <u>?

Según HTML5, <u> debe usarse en contextos específicos:

Anotaciones no textuales:

  • Palabras mal escritas (ejemplo: <u>grasias</u> en lugar de gracias).

  • Nombres propios en chino u otros idiomas que requieran subrayado.

Evitar uso estético:

Para estilos visuales, se recomienda usar CSS en lugar de <u>.

Diferencias clave

Etiqueta Propósito
<u> Subrayado con significado semántico (anotación no textual).
<ins> Indica texto insertado o añadido (como en una revisión).
CSS text-decoration: underline Subrayado puramente visual (uso recomendado para estilo).

Ejemplos prácticos

a) Marcar un error ortográfico

<p>Por favor, corrige la palabra: <u>recivir</u> (correcto: <i>recibir</i>).</p>

Resultado:

Por favor, corrige la palabra: <u>recivir</u> (correcto: recibir).

b) Nombre propio en chino

<p>El nombre <u lang="zh">北京</u> significa "Pekín".</p>

c) Uso incorrecto (evítalo)

<!-- No uses <u> solo para estilos -->
<p>Este es un <u>texto subrayado</u> sin significado semántico.</p>

Estilización con CSS

Para subrayados puramente visuales, usa CSS:

<p>Este es un <span style="text-decoration: underline;">texto subrayado con CSS</span>.</p>

Resultado:

Este es un <span style="text-decoration: underline;">texto subrayado con CSS</span>.

Accesibilidad

Confusión con enlaces: El subrayado puede asociarse a hipervínculos. Si usas <u>, asegúrate de que el contexto sea claro.

Lectores de pantalla: Algunos no anuncian <u>, pero es mejor evitar abusar de él.

Alternativa accesible:

<p>Error: <u aria-label="Palabra mal escrita: grasias">grasias</u>.</p>

Buenas prácticas

  1. Evita <u> para diseño: Usa CSS (text-decoration).

  2. Usa <u> solo en contextos semánticos: Errores ortográficos, anotaciones culturales.

  3. Combínalo con atributos como lang: Para claridad en nombres propios.

Ejemplo completo

<!DOCTYPE html>
<html lang="es">
<head>
  <style>
    .error {
      color: red;
      text-decoration: underline wavy red; /* Subrayado ondulado para errores */
    }
  </style>
</head>
<body>
  <p>
    En el siguiente texto hay un error:  
    <u class="error">grasias</u> (debe ser <em>gracias</em>).  
  </p>
</body>
</html>

Errores comunes

Subrayar texto sin razón semántica:

<p><u>Texto importante</u> que no es un error ni una anotación.</p>

Confundir <u> con <ins>:

<p>Versión antigua: <u>Texto eliminado</u>. <!-- Debe ser <del> --></p>

Conclusión

La etiqueta <u> en HTML5 tiene un uso semántico específico y no debe emplearse para estilos visuales arbitrarios.

Recuerda:

  • Úsala para marcar errores ortográficos, nombres propios en ciertos idiomas u anotaciones no textuales.

  • Prioriza CSS (text-decoration: underline) para diseño.

  • Considera la accesibilidad para no confundir a los usuarios.

¡Ahora puedes utilizar <u> de manera correcta y profesional en tus proyectos web!