HTML <strike> Tag
The <strike> tag in HTML was used to display text with a horizontal line drawn through it, creating a "strikethrough" effect. This tag was commonly used to indicate that a piece of text is no longer valid or accurate. However, it is now deprecated in favor of more semantically appropriate tags and CSS styling. Although you might encounter it in older codebases, it's crucial to use alternative methods for marking deleted or outdated content.
Syntax
<strike>Strikethrough text</strike>
Attributes
The <strike> tag does not support any specific attributes other than the Global Attributes common to all HTML elements.
| Attribute | Value | Description |
|---|---|---|
| class | classnames | Specifies one or more class names for an element (often used to point to a class in a style sheet) |
| id | id | Specifies a unique id for an element |
| style | CSS properties | Specifies an inline CSS style for an element |
| title | text | Specifies extra information about an element |
| dir | ltr or rtl | Specifies the direction of the text within the element |
| lang | language_code | Specifies the language of the element |
| tabindex | number | Specifies the tab order of an element |
| accesskey | character | Specifies a shortcut key to activate/focus an element |
Example
<p>This is some <strike>old text</strike> that should not be considered.</p>
More Examples
Basic usage showing strikethrough text
<p>Our product was priced at <strike>$20</strike> but now it is <mark>$15</mark>.</p>
This example demonstrates a basic way of using the strike to mark old pricing.
Using with surrounding elements
<p>We offer <strike>free shipping</strike> and <mark>discounted prices</mark> today!</p>
Here, the strikethrough is part of a larger sentence.
Showing changes in a list
<ul>
<li><strike>Item 1</strike></li>
<li>Item 2</li>
<li>Item 3</li>
<li><strike>Item 4</strike></li>
</ul>
Strikethrough can also be used within lists to demonstrate outdated items
Combined with other deprecated tags (Example for Legacy understanding)
<p><strike><b><font color="red">This is very old HTML</font></b></strike></p>
A good example showing how <strike> was combined with other deprecated tags in the past, highlighting the need for modernization.
Browser Support
The <strike> tag is supported by all major browsers, but it is deprecated.
- Chrome: Supported
- Edge: Supported
- Firefox: Supported
- Safari: Supported
- Opera: Supported
Despite wide support, it is not recommended for new HTML documents.
Notes and Tips
- Deprecated Tag: The <strike> tag is deprecated and should not be used in modern HTML.
- Use <del>: For indicating deleted text, use the <del> tag instead. The <del> tag provides semantic meaning to the deleted text.
- CSS
text-decoration: Use CSS'stext-decoration: line-through;property to achieve the strikethrough effect if you do not want to imply deleted text meaning. - Accessibility: Using <del> provides semantic information to assistive technologies, which is helpful for users with disabilities.
- Maintainability: Using CSS for presentation keeps your HTML more semantic and maintainable in the long run. Always separate structure from presentation.
- Legacy Systems: You might encounter the
<strike>tag in legacy systems. While understanding it is beneficial, always aim to update the legacy code to avoid it.
