Etiqueta HTML <ins>
La etiqueta <ins> define una parte del texto insertada en el documento. Descripción, atributos y ejemplos.
La etiqueta HTML <ins> marca un fragmento de texto que ha sido insertado en un documento. Es un elemento semántico y editorial: no se limita a subrayar el texto, sino que registra que se realizó una adición. Los navegadores muestran el contenido subrayado de forma predeterminada, pero puedes cambiarlo con la propiedad CSS text-decoration.
<ins> casi siempre se utiliza junto con su contraparte, la etiqueta <del>, que marca el texto que ha sido eliminado. Juntas describen una edición: lo que se quitó y lo que se añadió en su lugar. Esta información es especialmente útil en:
- Registros de cambios y notas de versión — para mostrar qué se añadió en una nueva versión.
- Documentos legales y contractuales — para registrar enmiendas sin perder el texto original.
- Control de cambios / diferencias de documentos — la vista "redline" que los editores conocen de los procesadores de texto.
Dado que <ins> está pensado exclusivamente para marcar ediciones, utiliza un elemento diferente cuando solo quieras un efecto visual: usa <u> para estilos de subrayado no textuales, <em> o <strong> para el énfasis, y <mark> para resaltar texto relevante.
Sintaxis
La etiqueta <ins> va en pares. El contenido se escribe entre las etiquetas de apertura (<ins>) y cierre (</ins>).
<ins>This text was added.</ins>Ejemplo de la etiqueta HTML <ins>:
Etiqueta HTML <ins>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>She likes <del datetime="2023-01-01">violets</del> <ins datetime="2023-10-01">snowdrops</ins>.</p>
</body>
</html>Resultado
Uso de <ins> con <del> para mostrar diferencias en un documento
El uso más habitual de <ins> es mostrar una vista "redline" de una edición: el texto antiguo tachado y el nuevo texto subrayado, uno al lado del otro. El contenido de <del> es el texto eliminado; el de <ins> es el reemplazo.
<!DOCTYPE html>
<html>
<head>
<title>Document diff</title>
</head>
<body>
<p>
The meeting is scheduled for
<del>Monday</del>
<ins>Wednesday</ins>
at
<del>9:00 AM</del>
<ins>10:30 AM</ins>.
</p>
</body>
</html>De forma predeterminada, las partes con <del> aparecen tachadas y las partes con <ins> aparecen subrayadas, por lo que el lector puede ver de un vistazo qué cambió.
Los atributos cite y datetime
Tanto <ins> como <del> admiten dos atributos que registran por qué y cuándo ocurrió una edición. No tienen efecto visible por sí solos: son metadatos legibles por máquinas que las herramientas de edición y la tecnología de asistencia pueden mostrar.
cite— una URL que apunta a un documento (un issue, un ticket, una nota de reunión) que explica el motivo de la inserción.datetime— la fecha y, opcionalmente, la hora en que se insertó el texto.
El valor de datetime sigue el mismo formato que <time>: YYYY-MM-DDThh:mm. La parte de la fecha (YYYY-MM-DD) es obligatoria; la parte de la hora es opcional. Si incluyes una hora, sepárala de la fecha con la letra literal T, y puedes añadir segundos y un desplazamiento de zona horaria (por ejemplo, 2023-10-01T14:30:00Z).
<p>
Price:
<del datetime="2023-09-30" cite="/changelog#price-update">$49</del>
<ins datetime="2023-10-01T09:00" cite="/changelog#price-update">$59</ins>
</p>| Valor | Significado |
|---|---|
2023-10-01 | Solo fecha — 1 de octubre de 2023 |
2023-10-01T09:00 | Fecha y hora local — 09:00 |
2023-10-01T09:00:00Z | Fecha, hora y zona horaria UTC |
Envolver contenido de nivel de bloque
<ins> es contenido transparente: puede envolver texto en línea o bloques completos (contenido de flujo) como párrafos y elementos de lista, siempre que el contexto circundante lo permita. Esto hace posible marcar un párrafo completo o varios elementos de lista como recién insertados.
<!DOCTYPE html>
<html>
<head>
<title>Inserted block</title>
</head>
<body>
<h2>Release 2.0 — what's new</h2>
<ins datetime="2023-10-01">
<p>Added dark mode and keyboard shortcuts.</p>
<ul>
<li>Press <kbd>?</kbd> to view all shortcuts.</li>
<li>Toggle the theme from the settings menu.</li>
</ul>
</ins>
</body>
</html>Estilos y accesibilidad
La mayoría de los lectores de pantalla no anuncian <ins> ni <del> de forma predeterminada, por lo que un usuario que dependa del audio puede no darse cuenta de que se realizó una edición. Añadir un aria-label a <ins> no es una solución fiable: aria-label no es estándar en este elemento y su compatibilidad es inconsistente.
El enfoque recomendado es exponer la edición mediante contenido generado con CSS, utilizando los pseudoelementos ::before y ::after. La etiqueta insertada pasa a formar parte del texto renderizado, que los lectores de pantalla pueden leer, y el estilo visual se mantiene en un solo lugar.
<!DOCTYPE html>
<html>
<head>
<title>Accessible ins styling</title>
<style>
ins {
background-color: #d4f7d4;
text-decoration: none;
border-bottom: 2px solid green;
}
ins::before {
content: " [inserted: ";
}
ins::after {
content: "] ";
}
</style>
</head>
<body>
<p>The deadline is <ins datetime="2023-10-01">next Friday</ins>.</p>
</body>
</html>Atributos
| Atributo | Valor | Descripción |
|---|---|---|
| cite | URL | Indica la URL de un documento que explica el motivo de la inserción. |
| datetime | YYYY-MM-DDThh:mm | Define la fecha (y la hora opcional) de la inserción. |
La etiqueta <ins> también admite los Atributos Globales y los Atributos de Evento.
Etiquetas relacionadas
<del>— marca el texto que ha sido eliminado (la contraparte de<ins>).<s>— representa contenido que ya no es preciso o relevante (no es una edición).<mark>— resalta texto para referencia o relevancia.<u>— estilo de subrayado no textual, sin significado editorial.