<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:
<p>tags are used to present the content as individual paragraphs.
The original price is crossed out using the
<s>tag, indicating the reduction.
<strong>tag is used purely to emphasize the new discounted price.
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
<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.
<s> element doesn't have any specific attributes; it inherits global attributes common to all HTML elements.
<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.
<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
<ins>element is the opposite of
<del>, representing inserted content in a document. It typically renders text as underlined.
For a detailed breakdown of specific browser nuances and older version support refer to the first link in the Useful Resources below.