Crear texto tachado en HTML

Introducción

En HTML, la etiqueta <s> representa texto tachado o texto con una línea a través de él. Se puede utilizar para mostrar contenido de texto irrelevante o ya no exacto. Es esencial utilizar la etiqueta <del> en lugar de la etiqueta <s> con fines de edición de documentos. En este laboratorio, aprenderá a crear texto tachado en HTML utilizando la etiqueta <s>.

Nota: Puede practicar la codificación en index.html y aprender Cómo escribir HTML en Visual Studio Code. Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/TextContentandFormattingGroup -.-> html/text_dir("Text Direction") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") subgraph Lab Skills html/basic_elems -.-> lab-70841{{"Texto tachado en HTML"}} html/head_elems -.-> lab-70841{{"Texto tachado en HTML"}} html/text_dir -.-> lab-70841{{"Texto tachado en HTML"}} html/doc_flow -.-> lab-70841{{"Texto tachado en HTML"}} html/inter_elems -.-> lab-70841{{"Texto tachado en HTML"}} html/custom_attr -.-> lab-70841{{"Texto tachado en HTML"}} end

Crea un archivo HTML básico

Crea un archivo HTML llamado index.html. Aquí está cómo crear una estructura HTML básica:

<!doctype html>
<html>
  <head>
    <title>Creating a Strikethrough Text in HTML</title>
  </head>
  <body>
    <!-- Your HTML code will go here -->
  </body>
</html>

Agrega un texto tachado

Dentro de la etiqueta body de tu archivo HTML, agrega la etiqueta <s> que representa texto tachado. Aquí está cómo escribir la sintaxis básica:

<s>This text has a strikethrough.</s>

Verás el texto anterior con una línea a través de él en tu salida HTML.

Agrega un atributo

Aunque la etiqueta <s> no tiene ningún atributo específico, admite atributos globales y de eventos. Aquí está cómo agregar un atributo de evento a la etiqueta <s>:

<s onclick="alert('This is a strikethrough text.')">Click me!</s>

En el código anterior, el atributo de evento onclick mostrará un mensaje de alerta con el texto cuando haces clic en el texto tachado.

Agrega estilos CSS

También puedes agregar estilos CSS personalizados para cambiar la apariencia del texto tachado. Aquí está cómo agregar estilos CSS a la etiqueta <s>:

<style>
  s {
    text-decoration: line-through;
    color: red;
    font-size: 20px;
  }
</style>

En el código anterior, la propiedad text-decoration hace que el texto sea tachado, la propiedad color cambia el color de la fuente a rojo y la propiedad font-size establece el tamaño de la fuente en 20px.

Resumen

En este laboratorio, has aprendido cómo crear texto tachado en HTML utilizando la etiqueta <s>. Puedes personalizar la apariencia del texto agregando estilos CSS o atributos de evento. La etiqueta <s> es perfecta para indicar texto que ya no es exacto o relevante y también puede ser útil con fines de edición de documentos.