<strike> Tag in HTML
FREE
Overview
The <strike> HTML tag creates the impression of a strikethrough (cut line) by drawing a horizontal line over the text. To create the same effect, we can use the CSS text-decoration property, the HTML <del> tag, or the HTML <s> tag. The following tutorial provides information about this element, including, attributes, examples of its usage, related properties , and browser compatibility .
Syntax
Note:
- The <body> tag contains the HTML <strike> element.
- HTML5 no longer supports the <strike> tag or we can say that it is deprecated now.
Attributes of <strike> Tag in HTML
Global Attributes
Global attributes are properties that can be applied to all HTML elements and are shared by all. As both standard and non-standard HTML elements support them, they're referred to as global. However, they may not affect some.
Global properties can be applied to any HTML element, including ones not mentioned in the standard. This means that even if utilizing non-standard elements causes the content to be non-HTML5 compliant, some characteristics must be allowed. Despite the fact that
List of Global Attributes
| Attribute | Value | Description |
|---|---|---|
| accesskey | shortcut key | It guides how to create a keyboard shortcut for the currently selected element. The browser should use the first one on the computer keyboard layout. |
| autocapitalize | off / none, on / sentences, words, characters | Controls whether or not text input is automatically capitalized when entered/edited by the user and how it is capitalized. |
| autofocus | false | Indicates that an element will be highlighted when the page loads or when the <dialogue> in which it is included is displayed. |
| class | classname | It is a list of classes for the element, separated by spaces. CSS and JavaScript use classes to identify and access specific components using class selectors or functions. |
| contenteditable | true/false | An enumerated attribute that indicates whether or not the element should be user-modifiable. If this is the scenario, the browser modifies its widget to allow customization. |
| contextmenu | menu-id | The context menu of an element is defined. A context menu appears when the user clicks the right mouse button on an element. |
| data-* | data | Custom data attributes allow private information to be communicated between HTML and its DOM representation, which scripts can use. All such custom data can be accessed using the HTML Element interface of the element on which the attribute is set. |
| dir | ltr / rtl / auto | Specifies the element's text's base direction of directionality. |
| draggable | true/false / auto | An enumerated attribute is used to specify whether or not the element may be dragged using the Drag and Drop API. |
| dropzone | copy/move / link | This parameter determines whether dragged data is copied, relocated, or linked when it is dropped. |
| enterkeyhint | On virtual keyboards, this value indicates the action label (or icon) for displaying the enter key. | |
| exportparts | It can be used to transitively export shadow components from a nested shadow tree to a contained light tree. | |
| hidden | hidden | The value of a Boolean attribute indicates whether or not the element is still relevant. For example, It can be used to hide a website's inaccessible sections until the login procedure is completed. The browser will not render such things. |
| Id | name | Defines a distinct/unique identifier (ID) that must be consistent and unique throughout the document. It identifies the element when linking (through a fragment identifier), scripting, or styling (with CSS). |
| lang | language-code | It is used to specify the primary language for the element's text content. |
| Spellcheck | true/false | It is used to specify whether or not the element should be checked for spelling mistakes. |
| tabindex | number | It is used to specify the tabbing order of an element. |
| title | text | It includes text that presents advisory information about the element to which it belongs. Generally, but not always, such information is given to the user as a tooltip. |
| slot | The slot established by the element whose name attribute matches the value of the slot property is assigned to an element with a slot attribute. | |
| Style | style | Inline CSS is applied to the currently chosen element using style. It is recommended that styles should be defined in separate files. This attribute and the <style> element are designed for quick stylings, such as for testing purposes. |
| translate | yes/no | It is used to specify whether or not the content of the element should be converted when the page is localized. |
| xml | language-code | It is used to specify the predominant language for the element's text content in XHTML documents. |
Note: There are no element-specific attributes for the <strike> tag. Only global attributes apply to this tag.
How to Use <strike> Tag in HTML ?
Browsers will ordinarily display the erased text as strikethrough text, but you can change this with the CSS text-decoration property. The <strike> tag requires a beginning and an ending tag. You just have to enter the text you want to strikethrough between the opening and closing tags.
NOTE: The <strike> tag is Obsolete in HTML5 and should not be used. Every browser supports using the <strike> tag, but it is outdated now and shouldn't be used. Instead, use the <s> tag, the <del> tag, or CSS text-decoration property with the <style> tag. You can just set the CSS text-decoration property to line-through, and the same effect will be created.
Examples
Example 1: In this example, we will explain the <strike> element in HTML.
Output
Example 2: In this example, we will use the <del> tag to define deleted text.
Output:
Example 3: In this example, we will use the <s> tag to mark up no longer correct text.
Output
Accessibility Concerns
-
Moving from users who hear a document's contents to those who see it, those with disabilities such as low vision or dyslexia already have difficulty reading text. By inserting a line through the text, we make it much more difficult for them to read our content. So, it is recommended to avoid overuse of this technique and apply only when necessary.
-
While reading a document, screen reading software does not detect the strikethrough element differently, and therefore the user is not notified about the struck text.
Browser Support
The <strike> tag in HTML is supported by the following browsers :
| Browser | Google Chrome | Internet Explorer | Microsoft Edge 12+ | Firefox | Opera | Safari |
|---|---|---|---|---|---|---|
| Support | Yes | Yes | Yes | Yes | Yes | Yes |
Learn More
Conclusion
- The <strike> tag in HTML is used to specify a strikethrough text.
- The HTML5 standard does not support the deprecated <strike> element.
- You can use the <s> tag or the <del> tag. To create the same effect, you can also use the CSS text-decoration : line through the property with the <style> tag.
- The <s> and <del> tags are both strikethroughs, although they express distinct information about the content. The <s> tag is used to express something that is no longer accurate or relevant. While <del> indicates something that has been removed/deleted from the document.
- There are no element-specific attributes for the <strike> tag. Only global attributes apply to this tag.
Related Tags
- <s>
- <del>
- <ins>