<s>
Overview
The <s> element in HTML indicates content that is no longer accurate, relevant, or in use. It's commonly used to denote replaced information, and the text within the tags is rendered as a strikethrough (a horizontal line drawn through the center of the text).
Examples and Usage
To demonstrate a simple potential use case, let's envision an e-commerce setting during a special sale:
<p>Grab the latest Smartphone X!</p>
<p><s>Regular Price: $999</s></p>
<p>Special Sale: Only <strong>$799</strong>!</p>
In this promotional context:
The
<p>tags are used to present the content as individual paragraphs.The original price is crossed out using the
<s>tag, indicating the reduction.The
<strong>tag is used purely to emphasize the new discounted price.
The text-decoration property in CSS is linked to the <s> element. By default, this property's value for the <s> element is line-through, which gives the strikethrough effect.
Moreover, it's crucial to differentiate between the <s> and <del> elements. Both visually render text with a strikethrough, but they have unique semantic interpretations. The <del> tag is specifically reserved for indicating deletions in a document, especially when showcasing edits or modifications.
Attribute Breakdown
The <s> element doesn't have any specific attributes; it inherits global attributes common to all HTML elements.
Accessibility Aspects
The <s> element doesn't inherently have a distinct ARIA role associated with it. By default, many screen readers won't vocalize the presence of the <s> element. The living standard specification suggests that while any role can be assigned to the <s> element, the deletion role is not recommended. Therefore, it's critical to make sure the surrounding content clarifies its meaning for all users.
Associated Elements
<del><ins>
Additional Notes
Both
<s>and<del>render text with a strikethrough,<del>is semantically used to represent deletions in a document, especially in cases where the changes between two versions of a document are being highlighted.<strike>is a deprecated tag and shouldn't be used in modern web design. It served a similar visual purpose but lacked the semantic meaning of<s>.The
<ins>element is the opposite of<del>, representing inserted content in a document. It typically renders text as underlined.
Browser Compatibility
For a detailed breakdown of specific browser nuances and older version support refer to the first link in the Useful Resources below.
| Browser | Chrome | Edge | Safari | Firefox | Opera | Internet Explorer |
|---|---|---|---|---|---|---|
| Support | Yes | Yes* | Yes | Yes | Yes | Yes* |