How to Mark Strikethrough Text in HTML?
Last Updated :
07 May, 2024
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.
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>
GeeksforGeeks is a <s>Math</s>
Computer Science Portal.
</p>
</body>
</html>
Output:
GeeksforGeeks 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>
GeeksforGeeks is a <del>Math</del>
Computer Science Portal.
</p>
</body>
</html>
Output:
GeeksforGeeks 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>
GeeksforGeeks is a <strike>Math</strike>
Computer Science Portal.
</p>
</body>
</html>
Output:
GeeksforGeeks 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>
GeeksforGeeks is a
<span class="strikethrough-text">Math</span>
Computer Science Portal.
</p>
</body>
</html>
Output:
GeeksforGeeks is a Math Computer Science Portal.
Share your thoughts in the comments
Please Login to comment...