HTML \ Tag
The <s> tag in HTML is used to represent text that is no longer accurate or relevant but should not be removed from the document. This tag visually renders the enclosed text with a strikethrough, indicating that it's incorrect or no longer valid. While it is considered deprecated in HTML5 in favor of more semantically meaningful options, understanding its purpose and when to use it can still be beneficial.
Syntax
<s>text content</s>
Attributes
The <s> tag supports the Global Attributes in HTML.
| Attribute | Value | Description |
|---|---|---|
accesskey |
character | Specifies a shortcut key to activate/focus an element. |
class |
classname | Specifies one or more class names for an element. |
contenteditable |
true or false |
Specifies if the content is editable. |
data-* |
Any | Used to store custom data private to the page or application. |
dir |
ltr or rtl or auto |
Specifies the text direction for the content inside the tag |
draggable |
true or false or auto |
Specifies whether the element is draggable |
hidden |
hidden |
Specifies if the element is hidden |
id |
id | Specifies a unique ID for an element. |
lang |
language code | Specifies the language of an element's content. |
spellcheck |
true or false |
Specifies whether the element is spellchecked by the browser. |
style |
CSS properties | Specifies inline CSS styling for an element. |
tabindex |
number | Specifies the tab order of an element. |
title |
text | Specifies extra information about an element. |
translate |
yes or no |
Specifies if the content within the tag should be translated |
Example
<p>The price was <s>$19.99</s>, now it's just $14.99!</p>
More Examples
Indicating a Mistake
<p>I was going to say <s>20 miles</s> 30 miles to the nearest city.</p>
Showing an Edited Price
<p>Our product price was <s>$49.99</s>, but it's now only $39.99!</p>
Strikethrough within List
<ul>
<li>Task 1</li>
<li><s>Task 2 (Cancelled)</s></li>
<li>Task 3</li>
</ul>
Applying Inline Styling
<p><s style="color: red;">This text is struck through and red.</s></p>
Combined with other tags
<p>We offer <del>free shipping</del> now you can have <s>free shipping</s> <mark>a discount</mark> with <ins>express shipping!</ins></p>
Browser Support
The <s> tag is supported by all major browsers.
| Browser | Version |
|---|---|
| Chrome | All |
| Edge | All |
| Firefox | All |
| Safari | All |
| Opera | All |
| Internet Explorer | All |
Notes and Tips
- Semantic Alternatives: While the
<s>tag renders text with a strikethrough, the<del>tag is semantically more appropriate when content has been removed from a document.<del>also indicates deleted content, but often paired with<ins>which marks insertion/addition of content. Use<s>if you just want to show something is inaccurate but don't want to convey that it was actively removed. - Accessibility: Screen readers may not announce the presence of an
<s>tag. The text will be read as if the tag didn't exist. When using strikethrough, ensure the context is clear to all users. - Visual Presentation: While the
<s>tag applies a default strikethrough styling, CSS can be used to customize the appearance of the strikethrough (e.g. the color, thickness, or even to replace the line with something else). - Context is Key: Use the
<s>tag when the text should be displayed but marked as no longer correct or relevant. For deleted content, it's better to use the<del>element. - Best Practices: Use sparingly and consider the context. Overuse of
<s>can make the content visually cluttered and harder to read. Opt for clear alternatives like<del>and<ins>where applicable to maintain semantic clarity. - Deprecated but Usable: The
tag is deprecated but still works across all browsers. When using in modern projects, consider semantically more meaningful tags like<del>, which is often paired with<ins>when content is actively being deleted and inserted, for better accessibility and semantic representation of your content.
