La Etiqueta INS

La etiqueta <ins> (inserted text) se utiliza para marcar texto que ha sido añadido a un documento después de su versión original. Es útil para mostrar actualizaciones, correcciones o cambios en el contenido, y se muestra subrayado por defecto. Aquí aprenderás a usarla correctamente para mantener un registro claro de las modificaciones.

Sintaxis básica

<ins>Texto nuevo o corregido</ins>

• Visualización predeterminada: Los navegadores muestran el texto subrayado.

• Uso semántico: Indica que el contenido fue insertado en una versión posterior del documento.

Atributos clave

Atributo	Descripción
cite	URL que explica por qué se insertó el texto (ej: enlace a un registro de cambios).
datetime	Fecha y hora de la inserción (formato: YYYY-MM-DDThh:mm:ss).

Ejemplo con atributos:

<ins 
  cite="https://ejemplo.com/registro-cambios" 
  datetime="2023-10-25T14:30:00"
>
  Nuevo párrafo añadido.
</ins>

Casos de uso comunes

Correcciones en documentos

<p>
  La capital de Francia es <del>Marsella</del> <ins>París</ins>.
</p>

Actualización de contenido

<article>
  <h2>Guía de SEO 2023</h2>
  <p>Contenido original...</p>
  <ins>
    <p>Nueva sección: Importancia de Core Web Vitals.</p>
  </ins>
</article>

Registro de cambios en listas

<ul>
  <li>Tarea 1: Completada</li>
  <li><ins>Tarea 2: Pendiente de revisión</ins></li>
</ul>

Accesibilidad

• Lectores de pantalla: Anuncian el texto como "insertado".

• Buenas prácticas:

  • Usar junto con <del> para mostrar cambios claramente.

  • Proporcionar contexto adicional con cite y datetime si es relevante.

  • Evitar usar <ins> solo para decoración (mejor usar CSS).

Estilización con CSS

Personaliza la apariencia del texto insertado:

ins {
  text-decoration: none; /* Elimina el subrayado predeterminado */
  background-color: #e8f5e9; /* Fondo verde claro */
  color: #2e7d32; /* Texto verde oscuro */
  padding: 2px 4px;
  border-radius: 4px;
}

/* Alternativa: Subrayado personalizado */
ins.custom-ins {
  text-decoration: underline wavy #d32f2f; /* Subrayado rojo ondulado */
}

Errores comunes

Usar para decoración

<!-- Incorrecto -->
<ins>Texto decorativo subrayado</ins> <!-- ¡Sin significado semántico! -->

<!-- Correcto -->
<span style="text-decoration: underline">Texto decorativo</span>

Ignorar atributos de contexto

<!-- Sin información de fecha o motivo -->
<ins>Texto añadido sin contexto</ins>

Anidar elementos de bloque

<!-- Incorrecto: <ins> es un elemento en línea -->
<ins>
  <div>Nueva sección</div>
</ins>

<!-- Correcto -->
<div>
  <ins>Nueva sección</ins>
</div>

Ejemplos avanzados

Historial de cambios en un contrato

<p>
  El pago mensual será de <del>$1000</del> <ins datetime="2023-10-25" cite="#changelog">$1200</ins>.
</p>

Comparación de versiones

<div class="version">
  <h3>Versión 1.0</h3>
  <p>Característica A implementada.</p>
</div>
<div class="version">
  <h3>Versión 2.0</h3>
  <p><ins>Característica B añadida.</ins></p>
</div>

Buenas prácticas

1. Combínalo con <del>: Para mostrar cambios de manera clara (texto eliminado y añadido).

2. Usa datetime: Especialmente en documentos legales o técnicos donde el momento del cambio es relevante.

3. Mantén el texto conciso: Evita párrafos largos dentro de <ins>.

Comparación con etiquetas similares

Etiqueta	Propósito	Ejemplo
<ins>	Texto insertado (subrayado)	<ins>Nuevo texto</ins>
<del>	Texto eliminado (tachado)	<del>Texto antiguo</del>
<u>	Texto subrayado sin significado semántico	<u>Decorativo</u>
<mark>	Texto resaltado por relevancia	<mark>Importante</mark>

Conclusión:

La etiqueta <ins> es esencial para:

• Documentar cambios en el contenido de manera semántica.
• Mejorar la claridad y transparencia en documentos actualizados.
• Mantener un registro de versiones junto con <del>.

¡Úsala para mostrar modificaciones de forma profesional y accesible!