Creating Strikethrough Text in HTML

Introduction

In HTML, the <s> tag represents strikethrough text or text with a line through it. It can be used to show irrelevant or no longer accurate text content. It's essential to use the <del> tag instead of the <s> tag for document editing purposes. In this lab, you will learn how to create strikethrough text in HTML using the <s> tag.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/TextContentandFormattingGroup -.-> html/text_head("`Text and Headings`") subgraph Lab Skills html/basic_elems -.-> lab-70841{{"`HTML Strikethrough Text`"}} html/head_elems -.-> lab-70841{{"`HTML Strikethrough Text`"}} html/text_head -.-> lab-70841{{"`HTML Strikethrough Text`"}} end

Create a basic HTML file

Create an HTML file named index.html. Here's how to create a basic HTML structure:

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

Add a Strikethrough Text

Inside the body tag of your HTML file, add the <s> tag that represents strikethrough text. Here's how to write the basic syntax:

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

You will see the above text with a line through it in your HTML output.

Add an attribute

Although the <s> tag doesn't have any specific attributes, it supports both global and event attributes. Here's how to add an event attribute to the <s> tag:

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

In the code above, the onclick event attribute will display an alert message with the text when you click on the strikethrough text.

Add CSS styles

You can also add custom CSS styles to change the appearance of the strikethrough text. Here's how to add CSS styles to the <s> tag:

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

In the code above, the text-decoration property makes the strikethrough, the color property changes the font color to red, and the font-size property sets the font size to 20px.

Summary

In this lab, you have learned how to create strikethrough text in HTML using the <s> tag. You can customize the text appearance by adding CSS styles or event attributes. The <s> tag is perfect for indicating text that is no longer accurate or relevant and can also be useful in document editing purposes.

HTML Strikethrough Text