Have you ever visited an e-commerce site and noticed an old price crossed out with a shiny new discount next to it? The HTML s Tag is what normally makes that visual effect happen.
It may seem like a minor cosmetic option, but utilising the right tag makes sure that your code stays semantic and easy for browsers to read. We will go over the syntax of the s tag in this article, look at a real-world example, and compare it to other related
What is the HTML s Tag?
The HTML <s> tag represents text that is no longer correct, accurate, or relevant and is typically displayed with a strikethrough.
Its primary purpose is to identify text that is no longer correct, accurate, or relevant. When you wrap a word or sentence in this tag, the browser renders it with a line drawn through the middle.
It is important to note that this tag is specifically intended for things that have changed. If you are keeping track of an event that was supposed to happen on a certain date but has been shifted to a different date, you would use this element to show the former date. This gives the reader a clear idea of what happened before and after.
HTML s Tag Syntax
The syntax for the s tag is easy to understand. It is a paired tag, which means it needs both an opening and a closing tag. A line will run through everything placed between these two tags.
By default, browsers apply the following styling to the <s> tag:
s {
text-decoration: line-through;
}
Syntax Structure:
<s> This text will have a line through it </s>
It doesn’t start on a new line and only takes up as much space as it needs because it is an inline element. You can easily include it inside paragraphs, list items, or headings without messing up the structure of your page.
HTML s Tag Example
This is a simple HTML s tag example in HTML that is easy for beginners to understand:
<p><s>Only 50 tickets left!</s></p>
<p>SOLD OUT!</p>
Let’s look at a simple example to really get how this works. Let’s consider making a simple product page for a bookstore:
HTML
<!DOCTYPE html>
<html>
<body>
<h2>Summer Book Sale!</h2>
<p>Grab the latest thriller for only <s>£25.00</s> <strong>£15.00</strong>!</p>
<p>This offer is <s>available until Friday</s> extended until Sunday!</p>
</body>
</html>
In this case, the user may immediately see that the initial pricing is no longer applicable. The use of this here offers value right away by drawing attention to the savings, which is a typical technique in digital marketing and UI design.
HTML s Tag vs Del Tag
Many people just starting out are confused about the distinction between the s tag and the del tag. While they often look identical in a web browser (both show a strikethrough), they carry different meanings for search engines and screen readers.
The <s> tag should not be used for deleted text. For content that has been removed from a document, the <del> tag is the correct semantic choice.
- The s Tag: Used for information that is no longer relevant or accurate. It is about the “status” of the information.
- The del Tag: Used specifically to indicate that text has been “deleted” or removed from a document, often used in tandem with the <ins> (insert) tag to show edits in a legal document or a code repository.
| Feature | s Tag | del Tag |
| Primary Purpose | To show outdated or irrelevant content. | To mark text as deleted during an edit. |
| Semantic Meaning | “No longer accurate.” | “Removed from document.” |
| Visual Style | Strikethrough (line-through). | Strikethrough (line-through). |
| Best Use Case | Price changes or expired deals. | Tracking changes in a blog post or contract. |
HTML s Tag Usage
You should follow best practices when using the s tag in HTML to make sure your site stays accessible. Screen readers don’t always read strikethrough text, so it’s important to give more information. You can add more information to the surrounding text so everyone knows the content is outdated.
Below are some of the HTML s Tag Usage:
- E-commerce: Showing a “Was” pricing and a “Now” price.
- Changelogs: Showing old version numbers that have been replaced.
- To-Do Lists: Putting a check mark next to a job to show that it is done (while checkboxes are more prevalent, s tags are a wonderful visual confirmation).
- News Updates: Fixing a mistake in an article while being honest about it.
HTML s Tag Attributes
In HTML, the <s> tag can have Global Attributes (such as class, id, and style) and Event Attributes.
Like most other HTML elements, you can simply customise or change the <s> element with CSS and JavaScript.
HTML s Tag Styling with CSS
While the default look is a simple black line, you can use a tag styling to make the element fit your brand’s aesthetic. By using CSS, you can change the colour, thickness, and style of the strikethrough line.
For example, you might want a red line to make the “old” price stand out more.
Example of Custom Styling:
CSS
s {
color: grey;
text-decoration-color: red;
text-decoration-thickness: 2px;
}
In this scenario, the text stays grey, but the line cutting through it is a bold red. This level of customisation is what separates a basic website from a professional-grade user interface.
Also Read:
- HTML Address Tag: Syntax, Components, Attributes, And Examples
- HTML Applet Tag: Is Applet Tag No Longer Supported On HTML5
- HTML Article Tag: Definition, Syntax, And Examples
- HTML Area Tag: Syntax, Example, And Attributes
- HTML Abbr Tag: Syntax, Attribute, And Examples
HTML s Tag Browser Support
All modern web browsers, like Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, and Opera, support the <s> tag because it is a standard part of HTML5. You don’t have to worry about the tag not working on older devices because even outdated browsers understand the strikethrough command.
Keep in mind that the s element in HTML is only for semantic “relevance.” If you merely want to cross something out for decoration and not to say that it is “outdated,” you should use the CSS property text-decoration: line-through; on a tag.
FAQs
What is the main use of the s Tag?
The main s tag usage is to represent text that is no longer correct or relevant, such as an old price or an expired deadline.
How do I write the s tag syntax?
The syntax is very simple: use s to start the strikethrough and end s to end it. It is an inline element.
Is there a difference between s tag vs del tag?
Yes. While both look like a strikethrough, the s tag marks content as irrelevant, whereas the del tag marks it as officially deleted from a document.
Can I change the colour of the line in the tag styling?
Yes, you can use the CSS property text-decoration-color to change the colour of the line independently of the text.
Should I use the s tag for everything I want to cross out?
Not necessarily. Use the HTML s tag in HTML for semantic reasons (outdated info). If you just want the visual effect for design, use CSS.
