HTML <s> s tag
The <s> tag in HTML is used to indicate strikethrough text, which visually represents text that has been crossed out or is no longer relevant. It is a presentation tag that shows text with a line through it, suggesting that the text has been removed or is obsolete.
Key Features:
- Strikethrough Style: The
<s>tag applies a line through the text, making it appear crossed out. - Historical Relevance: Originally used to indicate text that was incorrect or no longer relevant.
Basic Syntax:
<p>This is an <s>obsolete</s> term.</p>
In this example:
- The word "obsolete" is displayed with a line through it, indicating that it is no longer applicable or relevant.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Strikethrough Example</title>
</head>
<body>
<p>The price was <s>$99.99</s> but is now $79.99.</p>
<p>Please disregard the <s>previous instructions</s>; the new instructions are available.</p>
</body>
</html>
In this example:
- The
<s>tag is used to show that the price "$99.99" is no longer valid. - The previous instructions are crossed out to indicate they should no longer be followed.
Use Cases:
- Outdated Information: To show that specific text or information is outdated or has been superseded.
- Corrections: To indicate corrections in text where the original content is still visible but marked as incorrect or replaced.
- Visibility of Changes: To visually show changes in documents, especially in contexts where tracking revisions is important.
Modern Usage:
While the <s> tag is still valid and functional, its use has been largely superseded by the <del> tag (for deleted content) and <ins> tag (for inserted content), which are more semantically appropriate for indicating changes in content. The <s> tag is more commonly used for stylistic purposes rather than semantic changes.
CSS Styling:
You can style the <s> element using CSS to modify its appearance if needed.
s {
text-decoration: line-through;
color: #999; /* Optional: change the color of the strikethrough text */
}
In this example:
- The
text-decoration: line-through;property ensures the text is displayed with a line through it. - The color is set to a light gray to differentiate the strikethrough text from regular text.
Key Points:
- Purpose: The
<s>tag is used to show text with a strikethrough effect, indicating it is no longer relevant or has been removed. - Styling: Can be customized with CSS to fit the design of the webpage.
- Modern Alternatives: Consider using
<del>for semantic purposes when indicating deleted content.
In summary, the <s> tag is used to display text with a strikethrough line, indicating that the text is no longer applicable or has been removed. While it is still valid, its usage is less common in favor of more semantically appropriate elements like <del> and <ins>