What is the difference between and in HTML, and do they affect website rankings?

Answer 1

I would use them the way they are semantically defined: DEL for text that has been removed, and S for text that is now inaccurate but hasn't been removed.

These may mostly appear the same, but could be handled differently by screen readers and other accessibility tools - DEL may be ignored completely (eg: not read out) and S may be read out but differentiated from normal text.

Answer 2

<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 3

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>

Answer 4

There is no practical difference between del and s, except that the tag names are different. They have the same default rendering (overstruck text), and there is no evidence of any difference in processing by browsers or search engines, and no reason to expect such differences, since the “semantic” definitions are vague and authors don’t care much about them. There is no evidence of any action in search engines on these elements – they operate on text and usually ignore text-level markup, except possibly for some elements that might be regarded as giving their content greater relative weight within a page.

The default, or “expected” default rendering is explicitly specified in the Rendering section of HTML5 CR: del, s, strike { text-decoration: line-through; }

The theoretical difference is what HTML specifications and drafts say about their “meaning”, which varies from one HTML version to another.

So you can use either element, or neither. Overstriking text is not such a good idea, since it easily makes some letters difficult to read. But if you need to overstrike (e.g., because an ad needs to contain old price overstruck), it is perhaps safest to use strike, which is an honest presentational element. So you avoid even the theoretical possibility that some software could interpret s or del in some special way, based on someone’s reading of the HTML5 CR perhaps, possibly differing from your intentions, and thus possibly causing some rendering or processing that is no consistent with your reason for overstriking. (Historically, s and strike have been synonymous, but HTML5 CR makes an arbitrary distinction between them, making s “semantic” and strike presentational.)