top of page
Search

HTML for Strikethrough: A Guide for Modern Websites 2026

You're probably dealing with a very ordinary website task. A service price changed, an offer expired, or a product detail needs correcting, and you want the old text to stay visible with a line through it.


That small visual choice matters more than it looks. In HTML for strikethrough, the method you choose affects how clearly your site communicates, how assistive technology interprets your content, and how polished your website feels to visitors. A crossed-out price can signal a discount. A crossed-out sentence can suggest an edit. A decorative line can be nothing more than styling. Those are not the same thing.


For a small business website, that difference shapes trust. Visitors notice when information feels tidy, current, and intentional. The same is true of layout choices such as spacing and visual hierarchy, which is why details like white space in web design work so closely with text styling to improve clarity.


Table of Contents



Why Strikethrough Is More Than Just a Line


A lot of business owners treat strikethrough as a formatting shortcut. They just want old text crossed out and new text beside it. That's understandable, especially when you're updating an offer quickly.


But the line itself doesn't explain the reason behind it. Is the old price no longer valid? Was a sentence removed from a policy? Or did a designer want a certain visual effect? Your code should answer that question.


A familiar website moment


Say you run a salon, consultancy, or online shop. You had one price on the page last week, and now you've reduced it. If you cross out the old amount, visitors immediately understand that something changed. That's useful.


What matters next is whether your website communicates that change properly behind the scenes too. Modern websites don't just need to look right. They need to carry meaning in the markup, so browsers, tools, and users all get the same message.


Practical rule: If strikethrough means something, use HTML that carries that meaning. If it's only visual styling, use CSS.

There's also a professionalism issue. Small details like this often separate a site that feels carefully built from one that feels patched together. The crossed-out text may be tiny, but it sits in the same category as readable fonts, clear spacing, and accessible buttons. Visitors may not name those details, but they feel the difference.


Your Three Main Options for Strikethrough Text


HTML for strikethrough comes down to three modern options. Each one has a distinct purpose, even though two of them can look almost identical on screen.


An infographic showing three ways to strikethrough text using the s tag, del tag, and CSS.

HTML has also evolved a long way from its early days. One reference on HTML history and standards notes the language grew from 18 tags in the first public specification to around 140 tags today, and it also explains that was deprecated in HTML 4 and obsoleted in the HTML Living Standard, with recommended for deleted content and for text that is no longer accurate, as outlined in HTMHell's discussion of obsolete and deprecated HTML.


The s tag


Use when text is no longer accurate or no longer relevant, but you still want readers to see it.


Example:


<p>Website audit package: <s>£300</s> £240</p>

This is a common fit for an outdated price, an expired offer, or a product feature that's no longer available.


The del tag


Use when content has been deleted or removed from a document.


Example:


<p>Our package includes <del>monthly printed reports</del>.</p>

This carries a different meaning. It tells the browser, and any tool reading the page, that the content was removed rather than becoming inaccurate.


CSS text-decoration


Use CSS when you want the look of a strikethrough without semantic meaning.


Example:


<p class="crossed-text">Seasonal label</p>
.crossed-text {
  text-decoration: line-through;
}

This is a smart option for design systems and reusable styling, especially when you want consistency across buttons, labels, or interface elements.


Both semantic tags and CSS can create the same visual result. The difference is what your code is saying, not what the line looks like.

One thing to avoid is . It belongs to older HTML and shouldn't be used on a modern site.


Semantic Meaning Why The Right Tag Matters


The biggest confusion around HTML for strikethrough is simple. People assume that if two methods look the same, they are the same. In web development, they aren't.


Think of HTML like labels on storage boxes


If you put a line through text using CSS alone, you've changed the appearance. If you use or , you've added meaning to the content itself.


That meaning matters because websites are read in more than one way. A visitor sees the page visually. A screen reader interprets the structure through the markup. Search engines also rely on the underlying code to understand what the content represents. If the markup is vague, the message becomes vague too.


MDN's guidance is very clear on this point. It says should be used for text that is no longer accurate, while should be used for removed content, and it explicitly notes that is not appropriate for document edits where and are the right tools. The same guidance also points to as the canonical CSS styling method for reusable patterns, which is especially useful in agency and Wix workflows, as described in MDN's reference for the s element.


A sale price is the easiest example. The old amount still provides context, so makes sense. A deleted sentence in terms and conditions is different. That's an edit to the document itself, so is the better fit.


Strikethrough Method Use Cases


Method

Semantic Meaning

Best Use Case Example

Accessibility Impact


No longer accurate or relevant

An old service price shown beside a current one

Preserves meaning beyond appearance


Removed from the document

A sentence removed from a policy or revision note

Signals that content was deleted


Visual styling only

A decorative interface label or temporary design treatment

Adds appearance, not meaning


If accessibility is part of your website standards, semantic choices like these aren't optional. They help reduce confusion for people using assistive tools, and they support a cleaner content structure overall. If you want the wider business view on that, this guide to website accessibility for businesses is a useful companion read.


The right tag tells the truth about the content. That's what makes the page easier to understand.

How to Apply Strikethrough on Your Website


The good news is that strikethrough is easy to implement once you know which tool fits the job.


A person coding HTML in an editor on a laptop screen with a plant in the background.

Simple HTML examples


If the text is outdated but still useful as context, use .


<p>Standard logo design package: <s>£180</s> £140</p>

If the content has been removed from the document, use .


<p>Includes <del>telephone support on Sundays</del>.</p>

These are small snippets, but they communicate very different things.


A reusable CSS class


When you need the visual effect across multiple elements, CSS keeps things tidy. Instead of adding inline styles over and over, create a class once and reuse it.


.old-price {
  text-decoration: line-through;
}
<p><span class="old-price">£90</span> £65</p>

This is the cleaner option for maintainability. If you ever want to adjust the styling site-wide, you only update the class once.


You can also customise the look further in CSS if needed. For example, you might change colour or decoration style to match your design system. Just keep readability in mind, especially on mobile screens.


Quick tip: If the strikethrough is part of a repeated pattern, a CSS class is usually the most manageable setup.

For a visual walkthrough, this short tutorial can help if you prefer to follow along on screen.



Using strikethrough in Wix


In the Wix Editor, the simplest route is often the built-in text formatting controls. Highlight the text and apply strikethrough from the text editing toolbar if that option is available in the element you're using.


For more controlled layouts, especially if you're handling custom sections or embedded content, you may need to use an HTML embed or custom code area. In that case:


  • Use for old pricing or information that's no longer current.

  • Use for content edits or removed wording.

  • Use CSS classes when the same visual treatment appears in several places.


If you send marketing emails as well, keep things conservative. Basic HTML tags tend to be safer than more elaborate CSS patterns, because email clients don't all handle styling in the same way.


Best Practices and Common Mistakes to Avoid


A strikethrough is easy to add. Using it well takes a bit more care.


A professional man in a blue shirt sitting at a desk and reviewing a document carefully.

One common pitfall is the old element. Modern references state that it's deprecated and not supported in HTML5, and they also point out that the main risk today is usually semantic misuse rather than visual rendering. In other words, and CSS line-through may look the same, but semantic tags preserve meaning for assistive technologies. The same guidance recommends testing readability so crossed-out text doesn't become hard to interpret, as noted in W3Schools' reference for the obsolete strike tag.


What trips people up


  • Using the wrong tag: A discount price isn't usually a document deletion. It's outdated information, so is often the better match.

  • Crossing out too much text: A whole sentence or paragraph with a line through it quickly becomes tiring to read.

  • Using inline styles everywhere: Repeating all over a site creates clutter and makes later updates harder.


If you're unsure how your page reads for different users, running a website accessibility audit can help uncover problems you might not spot by eye alone.


A short professional checklist


  • Keep it brief: Strikethrough works best on short pieces of text, such as prices, labels, or short phrases.

  • Check readability: Test colour contrast, font choice, and line weight together. This matters even more if your typography is already delicate. Good guidance on choosing easy-to-read fonts for your website can support that decision.

  • Treat semantics as part of design: Code quality and visual polish belong together.


Crossed-out text should clarify a change, not make the content harder to understand.

From Code to Conversions Your Next Step


A proper strikethrough choice is a small technical decision with a wider effect. It improves clarity, supports accessibility, and helps your website feel deliberate rather than improvised.


That's why HTML for strikethrough is worth getting right. It sits at the point where design, content, and code meet. When those pieces work together, visitors find your pages easier to trust and easier to use.


If your website has lots of little details like this that need sorting, it may be time to step back and look at the bigger picture. Strong websites don't just look attractive. They communicate clearly, behave consistently, and guide people towards action.



If you'd like expert help refining the details that make a Wix website feel polished and high-performing, Baslon Digital can help you build a site that's clear, accessible, and designed to convert.


Comments

bottom of page