The Deprecated HTML `<s>` Tag: Why Use `` and `` Instead

Learn why the HTML `<s>` tag is deprecated and should be avoided in modern web development. This tutorial explains its historical use, its limitations, and the superior semantic alternatives—`` and ``—for marking up deleted and inserted text, improving website accessibility and SEO.



The Deprecated HTML `<s>` Tag

Understanding the `<s>` Tag

In HTML 4, the `<s>` (strikethrough) tag was used to display text with a line through it. This was often used to indicate text that was no longer considered correct or accurate. However, the `<s>` tag is now deprecated in HTML5, meaning it is no longer officially supported and should be avoided in new code. The `<s>` tag was primarily a styling element, not carrying any specific semantic meaning, and modern HTML provides better ways to achieve the same visual effect while also adding semantic meaning.

Alternatives to `<s>`

HTML5 offers more semantically correct elements for marking up text that’s no longer valid:

  • <del> (deleted): For text that has been removed from a document. This tag adds semantic meaning, indicating that the content has been deleted, which can be helpful for version control and tracking changes in a document.
  • <ins> (inserted): For text that has been added to a document. This tag also has semantic meaning.

Using these elements is generally preferred over the deprecated `<s>` tag because they provide clear semantic meaning, making your content easier to understand for both users and assistive technologies. You can always use CSS (Cascading Style Sheets) to control the styling of the elements, adding visual appeal while maintaining semantic correctness.

Example: Using `<del>` and `<ins>`

<p>My favorite color was <del>blue</del> but is now <ins>green</ins>.</p>