¿Qué diferencia hay entre y ?

marca texto que ya no es relevante o correcto pero se conserva como contexto, como un precio tachado. marca texto que se eliminó del documento, a menudo junto a un que muestra qué lo reemplazó, y admite los atributos datetime y cite.

Docs ejecutables de HTML: Subrayado y tachado

Q: ¿Cómo subrayo texto en HTML?

Envuélvelo en , o aplica text-decoration: underline en el CSS. Usa solo para su significado concreto (como marcar una palabra mal escrita); para un subrayado puramente visual usa CSS en un o en el propio elemento.

Q: ¿Cómo tacho texto en HTML?

Usa para texto que ya no es correcto, como un precio antiguo, y para texto que se eliminó en una edición. Las dos trazan una línea sobre el texto. En CSS, text-decoration: line-through hace lo mismo visualmente.

Q: ¿La etiqueta está obsoleta?

No. quedó obsoleta en HTML 4 pero volvió en HTML5 con un significado nuevo: texto con una anotación no textual, como un error ortográfico o un nombre propio en un texto chino. Es válida, solo que rara vez es la opción correcta.

Subrayado y tachado en HTML: etiquetas u, ins, s y del

Subraya texto en HTML con o con text-decoration de CSS, y táchalo con <s> o <del>. Aprende qué significa cada etiqueta, cómo <ins> y <del> marcan cambios, y por qué subrayar un texto que no es un enlace confunde a los lectores.

Esta página incluye editores ejecutables: edita, ejecuta y ve el resultado al instante.

Por Kevin Spektor, Co-founder & CTO

Publicado el Sep 24, 2026

Cómo subrayar texto en HTML

Hay dos formas: la etiqueta  o la propiedad CSS text-decoration: underline. Las dos trazan la misma línea:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Underline</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    .underline { text-decoration: underline; }
  </style>
</head>
<body>
  <p>With the tag: <u>underlined text</u></p>
  <p>With CSS: <span class="underline">underlined text</span></p>
  <p>A link, for comparison: <a href="#">underlined by default</a></p>
</body>
</html>

El problema de cualquier subrayado es la tercera línea: los lectores esperan que un texto subrayado sea un enlace, y hacen clic en él. Subraya texto normal solo cuando haya un motivo claro.

Qué significa la etiqueta u

 no es un botón general de "subrayar". En el HTML actual significa texto con una anotación no articulada: una marca que dice "aquí hay algo especial" sin decir qué. Los usos reales habituales:

marcar una falta de ortografía (como lo hace un procesador de textos, a menudo con una línea roja ondulada),
marcar nombres propios en texto chino, que es una convención tipográfica allí.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>u for spelling</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    u.spelling { text-decoration: underline wavy #dc2626; }
  </style>
</head>
<body>
  <p>Check this sentence: I <u class="spelling">recieved</u> the package.</p>
</body>
</html>

Para dar énfasis usa  o  (consulta negrita), y para títulos de libros usa <cite>. Si solo quieres el aspecto, usa CSS.

Tachado: s y del

HTML tiene dos etiquetas que trazan una línea sobre el texto, y significan cosas distintas:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Strikethrough</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    .new { color: #16a34a; font-weight: bold; }
  </style>
</head>
<body>
  <p>Price: <s>$49</s> <span class="new">$29</span></p>
  <ul>
    <li><del>Buy milk</del></li>
    <li>Call the bank</li>
  </ul>
</body>
</html>

Etiqueta	Significado	Uso típico
`<s>`	Ya no es correcto o relevante, se conserva como contexto	Precio antiguo, tipo de entrada agotado
`<del>`	Eliminado del documento	Ediciones, registros de cambios, tareas hechas en una lista de pendientes

Marcar cambios con ins y del

<ins> es la pareja de <del>: marca texto que se añadió. Los navegadores lo subrayan por defecto. Las dos aceptan datetime (cuándo ocurrió el cambio) y cite (una URL que lo explica):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ins and del</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    del { color: #dc2626; background: #fee2e2; }
    ins { color: #16a34a; background: #dcfce7; text-decoration: none; }
  </style>
</head>
<body>
  <p>
    The meeting is on
    <del datetime="2026-09-20">Monday</del>
    <ins datetime="2026-09-21">Tuesday</ins>
    at 10:00.
  </p>
</body>
</html>

Este estilo rojo y verde es el aspecto conocido de un diff. text-decoration: none en ins quita el subrayado por defecto para que no parezca un enlace.

Subrayado y tachado con CSS

text-decoration se encarga de la parte visual en cualquier elemento: acepta un color y un estilo, y text-decoration-thickness fija el grosor. Para líneas puramente decorativas es la herramienta correcta:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>text-decoration</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 20px; }
    .brand { text-decoration: underline #2563eb; text-decoration-thickness: 3px; text-underline-offset: 4px; }
    .dotted { text-decoration: underline dotted #f59e0b; }
    .through { text-decoration: line-through #dc2626; text-decoration-thickness: 2px; }
    .over { text-decoration: overline; }
  </style>
</head>
<body>
  <p><span class="brand">thick blue underline</span></p>
  <p><span class="dotted">dotted underline</span></p>
  <p><span class="through">red line through</span></p>
  <p><span class="over">overline</span></p>
</body>
</html>

Quitar el subrayado de los enlaces, la separación del subrayado y los demás detalles de text-decoration están en la página de subrayado en CSS.

Accesibilidad

El soporte de los lectores de pantalla para <s>, <del> e <ins> es irregular: algunos los anuncian como eliminado o insertado, muchos los leen como texto normal, así que quien escucha puede oír "Precio 49 dólares 29 dólares" sin ninguna pista de cuál es el actual. Cuando la diferencia importa, dilo también con palabras, por ejemplo con texto oculto visualmente pero leído en voz alta, o simplemente "Antes 49 $, ahora 29$ ".

Errores comunes

Subrayar texto que no es un enlace. Los lectores intentarán hacer clic. Para resaltar, usa negrita, color o un fondo.
Usar  para dar énfasis. Usa  o .
Usar <strike>. Está obsoleta. Usa <s>, <del> o text-decoration: line-through.
Usar <s> para contenido eliminado en el historial de un documento. Eso es <del>, que además puede registrar cuándo ocurrió.
Confiar solo en la línea para transmitir el significado. Muchos lectores de pantalla no la anuncian.

Preguntas frecuentes

¿Cómo subrayo texto en HTML?

Envuélvelo en , o aplica text-decoration: underline en el CSS. Usa  solo para su significado concreto (como marcar una palabra mal escrita); para un subrayado puramente visual usa CSS en un  o en el propio elemento.

¿Cómo tacho texto en HTML?

Usa <s> para texto que ya no es correcto, como un precio antiguo, y <del> para texto que se eliminó en una edición. Las dos trazan una línea sobre el texto. En CSS, text-decoration: line-through hace lo mismo visualmente.

¿La etiqueta está obsoleta?

No.  quedó obsoleta en HTML 4 pero volvió en HTML5 con un significado nuevo: texto con una anotación no textual, como un error ortográfico o un nombre propio en un texto chino. Es válida, solo que rara vez es la opción correcta.

¿Qué pasó con la etiqueta <strike>?

<strike> está obsoleta. Los navegadores todavía la muestran tachada, pero no es HTML válido. Usa <s> o <del> según el significado, o text-decoration: line-through.

¿Qué diferencia hay entre <s> y <del>?

<s> marca texto que ya no es relevante o correcto pero se conserva como contexto, como un precio tachado. <del> marca texto que se eliminó del documento, a menudo junto a un <ins> que muestra qué lo reemplazó, y admite los atributos datetime y cite.

Conceptos relacionados