<strike>

Definition and Usage

The <strike> tag was used in older versions of HTML to define strikethrough text (text with a line through it).

This tag has been deprecated because it was a purely presentational element with no semantic meaning. Modern HTML emphasizes semantic markup and the separation of content from presentation.

Attributes

The <strike> tag only supported the Global Attributes in HTML when it was in use.

Examples

Old Way (Don't Use)

This is how <strike> was used in old HTML (deprecated):

<!-- OLD HTML - DON'T USE THIS -->
<p>This is <strike>incorrect</strike> text.</p>

Modern Way with <s> Tag

Use the <s> tag for text that is no longer accurate or relevant:

<!-- HTML5 - For stylistic strikethrough -->
<p>Regular price: <s>$99.99</s> Sale price: $49.99</p>

Modern Way with <del> Tag

Use the <del> tag for text that has been deleted from a document:

<!-- HTML5 - For deleted content -->
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>

Using CSS Instead

Apply strikethrough styling with CSS for complete control:

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

  .double-strike {
    text-decoration: line-through;
    text-decoration-style: double;
  }
</style>

<p>This is <span class="strikethrough">crossed out</span> text.</p>
<p>This is <span class="double-strike">double strikethrough</span> text.</p>

Price Comparison Example

Common use case showing old and new prices:

<style>
  .old-price {
    text-decoration: line-through;
    color: #999;
    font-size: 0.9em;
  }

  .new-price {
    color: #27ae60;
    font-weight: bold;
    font-size: 1.2em;
  }
</style>

<div class="product">
  <h3>Wireless Headphones</h3>
  <p>
    <span class="old-price">$149.99</span>
    <span class="new-price">$89.99</span>
  </p>
</div>

Document Edit History

Show changes in a document using semantic tags:

<p>
  Meeting scheduled for <del datetime="2025-01-14T10:00">Monday at 10 AM</del>
  <ins datetime="2025-01-14T11:30">Tuesday at 2 PM</ins>.
</p>

Why Was It Deprecated?

• No Semantic Meaning: The tag only defined appearance, not meaning
• Mixing Content and Presentation: HTML5 separates content (HTML) from presentation (CSS)
• Better Alternatives Exist: <s> and <del> provide semantic meaning
• Accessibility Issues: Screen readers benefit from semantic tags like <del>
• Maintainability: CSS provides more flexible styling options
• Standards Compliance: Modern web standards favor semantic HTML

Migration Guide

Step 1: Determine the Context

Choose the appropriate replacement based on the meaning:

• For stylistic strikethrough: Use <s> (e.g., showing old prices)
• For deleted content: Use <del> (e.g., tracking document changes)
• For pure styling: Use CSS text-decoration: line-through;

Step 2: Replace the Tag

<strike>This text is crossed out</strike>

<!-- Option 1: For no-longer-accurate content -->
<s>This text is crossed out</s>

<!-- Option 2: For deleted content -->
<del>This text is crossed out</del>

<!-- Option 3: Using CSS -->
<span style="text-decoration: line-through;">This text is crossed out</span>

Step 3: Test Your Changes

Verify that the strikethrough appears correctly in all browsers and that screen readers handle the content appropriately.

Strike vs S vs Del: Comparison

Try it Yourself

Best Practices

• Never Use <strike>: It's deprecated and not part of HTML5
• Choose Semantic Tags: Use <s> or <del> based on meaning
• Use <del> with <ins>: Show both old and new content for clarity
• Add datetime Attribute: Use with <del> to track when changes were made
• Consider Accessibility: Semantic tags help screen readers convey meaning
• Style with CSS: Use text-decoration for pure visual effects
• Update Legacy Code: Replace <strike> in old websites

CSS Text-Decoration Properties

For more control over strikethrough appearance, use CSS:

<style>
  .strikethrough-basic {
    text-decoration: line-through;
  }

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

  .strikethrough-thick {
    text-decoration: line-through;
    text-decoration-thickness: 3px;
  }

  .strikethrough-wavy {
    text-decoration: line-through wavy red;
  }

  .strikethrough-double {
    text-decoration: line-through;
    text-decoration-style: double;
  }
</style>

Related Tags

• <s>

  Use this for stylistic strikethrough

• <del>

  Use this for deleted content

• <ins>

  Defines inserted text

• <u>

  Defines underlined text