Using the HTML `<s>` Element to Indicate Outdated or Incorrect Text

Learn how to use the HTML `<s>` (strikethrough) element to semantically mark up text that is no longer accurate or relevant. This tutorial explains the difference between `<s>` and ``, demonstrates its usage, and shows how to customize its appearance using CSS for improved content clarity and accessibility.

Using the HTML `<s>` (Strikethrough) Element

Understanding the `<s>` Element

The HTML `<s>` (strikethrough) element is used to indicate text that is no longer accurate or relevant. Browsers typically render this text with a line through it, visually showing that the text has been superseded or is outdated. It's important to use this tag semantically; it's not simply for styling text; it is designed to show that the text is no longer valid or correct. For markup indicating text that has been removed from a document, use the `<del>` tag instead. You can customize the appearance of the strikethrough using CSS (Cascading Style Sheets).

Using the `<s>` Element

To mark up text as no longer accurate, place the text within the opening and closing `<s>` tags.

<p>Only <s>50</s> <ins>25</ins> tickets left!</p>

Browser Support for `<s>`

The `<s>` element is supported by all major modern browsers.

Default Styling and CSS Customization

Most browsers render the `<s>` element with a line through the text by default. You can change this using CSS:

s {
  text-decoration: line-through;
  color: red;
}