La Etiqueta DEL

La etiqueta <del> (deleted) se utiliza para marcar texto eliminado en un documento HTML, mostrando un tachado visual y proporcionando significado semántico para indicar que el contenido ya no es válido o ha sido removido. Es especialmente útil en documentos colaborativos, listas de precios actualizadas o para mostrar revisiones.

Sintaxis básica

<del>Texto eliminado</del>

• Visualización predeterminada: Los navegadores muestran el texto tachado (text-decoration: line-through).

• Semántica: Indica que el contenido ha sido eliminado de una versión anterior del documento.

Casos de uso comunes

Mostrar correcciones en textos

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

Actualizar precios en e-commerce

<p>
  Precio anterior: <del>$200</del> <br>
  Nuevo precio: $150
</p>

Control de cambios en documentos

<article>
  <h2>Políticas de privacidad (versión 2023)</h2>
  <p>
    <del>Los datos se almacenarán por 5 años.</del>
    <ins>Los datos se almacenarán por 2 años.</ins>
  </p>
</article>

Atributos importantes

<del cite="https://ejemplo.com/registro-cambios" datetime="2023-10-20T15:30:00">
  Contenido obsoleto
</del>

Accesibilidad

Los lectores de pantalla anuncian el texto como "eliminado".

Buenas prácticas:

• Combinar con <ins> para mostrar contenido reemplazado.

• Proporcionar contexto adicional usando cite o datetime.

Estilización con CSS

Personaliza la apariencia del texto tachado:

del {
  color: #e74c3c; /* Color rojo para destacar eliminación */
  text-decoration: line-through;
}

/* Estilo alternativo */
del.custom-del {
  background: #f8d7da;
  padding: 2px 4px;
  border-radius: 4px;
}

Errores comunes

Usar <del> para efectos visuales sin semántica

<!-- Incorrecto -->
<del>Texto decorativo</del> <!-- Si no se eliminó realmente -->

<!-- Correcto -->
<s>Texto obsoleto pero no eliminado</s>

Ignorar atributos útiles

<!-- Sin contexto -->
<del>Este texto ya no aplica</del>

<!-- Mejor práctica -->
<del datetime="2023-10-20" cite="#changelog">Texto eliminado</del>

Ejemplos avanzados

Historial de cambios en tablas

<table>
  <tr>
    <th>Fecha</th>
    <th>Cambio</th>
  </tr>
  <tr>
    <td>2023-10-20</td>
    <td>
      <del>Límite de 10 usuarios</del>
      <ins>Límite de 20 usuarios</ins>
    </td>
  </tr>
</table>

Comparación de versiones

<div class="version">
  <h3>Versión 1.0</h3>
  <p><del>Esta función está en desarrollo.</del></p>
</div>
<div class="version">
  <h3>Versión 2.0</h3>
  <p><ins>Función disponible para todos los usuarios.</ins></p>
</div>

Buenas prácticas

1. Usar con <ins>: Para mostrar claramente el contenido eliminado y el nuevo.

2. Priorizar la semántica: No usar <del> solo para tachar texto decorativo.

3. Agregar metadatos: Utilizar datetime y cite para documentar cambios.

Comparación con etiquetas similares

Conclusión:

La etiqueta <del> es esencial para:

• Marcar contenido eliminado de manera semántica.
• Mejorar la claridad en documentos colaborativos.
• Facilitar el seguimiento de cambios en textos.

¡Úsala para mantener un registro claro de las modificaciones en tu contenido!