¿Cómo tachar en HTML?: guía completa para dar estilo a tus textos

Contenido del Bootcamp Dirigido por: | Última modificación: 18 de abril de 2024 | Tiempo de Lectura: 4 minutos

Algunos de nuestros reconocimientos:

Premios KeepCoding

Si has navegado un poco por el mundo del diseño web, seguramente te hayas topado con el efecto de texto tachado. Es una herramienta versátil que puede añadir un toque de humor o enfatizar información en tu blog. ¿Te preguntas cómo tachar en HTML? ¡Es fácil!

¿Cómo tachar en HTML?

Cómo tachar en HTML: uso de la etiqueta <del>

Al utilizar la etiqueta <del> para aprender como tachar una palabra en html, es importante recordar que su propósito principal es indicar la eliminación de contenido. Por lo tanto, su uso debe limitarse a casos en los que realmente se elimine información. Esto garantiza que el tachado tenga un significado semántico claro y coherente con el contenido del documento.

Además, la etiqueta <del> puede combinarse con otras etiquetas en HTML para proporcionar información adicional sobre los cambios realizados. Por ejemplo, puedes utilizar la etiqueta <ins> para resaltar el texto agregado junto con <del>, lo que permite a los usuarios visualizar tanto lo que se ha eliminado como lo que se ha añadido en un documento.

Para aprender como tachar un texto en html, simplemente empleamos la etiqueta <del>. Es tan sencillo como añadir <del> antes del texto que deseamos tachar y </del> después del mismo. ¡Listo!

//¿Cómo tachar en HTML?
<del>Texto que queremos tachar</del>

Esta etiqueta es perfecta para indicar que algo ha sido eliminado o ya no es relevante en un contexto específico. Por ejemplo, si estás editando un artículo y deseas mostrar las correcciones realizadas, el uso de <del> es ideal para resaltar el texto eliminado.

Opción alternativa: la etiqueta <strike>

Otra manera de tachar texto es mediante la etiqueta <strike>. Aunque funciona de manera similar a <del>, tiene sutiles diferencias en su significado semántico. Por ejemplo:

//¿Cómo tachar en HTML?
<strike>Este texto aparece tachado</strike>

La etiqueta <strike> es útil cuando deseas indicar que algo ha sido marcado o subrayado, pero no necesariamente eliminado. Puede ser útil en formularios en línea, donde se requiere indicar cambios o actualizaciones.

Diferencia entre las etiquetas <del> y <strike>

En el mundo del desarrollo web, es importante comprender las sutiles diferencias entre las etiquetas <del> y <strike>, ambas utilizadas para aplicar el efecto de tachado a texto en HTML. Aunque visualmente pueden parecer similares, tienen significados semánticos ligeramente diferentes, lo que afecta su uso apropiado en diversos contextos.

La etiqueta <del>

La etiqueta <del> se utiliza para indicar que un fragmento de texto ha sido eliminado o marcado como obsoleto en un documento HTML. Su propósito principal es proporcionar una representación precisa de los cambios realizados en el contenido, especialmente en colaboración con otros usuarios o en documentos que requieren revisiones frecuentes.

Por ejemplo, si estás editando un artículo en línea y decides eliminar una sección completa, puedes utilizar la etiqueta <del> para tachar el texto eliminado y mostrar claramente que ha sido marcado para su eliminación. Esto ayuda a los lectores a comprender los cambios realizados y a seguir el flujo de la narrativa.

La etiqueta <strike>

Por otro lado, la etiqueta <strike> se utiliza para aplicar un efecto de tachado al texto, sin necesariamente indicar que ha sido eliminado o marcado como obsoleto. A menudo se usa con propósitos estilísticos o decorativos, como resaltar información importante o dar un toque de estilo a ciertos elementos de la página.

Aunque <strike> puede lograr visualmente el mismo efecto que <del>, su significado semántico es diferente. En lugar de indicar cambios en el contenido, <strike> simplemente resalta el texto como una característica estilística, sin implicar que el contenido esté obsoleto o marcado para su eliminación.

La diferencia principal entre las etiquetas <del> y <strike> radica en su significado semántico. Mientras que <del> se utiliza para indicar cambios en el contenido, especialmente eliminaciones, <strike> se emplea principalmente con propósitos estilísticos y decorativos.

Tachado con CSS

Si prefieres separar la presentación del contenido, puedes usar CSS. Por ejemplo, con el atributo text-decoration: line-through:

//¿Cómo tachar en HTML?
<span style="text-decoration: line-through;">
Este texto aparecerá tachado
</span>

Utilizar CSS para tachar texto te brinda un mayor control sobre la presentación de tu página web. Puedes personalizar el estilo del texto tachado según tus preferencias de diseño, lo que te permite crear efectos más llamativos y coherentes con la estética general de tu sitio.

Consideraciones adicionales

Aunque las etiquetas <del> y <strike> son útiles para aplicar tachado directamente en HTML, es importante recordar que HTML define el contenido, mientras que la presentación se controla con CSS. Por lo tanto, si deseas lograr un tachado más elaborado o aplicar otros estilos, como cambiar el color o el grosor de la línea, es recomendable utilizar CSS.

Además, es importante tener en cuenta que el uso excesivo de estilos inline no es recomendable. En su lugar, lo ideal es definir clases en CSS para aplicar estilos consistentes y mantenibles en toda tu página web. Esto facilita la gestión y la actualización de estilos, así como la colaboración en proyectos web con otros desarrolladores.

Ahora que sabes cómo tachar en HTML, puedes añadir un toque extra a tus textos en la web. Ya sea para indicar cambios, destacar información importante o simplemente agregar un toque de estilo, el tachado de texto es una herramienta útil y versátil en el diseño web.

Recuerda que en KeepCoding, además de aprender sobre desarrollo web, también te ayudamos a dominar herramientas de diseño y maquetación para que tus proyectos destaquen.

¿Listo para dar el siguiente paso en tu carrera? Únete a nuestro Bootcamp en desarrollo web y conviértete en un profesional del sector tecnológico. ¡No pierdas la oportunidad de cambiar tu vida!

Posts más leídos

¡CONVOCATORIA ABIERTA!

Desarrollo Web

Full Stack Bootcamp

Clases en Directo | Profesores en Activo | Temario 100% actualizado