HTML strike tag
HTML strike tag Not Supported in HTML5. HTML <strike> tag (also known as the <s> tag in modern HTML) is used to represent text that is no longer relevant or accurate, often shown with a strikethrough effect. It visually indicates that the text has been "crossed out."
HTML <strike> Tag
HTML <strike> tag is deprecated tag that was traditionally used to display text with a line through it known as "strikethrough". This tag was part of the early versions of HTML but has been replaced with more modern alternative such as the CSS text-decoration property with a value of line-through.Despite being deprecated it is important to understand the <strike> tag historical context and its modern alternative.
We will also explore why it was deprecated and how to implement strikethrough effects using CSS which is the recommended approach today.
What Was the <strike> Tag ?
The <strike> tag was an inline HTML element that was used to represent text that was no longer relevant, accurate, or true, often by displaying a line through the text. The use case for the <strike> tag was for marking things like
Deleted or incorrect text: If text was no longer accurate, such as in a revision.
Discounted prices: Displaying the original price and striking through it when it was marked down.
Syntax of the <strike> Tag
The basic syntax of the tag was very simple. It enclosed the text you wanted to display with a line through it.
<strike>SakalaCode strike Tag.</strike>
Attributes of the <strike> Tag:
The <strike> tag did not accept any specific attributes like class, id, or style. It was strictly used to apply a visual effect (the strikethrough), and its usage was limited to that purpose.
Why Was the <strike> Tag Deprecated?
In the HTML5 <strike> tag was officially deprecated, meaning that it is no longer recommended for use. The reason for its deprecation is primarily due to the fact that it mixed presentation (styling) with content (meaning) which goes against modern web development best practice.
Web standard emphasize separating content HTML from presentation CSS. In the other words HTML should be used to define the structure and meaning of content while CSS should be used for styling and visual effects. By using CSS for styling instead of HTML tags like <strike> developers can create more flexible, maintainable, and accessible website.
Modern Alternatives to the <strike> Tag
While the <strike> tag was once the go-to method for applying a strikethrough, there are now more modern and standards-compliant ways to achieve the same effect. Let's look at these alternative:
Using the text-decoration CSS Property
The best practice today is to use CSS to apply the strikethrough effect to text. The text-decoration property allows you to specify a variety of text-related decorations, including a strikethrough, by using the line-through value.
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Strike Tag with Example</title> </head> <body> <h1>SakalaCode</h1> <p>HTML <strike> Strike </strike> Tag</p> </body> </html>
Using the <del> and <s> Tag
Although the <strike> tag is deprecated, HTML5 offer alternative tag that semantically convey the concept of deleted or inaccurate text. These are the <del> and <s> tag.
- <del>: Represent deleted text, typically used to indicate content that was removed from the document or is no longer valid. It is also semantically meaningful, as it indicate that the content has been deleted.
- <s>: Represent text that is no longer accurate or relevant, but not necessarily deleted. It is often used for content that has been superseded or is inaccurate but still relevant in the context.
Example using <del> and <s>:
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Text Strikethrough with HTML5 Tags</title> </head> <body> <p><del>This price was $100, but it has been remove.</del></p> <p><s>This information is outdated.</s></p> </body> </html>
Best Practices for Using Strikethrough Effect
Even though the <strike> tag is deprecated, strikethrough text still play an important role in web content. it is often used in the following context
Price comparison: Showing an original price and a discounted price, where the original price is struck through.
Content revision: Marking text that has been updated or removed.
Task completion: Indicating that certain item on a to-do list or checklist have been completed.
When applying the strikethrough effect it is important to use the right tool depending on the context.
If you are simply styling text with a line-through without any specific meaning using CSS is the best option.
Xml Hello World
Simple “Hello World” program in XML (Extensible Markup Language).
