HTML Strikethrough: 3 Easy Ways to Do It

Why might you want to create a strikethrough with HTML? You may be editing a pricing section of your page, and want to cross out the old price while displaying a sale price. Or, you may want to indicate that a piece of text in your document was updated recently.

Whatever your reason, it’s easy to add strikethroughs with HTML. You even have a few methods of doing it, provided you know some CSS too. In this post, we’ll show you three ways to create a strikethrough with HTML, plus one method you should avoid. Let’s get started.

What is a strikethrough?

A strikethrough is the placement of a line through the center of a line of text, so the text appears “crossed-out.” Here’s an example:

A strikethrough usually indicates that the struck-through text has been removed, changed, or revised. More generally, it tells the reader that this text is not valid and can generally be disregarded.

For instance, you might see a strikethrough to indicate a sale on a promotional page — the normal price is crossed-out and the new, cheaper price is not. Or, in a list of product features, it may show which features are included and which are not.

Really, it’s up to you to decide whether a strikethrough text effect is suitable for your case. Next, we’ll show you how to do it.

How to Do a Strikethrough in HTML

There are three recommended methods to create a strikethrough with HTML. They are:

• Using the <s> tag
• Using the <del> tag
• Using the CSS text-decoration property

The <s> Tag

The <s> tag is the simplest way to create a strikethrough text in HTML. Developers will use this to mark text that is inaccurate or unimportant with a line through the center. Here’s what the <s> tag looks like in action:

See the Pen html strikethrough - <s> by HubSpot (@hubspot) on CodePen.

The <s> tag should only be used with text that is incorrect or irrelevant. However, it should not be used to indicate text that has been removed from the document. In other words, it should not be used for tracking changes. For that purpose, you should use the <del> tag, which we’ll cover next.

It’s also worth noting that, while handy, the <s> tag presents an accessibility issue. Screen readers usually do not read this tag out loud, so users will not be given this information. So, it should be used sparingly, if at all, if you want your website to be accessible.

The <del> Tag

The <del> is another method for creating the strikethrough effect. This element is used to indicate that the contained text has been deleted from a document, for the purpose of tracking changes to the document.

<del> creates the same visual effect as <s>. See the example below:

See the Pen html strikethrough - <del> by HubSpot (@hubspot) on CodePen.

Note that the <del> tag presents the same accessibility problem as <s>, so it should be used sparingly.

The <del> tag can also be paired with its sibling tag, <ins> to show that a piece of text has been removed and replaced with another piece of text:

See the Pen html strikethrough - <del> and <ins> by HubSpot (@hubspot) on CodePen.

CSS Text Decoration

Okay, CSS isn’t HTML, but if you know one you should probably know the other. The last way to add a strikethrough effect is by using the text-decoration CSS property.

To use it, apply the rule text-decoration: line-through to the target section of text, like so

See the Pen html strikethrough - CSS by HubSpot (@hubspot) on CodePen.

The HTML <strike> Tag

It’s worth mentioning one additional HTML tag, <strike>. This tag also adds a line through the center of the text, like <s> and <del>. However, this tag is deprecated as of HTML5 and is no longer supported by most browsers. Therefore, you should avoid using it in your own code.

Creating a Strikethrough With HTML

Even for something as simple as crossing out some text, HTML and CSS give you multiple methods for getting the job done. So, pick whichever option is most suitable for your case: If you’re tracking document changes, use <del>. Otherwise, use <s>. Or, use the CSS method to cross out any piece of text, if you prefer that way.