The HTML <s> tag, also known as the "strikethrough" tag, is used to display text with a strikethrough or a line through the middle. This tag typically indicates that the text is no longer relevant, correct, or valid. For example, when updating prices, showing old information, or marking text as obsolete, the <s> tag is an appropriate choice. While it doesn’t change the content’s meaning, it visually suggests that the content is no longer valid.
Syntax of the <s> Tag
The <s> tag wraps the text you want to strike through. The basic syntax is:
<s>Strikethrough Text</s>
When placed around a portion of text, the <s> tag adds a line through the text, indicating that it is obsolete or no longer applicable. It is a simple inline tag that does not disrupt the flow of content on the webpage.
Attributes of the <s> Tag
The <s> tag supports all global attributes in HTML, allowing you to customize its appearance and behavior. Some of the most commonly used global attributes include:
| Attribute | Description |
|---|---|
| class | Specifies one or more class names for the element, useful for CSS styling. |
| id | Defines a unique identifier for the element. |
| style | Applies inline CSS styles to the element. |
| lang | Specifies the language of the element’s content. |
| title | Adds a tooltip when the user hovers over the text. |
These attributes give developers more control over the styling and behavior of the <s> tag, making it highly customizable.
Examples of HTML <s> Tag
Example 1: Strikethrough to Show Discounted Prices
<!DOCTYPE html>
<html>
<head>
<title>Strikethrough Example</title>
</head>
<body>
<p>The original price was <s>$100</s>, but now it's only $80!</p>
</body>
</html>
In this example, the old price $100 is struck through, and the new price $80 is displayed clearly to indicate a discount.
Example 2: Marking Incorrect Information
<!DOCTYPE html>
<html>
<head>
<title>Incorrect Information</title>
</head>
<body>
<p>The event was scheduled for <s>August 5th, 2023</s>, but it has been rescheduled to August 12th, 2023.</p>
</body>
</html>
Here, the <s> tag is used to show that the original event date is no longer valid, and the correct date is provided afterward.
FAQs About HTML <s> Tag
Q1: What is the purpose of the HTML <s> tag?
A: The <s> tag is used to visually represent text that is no longer accurate or applicable by striking it through. It is commonly used to show price reductions, corrected information, or outdated text.
Q2: Can the <s> tag affect the meaning of the content?
A: No, the <s> tag only affects the visual presentation by adding a strikethrough. It does not change the actual meaning of the content for search engines or screen readers.
Q3: Is the <s> tag supported in all modern browsers?
A: Yes, the <s> tag is supported by all modern browsers, including Chrome, Firefox, Safari, and Edge.
Q4: How does the <s> tag differ from the <del> tag?
A: The <s> tag is used for text that is no longer relevant but remains on the page for informational purposes. The <del> tag, on the other hand, indicates that the text was removed and may signify a more permanent change.
Q5: Can I apply CSS styling to the <s> tag?
A: Yes, you can apply custom CSS to the <s> tag using class, id, or inline styles to further modify the appearance of the strikethrough text.
