HomeTutorsContact

How to Strikethrough text in HTML?

By Gulshan Saini
Published in HTML
June 22, 2020
1 min read

Strikethrough text in HTML is very common and you might have come across its implementation on e-commerce platforms where the original price is strikethrough and the discounted price is listed. Another, usage of strikethrough text is common in documents where the difference is highlighted between old and new text while comparing document revisions.

Similar to word documents, text inside HTML elements can be strikethrough using a couple of different ways described below.

Semantic element <del>

HTML5 introduced <del> semantic element which can be used to highlight the portion of text that was deleted. <del> element can be used with <ins> to highlight new text that has been inserted in the document. Let’s see its application in the following example:

<h3>Published in <del>2019</del> <ins>2020</ins>.</h3>

Output

Published in 2019 2020.

Semantic element <s>

Semantic element <s> functions similar to <del> element however their is difference in the meaning that these tags convey. When text is not relevant to document anymore, we should be using <s> element, and when text is deleted from the document we should be using the <del> element.

<h3>Price <s>$49.99</s> <strong>$39.99</strong></h3>

CSS text-decoration:line-through

Striking through in CSS can be achieved using the text-decoration property. When text-decoration: line-through property is defined on text element, the horizontal line is placed over text.

CSS styles

.strike {
  text-decoration: line-through;
  text-decoration-color: red;
}

HTML content

<h3>Published in <span class="strike">2019</span> 2020.</h3>

Output

<strike> (Deprecated)

<strike> tag is obsolete and was deprecated in HTML5. The HTML <strike> tag places a horizontal line over text.

Published in <strike>2019</strike> 2020.

Output

Published in 2019 2020.

Accessibility concerns

The presence of the <del>, <ins> and <strike> element is not announced by most screen reading technology in its default configuration. It can be made to be announced by using the CSS content property, along with the ::before and ::after pseudo-elements. Source MDN


Tags

#html
Previous Article
How To Check Data Types in JavaScript?

Related Posts

HTML
What is rel noopener?
October 30, 2020
1 min
Gulshan Saini

Gulshan Saini

Fullstack Developer

Topics

Flutter
JavaScript
NextJS
ReactJS
Typescript

Subscribe to our newsletter!

We'll send you the best of our blog just once a month. We promise.
© 2021, All Rights Reserved.

Quick Links

Contact UsBrowserCSSPythonPuppeteer

Social Media