What is the difference between <s> and <del> in HTML, and do they affect website rankings?

Question

What is the difference between <s> and <del>? I have read here that there are semantic differences between <b> and <strong>, does this apply to <s> and <del>? Additionally, how are such semantic differences, if any, interpreted by search engines and what affect would they have on rankings? Are there any other tags that affect search rankings?

Answer 1

<s> and <del> both still exist in the HTML specification.

• The <del> element represents a removal from the document.
• The <s> represents contents that are no longer accurate or no longer relevant.

That is to say that they actually represent different things semantically. Specifically <del> would be used if you had an existing document and wanted to indicate text that was in the document, but has been removed. This would be different than text in a document that is no longer accurate, but that has not been removed (you could use <s> for that).

You should not use or depend on either for styling even though most browsers do have them strike-through by default. You should only rely on CSS for presentation.

Due to the mercurial nature of how search engines work, it's very difficult to say whether one tag or another will make a difference on how keywords are created and your content is indexed. You should focus on creating good content that is semantically correct, and your website rank will follow.

Answer 2

After reading the existing answer, I left still confused about which one to use in my app. We agree that presentationally they are the same, and the difference mostly comes down to semantics. Mozilla's MDN docs helped clarify the semantics for me.

I think <s> is correct for most use cases, and here's why along with the four relevant options:

1. <strike>

   It's clear that <strike> is deprecated, and therefore not correct to use anymore.

2. <s>

   From <s> on MDN:

   The HTML Strikethrough Element (<s>) renders text with a strikethrough, or a line through it. Use the <s> element to represent things that are no longer relevant or no longer accurate. However, <s> is not appropriate when indicating document edits; for that, use the <del> and <ins> elements, as appropriate.**

3. <del>

   From <del> on MDN:

   The HTML Deleted Text Element (<del>) represents a range of text that has been deleted from a document. This element is often (but need not be) rendered with strike-through text.

   The biggest key to me on this page is that <del>, like <ins>, offers two additional (optional) attributes: cite and datetime which make sense in referring to a change in the context of a document. As a counterexample, if I were updating a restaurant menu, citing a source for a menu item being sold out doesn't seem relevant.

4. No tag / use CSS

   If none of the above seem correct for your use case, remember that you can still define a custom class.

   .purchased { text-decoration: line-through; }

   <p>Wish list</p>  <ul>    <li class="purchased">New MacBook</li>    <li>Cookies</li>  </ul>