How to Mark Strikethrough Text in HTML?

Strikethrough Text is a visual formatting style applied to text where a horizontal line is drawn through the characters. For Example – ~~Strikethrough Text~~. It is commonly used to indicate that the text is no longer valid, deleted, or that there has been a change or correction made to the content.

There are several methods to achieve this, including the <s>, <del>, and <strike> tags, as well as using CSS. In this article, we will cover all approaches to mark strikethrough text in HTML.

Table of Content

Using the <s> Tag
Using the <del> Tag
Using the <strike> Tag
Using CSS

Approach 1: Strikethrough Text using the <s> Tag

The <s> tag is used to render text with a strikethrough effect. The <s> tag is used to define text that should be presented with a strikethrough effect.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Strikethrough Text</title>
</head>

<body>
    <p>
        w3wiki is a <s>Math</s>
        Computer Science Portal.
    </p>
</body>

</html>

Output:

w3wiki is a Math Computer Science Portal.

Approach 2: Strikethrough Text using <del> Tag

The <del> tag is used to indicate deleted text, typically rendering it with a strikethrough effect by default. The deleted text is rendered as strike-through text by the web browsers.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Strikethrough Text</title>
</head>

<body>
    <p>
        w3wiki is a <del>Math</del>
        Computer Science Portal.
    </p>
</body>

</html>

Output:

w3wiki is a Math Computer Science Portal.

Approach 3: Strikethrough Text using <strike> Tag

The <strike> tag is a deprecated HTML tag that was used to render text with a strikethrough effect. While it is still supported in most browsers, it is recommended to use the <s> or <del> tags instead.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Strikethrough Text</title>
</head>

<body>
    <p>
        w3wiki is a <strike>Math</strike>
        Computer Science Portal.
    </p>
</body>

</html>

Output:

w3wiki is a Math Computer Science Portal.

Approach 4: Strikethrough Text using CSS

You can also use CSS to style text with a strikethrough effect, giving you more control over its appearance. To add strikethrough effect on text, text-decoration property is used.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Strikethrough Text</title>
    
    <style>
        .strikethrough-text {
            text-decoration: line-through;
        }
    </style>
</head>

<body>
    <p>
        w3wiki is a 
        <span class="strikethrough-text">Math</span>
        Computer Science Portal.
    </p>
</body>

</html>

Output:

w3wiki is a Math Computer Science Portal.

Tags:

#HTML-Questions #HTML #Web Technologies

HTML | DOM Option text Property

How to Mark Deleted Text in HTML?

How to Mark Strikethrough Text in HTML?

Approach 1: Strikethrough Text using the <s> Tag

Approach 2: Strikethrough Text using <del> Tag

Approach 3: Strikethrough Text using <strike> Tag

Approach 4: Strikethrough Text using CSS

Contact Us