HTML Strikethrough: Why, When, and How to Use It Like a Pro

Since the early days of the web, strikethrough text has been used to convey that certain content is no longer accurate, relevant, or valid. And while it may seem like a straightforward concept, there‘s more nuance to using strikethrough correctly in HTML than meets the eye. Let‘s dive deep into the world of digital strikethroughs.

A Brief History of HTML Strikethrough

The strikethrough effect first appeared in HTML 3.2 way back in 1997 with the introduction of the <strike> tag. However, <strike> was later deprecated in HTML 4.01 in favor of the <s> tag, which was deemed to be more semantically meaningful.

With the advent of HTML5 in 2014, <strike> was dropped entirely, and <s> was joined by the <del> tag to represent deleted content. So in a span of just 17 years, the recommended method for creating a strikethrough went through three iterations!

Here‘s a summary of the evolution:

HTML Version	Year	Strikethrough Tag
HTML 3.2	1997	<strike>
HTML 4.01	1999	<s>
HTML5	2014	<s> and <del>

While browsers still support <strike> for backwards compatibility, it‘s considered obsolete and should no longer be used.

How to Create an HTML Strikethrough

In modern HTML, there are three ways to apply a strikethrough effect to your text, each with its own semantic meaning and use case. Let‘s go through each one in detail.

Method 1: The <s> Tag

The <s> tag is used to represent content that is no longer accurate or relevant. Here‘s the basic syntax:

<p>Our annual sale will take place on <s>August 15th</s> August 22nd.</p>

This would render as:

Our annual sale will take place on August 15th August 22nd.

The <s> tag should be used when you want to indicate that the enclosed text is obsolete or inaccurate but not necessarily a change or deletion.

Method 2: The <del> Tag

The <del> tag represents a range of text that has been deleted from the document. It‘s often (but not always) paired with the <ins> tag to show content that has replaced the deleted text:

<p>Our return policy is <del>30 days</del> <ins>60 days</ins> from the date of purchase.</p>

Result:

Our return policy is 30 days 60 days from the date of purchase.

According to the HTML spec, <del> should be used to represent an editorial change or content that has been removed from the document.

Method 3: CSS text-decoration

For purely visual styling, you can use CSS to apply a strikethrough to any element:

<span style="text-decoration: line-through;">Sold Out</span>

Sold Out

However, since this method is presentational and doesn‘t convey any semantic meaning, it should be used sparingly and not for marking content as deleted or inaccurate.

But the text-decoration property does offer some additional styling options. For example, you can change the line color and thickness:

<span style="text-decoration: line-through; text-decoration-color: red; text-decoration-thickness: 2px;">Discontinued</span>

Discontinued

You can even use text-decoration-style to render the line as solid, double, dotted, dashed, or wavy:

<span style="text-decoration: line-through wavy;">Limited Time Offer</span>

Limited Time Offer

These CSS options provide more visual flexibility than the <s> and <del> tags alone. But again, they should enhance the semantic tags, not replace them entirely.

Accessibility Considerations

While the visual effect of strikethrough is apparent to sighted users, it‘s important to consider how this content is conveyed to users of assistive technologies like screen readers.

By default, most screen readers do not announce the presence of <s>, <del>, or CSS strikethroughs. So if the strikethrough itself is essential to understanding the content, that meaning could be lost to some users.

The Web Content Accessibility Guidelines (WCAG) don‘t have specific rules around the use of strikethrough. However, they do state that information should not be conveyed through presentation alone (Success Criterion 1.3.1) and that content should be robust enough to be interpreted reliably by user agents, including assistive technologies (Guideline 4.1).

So if your strikethrough text is more than just a visual flourish, consider supplementing it with additional context for screen reader users. One way to do this is with visibly hidden text:

<p>The deadline to apply is <del>May 1st</del> <ins>June 1st</ins> <span class="sr-only">(deadline updated)</span>.</p>

Here, the "(deadline updated)" text would be visibly hidden but announced by screen readers to provide additional context.

According to WebAIM‘s screen reader user survey, in 2021 over 60% of respondents reported using a screen reader on a mobile device. So ensuring your content is accessible is more important than ever.

When to Use Strikethrough

Now that we‘ve covered how to create strikethroughs, let‘s discuss some guidelines for when to use them appropriately.

1. For redacted or deleted information: Use <del> to show text that has been removed from a document as part of an edit or update.

2. For inaccurate or irrelevant information: Use <s> to indicate that text is no longer accurate or relevant, but not necessarily deleted.

3. Sparingly for visual effect: CSS strikethroughs can be used for decorative effects, like in a "Sold Out" banner. But don‘t overdo it, and make sure the meaning is clear without the styling.

Here are some real-world examples of effective strikethrough usage:

• On an e-commerce product page: $99.99 $79.99 (sale price)
• In a changelog: Fixed Rewrote authentication module to improve security
• On a restaurant menu: Soup of the Day: Clam Chowder French Onion

In each case, the strikethrough communicates something specific about the content that‘s been changed or updated.

Alternatives to Strikethrough

While strikethrough is a useful tool, it‘s not always the best choice. Here are some alternatives to consider:

• For emphasis: Use <strong> or <em> instead of strikethrough to draw attention to important text.
• For edits: Provide "before" and "after" versions of the content side-by-side or in a diff view instead of inline deletions.
• For irrelevant content: Consider removing the text entirely if it‘s no longer relevant to your users.

These alternatives can be especially helpful in cases where strikethrough alone might not fully convey the intended meaning or might create accessibility barriers.

HTML Strikethrough FAQ

Let‘s wrap up by addressing some common questions about using strikethrough in HTML.

Q: Can I use <s> and <del> together?
A: Yes, you can nest <s> inside <del> (or vice versa) if you need to represent content that is both deleted and inaccurate. But use caution, as this can get confusing quickly.

Q: Is <strike> still acceptable to use?
A: No, the <strike> tag was deprecated in HTML 4.01 and removed in HTML5. While browsers still support it, you should update any existing <strike> tags to <s> or <del> as appropriate.

Q: Can I apply CSS to <s> and <del>?
A: Absolutely! You can target these tags with CSS to change the color, thickness, or style of the strikethrough line. Just be sure not to override the default semantics with your styling.

Q: How can I strikethrough text in my content management system (CMS)?
A: Most WYSIWYG editors have a built-in strikethrough button that will wrap the selected text in <s> or <del> tags. If yours doesn‘t, you can usually switch to the HTML source view and add the tags manually.

Key Takeaways

• HTML offers three ways to create a strikethrough: <s>, <del>, and CSS text-decoration.
• Use <s> for inaccurate information, <del> for deleted content, and CSS for decorative effects.
• Be mindful of accessibility. Make sure strikethrough content is still understandable by screen reader users.
• Use strikethrough sparingly and consider alternatives like <strong>, diff views, or removing the content entirely.

By following these guidelines and choosing the appropriate method for your use case, you can wield the HTML strikethrough effectively and make your web content more semantically meaningful. Happy striking through!