Referencia de etiquetas

Etiqueta u en HTML: anotaciones y texto subrayado

La etiqueta  representa una anotación no textual expresada visualmente, como señalar un error ortográfico dentro de una frase. Úsala al revisar un borrador para distinguir la palabra que necesita corrección. Aunque suele aparecer subrayada, su función es marcar esa anotación; para subrayar solo por diseño, utiliza CSS.

Ejemplo mínimo de u

<p>Revisa la palabra <u class="error">haver</u>: debería ser «haber».</p>

Coloca el fragmento dentro del <body> de un documento HTML y ábrelo en el navegador. Verás un párrafo con «haver» normalmente subrayado. La palabra está escrita mal de forma deliberada:  identifica la anotación y la frase explica la corrección, incluso cuando no se ve el subrayado.

class="error" da un nombre al uso del elemento; por sí sola no cambia su apariencia ni comprueba la ortografía. Si quitas  y , conservas las palabras y su explicación, pero eliminas la anotación del marcado y su subrayado habitual. Si corriges «haver» por «haber», retira también : ya no hay un error que señalar.

Sintaxis y contexto válido

La apertura  y el cierre  son necesarios. Puede usarse donde se admite contenido de frase y contener ese mismo tipo de contenido: texto y elementos como  o . Un párrafo es un contexto apropiado. No encierres dentro de  estructuras como otro , una lista o una sección.

El HTML Living Standard define el significado y el modelo de contenido de u. El elemento sigue vigente: la asociación histórica con el subrayado no lo convierte en una etiqueta obsoleta.

Una anotación justifica  cuando hay algo concreto que señalar sobre ese fragmento. No envuelvas una frase ordinaria únicamente porque quieras una línea debajo. El subrayado tampoco crea un enlace:  no tiene destino, no recibe foco por defecto y no ofrece navegación al pulsar Intro.

U, ins, a y el subrayado con CSS

Elige según lo que significa el texto:

Anotación de un error:  marca la palabra del borrador que estás revisando.
Contenido añadido en una revisión: <ins> marca la inserción. Puede verse subrayado, pero indica un cambio editorial, no un error ortográfico. Así lo define el estándar de ins.
Navegación a un destino: <a href="…"> crea el enlace real.
Subrayado decorativo: aplica text-decoration al elemento adecuado. Si necesitas agrupar unas palabras sin añadir significado, puedes usar .

Por ejemplo, este rótulo recibe una decoración, sin marcar una corrección ni una inserción:

<p><span class="rotulo">Taller de escritura</span></p>

.rotulo {
  text-decoration: underline;
}

La propiedad CSS text-decoration controla las líneas decorativas. Cambiarla no convierte un  en  ni altera el significado de <ins>. Evita decorar texto ordinario de una manera que invite a pulsarlo como si fuese un enlace.

Caso práctico: revisar una frase

Guarda el siguiente documento como revision.html con codificación UTF-8 y ábrelo directamente en el navegador. Incluye todo el CSS necesario y un enlace a un párrafo del propio documento; no necesita servidor, archivos externos ni JavaScript.

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Revisión de una frase</title>
  <style>
    body {
      max-width: 40rem;
      margin: 2rem auto;
      padding: 0 1rem;
      color: #202124;
      background: #fff;
      font: 1.125rem/1.6 system-ui, sans-serif;
    }

    .error {
      text-decoration: underline wavy #b42318;
    }

    ins {
      text-decoration: underline solid #26733f;
    }

    a {
      color: #0645ad;
    }

    a:focus {
      outline: 3px solid #0645ad;
      outline-offset: 4px;
    }
  </style>
</head>
<body>
  <h1>Revisión de una frase</h1>
  <p>Borrador: «El jardín está <u class="error">ermoso</u>».</p>
  <p id="correccion">
    Corrección: «ermoso» es un error ortográfico; escribe «hermoso».
  </p>
  <p>Versión ampliada: «El jardín está <ins>muy</ins> hermoso».</p>
  <p>Se añadió la palabra «muy» a la versión corregida.</p>
  <p><a href="#correccion">Ir a la corrección ortográfica</a>.</p>
</body>
</html>

Verás «ermoso» con una línea ondulada roja y «muy» con una línea recta verde. El enlace tendrá el subrayado habitual y color azul. Las frases «Corrección» y «Se añadió» explican qué significa cada marca; el resultado no depende solo del color o de la forma de las líneas. text-decoration-style documenta el valor wavy que dibuja la onda.

Prueba estas variaciones:

Pulsa Tab para enfocar el enlace: aparece un contorno. Pulsa Intro para ir a #correccion. La palabra con  no se incluye en ese recorrido como un control.
Cambia wavy por solid: la anotación permanece y su línea pasa a ser recta. El texto de la corrección sigue siendo necesario para reconocer el error.
Quita únicamente class="error":  conserva su significado y vuelve a su presentación habitual. La clase selecciona el estilo; no añade una semántica nueva.
Sustituye ermoso por ermoso: desaparecen la anotación y su decoración. El contenido de <ins> y el enlace conservan sus funciones.
Retira el bloque <style>: seguirás viendo todos los párrafos y podrás usar el enlace.  e <ins> suelen compartir entonces un subrayado recto. Sin JavaScript el documento funciona igual.

Atributos y accesibilidad

 no tiene atributos específicos vigentes. Admite atributos globales: class selecciona el estilo, id identifica un elemento de forma única y lang declara el idioma de un fragmento cuando difiere del contexto. En el ejemplo, lang="es" en <html> establece el idioma heredado; id="correccion" está en el párrafo al que apunta el enlace.

text-decoration es una propiedad CSS, no un atributo de . Si accedieras al elemento desde JavaScript, className sería una propiedad del DOM; el ejemplo no necesita scripts para escribir ni interpretar la anotación.

No esperes que un lector de pantalla anuncie siempre «error ortográfico» al encontrar . El mapeo accesible de u no garantiza ese mensaje. Escribe la palabra correcta y la explicación en texto visible. Tampoco las sustituyas por un title que solo se descubra al pasar el puntero.  no corrige ni detecta errores automáticamente.

Errores frecuentes y dudas

¿U está obsoleta?

No. Su significado actual es una anotación no textual representada visualmente. La referencia de MDN sobre u distingue ese uso del antiguo propósito meramente visual.

¿Cómo subrayo solo por diseño?

Usa text-decoration: underline sobre un elemento apropiado, como el  del rótulo anterior. Si buscas énfasis o importancia, elige respectivamente  o  antes de decidir su apariencia.

¿Por qué no aparece la onda o el subrayado?

Comprueba que la clase coincide con el selector, que el CSS se carga y que otra regla no reemplaza text-decoration. Inspecciona también el valor calculado de text-decoration-style. Una regla text-decoration: none puede ocultar la línea sin eliminar el significado de ; quitar el elemento sí elimina la anotación del marcado.

Compatibilidad y fuentes

 está ampliamente disponible en los navegadores actuales, según la compatibilidad de MDN. El soporte de la onda es una cuestión separada de CSS: consulta la compatibilidad de text-decoration-style. La explicación textual permite entender la corrección aunque la decoración cambie o no se aplique. Fuentes revisadas el 4 de octubre de 2026.