HTML Strikethrough Generator

Need to show something has been deleted or is no longer relevant? Our Strikethrough Generator makes it incredibly easy. Just type your text, and we’ll instantly wrap it in the semantically correct HTML <del> tag, giving you the code to copy and paste anywhere.

HTML Strikethrough Generator

Showing removed or changed information on a webpage can be tricky. You want your visitors to see what changed without confusing them. That is where strikethrough text comes in handy.

Our HTML Strikethrough Generator turns plain text into clean, semantically correct HTML in seconds. It automatically wraps your content in the <del> tag so you can quickly copy and paste it into your website, blog, or CMS.

How to Use the Tool in 3 Simple Steps

1. Enter Your Text: Type or paste the words you want to cross out into the input box above.
2. Check the Live Preview: Review how your text looks instantly in the live preview section.
3. Copy the Code: Click the Copy button to grab your generated <del> code snippet and paste it straight into your code editor.

<del> vs. <s> vs. CSS: Choosing the Right Strikethrough

Not all strikethrough lines work the same way under the hood. Using the correct tag helps search engines and screen readers understand your page context.

• The <del> Tag (Semantic Deletion): Represents text that has been deliberately removed or replaced. It is best for price drops, document revisions, and content edits.
• The <s> Tag (No Longer Relevant): Represents content that is no longer accurate or relevant, but was not explicitly “deleted” from a sequence (e.g., an expired deal).
• CSS (text-decoration: line-through): Best used when you only want a visual line across text for decorative styling without changing its structural meaning.

Search engines prefer semantic HTML like the <del> tag over outdated visual tags. Using standard markup keeps your page clean and easy to crawl. If you need to highlight active content alongside deleted items, pair this tool with our HTML Mark Text Generator or use our HTML Underlined Text Generator to create clear visual contrast.

Common Ways to Use Strikethrough Text

Crossed-out text serves several practical purposes in modern web design:

• E-Commerce Discounts: Show original prices crossed out next to discounted prices (e.g., <del>$100</del> $75).
• Editorial Revisions: Indicate outdated facts or corrected statements without removing the original context.
• Interactive Checklists: Display completed tasks or finished steps in a tutorial.
• Changelogs: Highlight removed features or outdated functions in software release notes.

Frequently Asked Questions (FAQ)

1. Does using the <del> tag help with SEO?

Yes. Semantic tags give search engines explicit context. The <del> tag signals that content was updated or removed on purpose, helping web crawlers understand document history without penalizing your content for quality.

2. How do screen readers handle strikethrough text?

Modern screen readers typically announce deleted text by saying “deletion start” and “deletion end” around the content inside a <del> tag. This ensures visually impaired users get the exact same information as sighted readers.

3. Should I use <del> or <s> for e-commerce sale prices?

The <del> tag is the standard choice for sale prices. It clearly indicates that the old price has been removed and replaced by the new discounted price.

4. How can I change the color of the strikethrough line?

You can customize the line color using CSS without altering your text color. Adding del { text-decoration-color: #ff0000; } will render a red strikethrough line over your normal text.

5. Why shouldn’t I use the old <strike> tag?

The <strike> tag was deprecated in HTML4 and removed from HTML5 standards. While web browsers still support it for older sites, using it on new pages can fail HTML validation checks. Always stick to <del> or <s>.