¿Como funciona el comando en HTML5: 's'?

Parte 1: Descripción del elemento <s> en HTML5

El elemento <s> en HTML5 es utilizado para marcar texto que ya no es relevante o que ha sido modificado. Visualmente, el contenido de este elemento se muestra con una línea que lo atraviesa en horizontal. Es importante tener en cuenta que este elemento no debe confundirse con otros elementos similares, como <del> y <strike>. Mientras que <del> indica contenido que ha sido borrado, <s> simplemente señala que el contenido ha sido dejado de ser válido o es inexacto.

Atributos del elemento <s>

El elemento <s> acepta los atributos globales, que son comunes a la mayoría de los elementos HTML. Estos atributos permiten añadir funcionalidades adicionales y personalizaciones al elemento. A continuación, se listan y describen estos atributos:

1. id: Define un identificador único para el elemento.

   • Ejemplo: <s id="example1">Texto tachado</s>.

2. class: Permite especificar una o más clases CSS para aplicar estilos.

   • Ejemplo: <s class="tachado">Texto tachado</s>.

3. style: Contiene declaraciones de estilo CSS en línea que se aplican directamente al elemento.

   • Ejemplo: <s style="color: red;">Texto tachado</s>.

4. title: Proporciona información adicional sobre el elemento, generalmente mostrada como una herramienta tooltip.

   • Ejemplo: <s title="Este texto es inexacto">Texto tachado</s>.

5. lang: Especifica el idioma del contenido del elemento.

   • Ejemplo: <s lang="es">Texto tachado</s>.

6. dir: Indica la dirección del texto. Puede ser ltr (left to right) o rtl (right to left).

   • Ejemplo: <s dir="ltr">Texto tachado</s>.

7. *data- attributes**: Permite crear atributos personalizados que contienen información adicional.

   • Ejemplo: <s data-status="outdated">Texto tachado</s>.

8. hidden: Si está presente, el elemento no será mostrado.

   • Ejemplo: <s hidden>Texto oculto y tachado</s>.

Parte 2: Uso del elemento <s> en HTML5 con ejemplos

El uso principal del elemento <s> es para indicar texto que ha dejado de ser relevante o que ya no es válido. Esto es especialmente útil en contextos donde se necesita mantener información visible para referencia futura, pero indicando que dicha información ya no es aplicable.

Ejemplos de uso:

1. Corrección de Precios Antiguos:

   • <p>El precio anterior era de <s>$50.00</s>. Ahora, el precio es de $45.00.</p>

     En este ejemplo, el precio anterior está marcado como tachado para indicar que ya no es válido.

2. Actualización de Información:

   • <p>Se planeaba realizar el evento el <s>12 de marzo</s>, pero se ha pospuesto al 20 de marzo.</p>

     Aquí, la fecha original del evento se muestra tachada para reflejar el cambio.

3. Indicadores de Errores o Correcciones:

   • <p>La dirección de envío era <s>123 Calle Vieja</s>, pero ha sido actualizada a 456 Avenida Nueva.</p>

     En esta situación, la dirección original se visualiza tachada para mostrar que ha sido corregida.

El uso del elemento <s> puede mejorar la claridad y la comprensión del contenido, especialmente en situaciones donde es importante mostrar la evolución o cambios en la información sin eliminar completamente el contexto original.