HTML Strikethrough: Syntax, Usage, and Examples

The HTML strikethrough feature lets you draw a line through text, typically to indicate something is outdated, incorrect, or intentionally crossed out. Whether you're updating prices, revising information, or using stylistic edits for dramatic effect, applying strikethrough HTML helps you visually communicate changes or de-emphasis.

How to Use HTML Strikethrough

The most common way to apply a strikethrough in HTML is with the <s> or <del> tag. Both tags produce similar visual results, but they have slightly different semantic meanings.

<p>This is <s>incorrect</s> but this is correct.</p>

<p>Old price: <del>$49.99</del> New price: $39.99</p>

You can also use CSS to apply a strikethrough with the text-decoration property:

<p style="text-decoration: line-through;">This text is crossed out with CSS.</p>

All three methods create strikethrough text HTML, but each one serves a different purpose.

When to Use Strikethrough HTML

The strikethrough effect isn’t just for canceling words—it serves several practical roles across different types of content.

Marking Text as Obsolete

Use HTML strikethrough to show that something no longer applies.

<p><s>Support for Internet Explorer 11 continues.</s> Support has officially ended.</p>

This method keeps the original statement visible while signaling that it's outdated.

Indicating Price Changes

Strikethrough HTML is a common technique in marketing and sales pages to show discounts.

<p><del>$120</del> Now only $85!</p>

This adds visual emphasis and makes the discount more appealing.

Displaying Edits or Corrections

Blog posts, legal content, and collaborative writing often use strikethroughs to show edits or redacted text.

<p>The event is on <s>Thursday</s> Friday evening.</p>

This technique keeps the original text for reference while drawing attention to the correction.

Strikethrough for Humor or Emphasis

Writers sometimes use strikethrough text HTML for a humorous or dramatic effect by pretending to "accidentally" say something before correcting it.

<p>We <s>hate</s> love working with CSS animations.</p>

It adds personality to content, especially in informal writing.

Examples of Strikethrough HTML in Action

Using the <s> Tag

<p>Our <s>spring</s> summer collection has launched.</p>

The <s> tag signals that the text is no longer relevant or accurate.

Using the <del> Tag

<p><del>Available for preorder only</del> Now in stock!</p>

The <del> tag semantically communicates that content has been deleted or removed from use. Screen readers may announce this as "deleted," which improves accessibility in content where revision tracking matters.

Applying CSS for Custom Styling

<p style="text-decoration: line-through; color: gray;">This product is discontinued.</p>

This gives you control over the color, font, and appearance, which is useful for styling strikethrough text without using semantic HTML tags.

Combining with Inline Elements

<p>The <strong><del>VIP plan</del></strong> is no longer offered.</p>

You can combine strikethrough with other tags like <strong>, <em>, or <a> to maintain emphasis while crossing out content.

Learn More About HTML Strikethrough Tags and Techniques

HTML Strikethrough Tags: <s> vs <del>

Both tags produce a strikethrough effect, but they differ semantically.

• <s> is for content that’s no longer accurate, like a changed name or expired offer.
• <del> is for content that was removed or revised, often used in documents with a change history.

You might use <s> in user-facing pages and <del> in logs or collaborative editing systems.

<p>Our CEO <s>Jane Doe</s> John Smith will speak at the event.</p>
<p><del>Old documentation was removed.</del> See the new guide below.</p>

Use them intentionally depending on what you’re trying to communicate.

HTML Code for Strikethrough Using CSS Classes

Instead of inline styles, define reusable classes:

<style>
  .strike {
    text-decoration: line-through;
    color: #999;
  }
</style>

<p class="strike">This item is no longer available.</p>

This keeps your markup clean and makes it easier to maintain and scale across larger projects.

Strikethrough Inside Lists or Tables

You can use strikethrough HTML inside any text element, including lists, table cells, and forms.

<ul>
  <li><s>Task 1: Draft outline</s></li>
  <li>Task 2: Write first draft</li>
</ul>

<table>
  <tr>
    <td><del>$500</del></td>
    <td>$450</td>
  </tr>
</table>

This technique is useful for project tracking, invoicing, and product catalogs.

HTML for Strikethrough in Forms

Use strikethrough to show deprecated options:

<label><input type="checkbox" disabled> <s>Legacy feature</s></label>

This lets users see that the option used to exist, but it’s no longer available.

HTML Strikethrough and Accessibility

Screen readers can detect <del> and interpret the content as removed. However, using <s> or CSS may not offer the same semantic value. If you need to ensure clarity for assistive technologies, stick to <del> and add aria-label for extra context if needed:

<del aria-label="This feature has been removed">Old Feature</del>

Also avoid using strikethroughs for critical content. Make sure users still understand the intent behind the text, especially if color contrast or visibility might be an issue.

Strikethrough in HTML Emails

HTML emails support basic strikethrough with <s> and <del>, though support varies across clients. Using inline CSS is the safest approach:

<p style="text-decoration: line-through;">This offer expired.</p>

Always test your email in multiple platforms to ensure the formatting works properly.

Customizing the Strikethrough Line

While browsers don’t let you change the style of the actual strikethrough line directly, you can fake it with pseudo-elements and CSS:

<span class="custom-strike">Limited Time Only</span>

<style>
  .custom-strike {
    position: relative;
    color: red;
  }

  .custom-strike::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: red;
  }
</style>

This technique gives you control over the thickness, color, and position of the line for special design effects.

Using strikethrough HTML helps you visually express corrections, deletions, discounts, and shifts in meaning—without hiding the original content. Whether you’re writing markdown-style changelogs, managing e-commerce pricing, or injecting some personality into your writing, the strikethrough effect serves as a clear, readable visual cue.

Now that you understand the different tags and styles available, you can confidently apply the right method for your layout, content, and accessibility needs. The HTML strikethrough tag may look simple, but when used well, it communicates volumes.