Mastering HTML Strikethrough: A Comprehensive Guide for Beginners

Strikethrough text, characterized by a horizontal line running through the characters, serves a unique purpose in web design and document editing. This visual formatting style is not just about aesthetics; it plays a crucial role in conveying that certain text is no longer valid, has been deleted, or has changed in some way.

For instance, in the context of web pages, HTML strikethrough text can effectively show sale prices, making it clear what the original price was and what the offer now stands for. Similarly, it can indicate which features are included in a service and which are not, providing clear and immediate understanding for the user.

HTML and CSS offer multiple methods to create this strikethrough effect, each with its semantic meaning and appropriate use cases. Understanding how to apply strikethrough text effectively can significantly enhance the user experience on a website, making information more accessible and easier to understand.

This article aims to guide intermediate front-end developers through the various ways to achieve HTML strikethrough text, covering HTML semantic tags, CSS properties, best practices, and common use cases.

HTML Semantic Tags for Strikethrough

The Role of <s> and <del> Tags in HTML

HTML semantic tags are designed to provide meaning to the content beyond mere presentation. When it comes to creating strikethrough text, HTML offers two primary tags: <s> and <del>. The <s> tag is used to represent text that is no longer relevant or accurate. It's a visual indicator that the text it encloses should be considered obsolete or disregarded. On the other hand, the <del> tag is specifically used to indicate document edits, such as deletions. It not only applies the strikethrough effect but also conveys that the text has been removed from the document.

1<p>Regular price: <s>$199.99</s> Sale price: $99.99</p>
2<p>Our policy: <del>30-day returns</del> <ins>60-day returns</ins></p>

Output:

In the examples above, the <s> tag is used to show a price that is no longer valid, while the <del> tag indicates a change in policy by striking through the old return policy.

Differences Between <s>, <del>, and <strike> Tags

While <s> and <del> tags are recommended for use in modern HTML documents due to their semantic meaning, there exists another tag that was commonly used in the past: the <strike> tag. The <strike> tag, now deprecated, was once used to create a strikethrough effect without providing any semantic meaning. Although most browsers still support the <strike> tag, it is strongly advised to use <s> or <del> instead, as these tags offer a clearer understanding of the text's context and purpose.

Using CSS for Strikethrough

Styling with the text-decoration CSS Property

CSS offers a more flexible approach to styling text with a strikethrough effect. The text-decoration CSS property is specifically designed for this purpose, allowing developers to apply a line through text. This property can be used in conjunction with other text decorations, such as underline or overline, to achieve various effects.

1.sale-price {
2    text-decoration: line-through;
3}

In the CSS example above, any text classed with .sale-price will display with a strikethrough, making it an ideal way to indicate sale prices on web pages.

Advanced Techniques: Pseudo Elements and Custom Strikethrough Styles

For those looking to go beyond the default configuration, CSS offers the ability to customize the strikethrough effect using pseudo elements and additional properties. This allows for creative implementations, such as changing the color, style, or thickness of the strikethrough line, providing even more control over how the text is presented.

Best Practices and Considerations

Semantic Meaning and Accessibility Concerns

When using strikethrough text, it's important to consider its semantic meaning and how it will be interpreted by screen readers. The <s> tag should be used for text that is no longer relevant or accurate, while the <del> tag is appropriate for indicating document edits. This distinction helps ensure that the content is accessible and understandable for all users, including those using assistive technologies.

Choosing the Right Tag for the Right Purpose

It's crucial to choose the correct HTML tag based on the context and intended meaning of the strikethrough text. Misusing these tags can lead to confusion and misinterpretation of the content. Always opt for semantic tags over stylistic ones to ensure that your web pages are both visually appealing and semantically correct.

Common Use Cases for Strikethrough Text

Strikethrough text finds its utility in various scenarios on web pages, from highlighting sales and promotions to indicating document edits and updates. Its ability to draw attention to changes or special offers makes it an invaluable tool in web design. By understanding and applying the correct methods for creating strikethrough text, developers can enhance the user experience on their websites, making information clear, accessible, and engaging.

Troubleshooting Strikethrough Text

Common Issues and How to Resolve Them

Developers may encounter issues when implementing strikethrough text, such as inconsistencies across browsers or difficulties with screen readers. Ensuring that the correct HTML tags and CSS properties are used is the first step in troubleshooting these issues. Testing the strikethrough effect in various browsers and with different assistive technologies can help identify and resolve any compatibility problems.

Ensuring Cross-Browser Compatibility

Cross-browser compatibility is a common concern when using strikethrough text. While most modern browsers support the <s> and <del> tags, as well as the text-decoration CSS property, it's important to test your web pages across multiple browsers to ensure that the strikethrough effect is rendered consistently. Utilizing web standards and following best practices can help mitigate these issues and ensure a uniform experience for all users.

Conclusion

Mastering HTML strikethrough is an essential skill for front-end developers, offering a way to enhance web pages by clearly indicating changes, special offers, or outdated information. By understanding the semantic meaning of HTML tags and the flexibility of CSS properties, developers can create effective and accessible strikethrough text. Remembering to consider accessibility and choosing the right method for the task at hand will ensure that your use of strikethrough text improves the user experience on your website. Experimentation and continuous learning are key to effectively leveraging this visual styling technique in your web development projects.

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.