37

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?

Community
  • 1
  • 1
octref
  • 6,521
  • 7
  • 28
  • 44

4 Answers4

45

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

Explosion Pills
  • 188,624
  • 52
  • 326
  • 405
  • 5
    This answer seems to exclude an important part of [the W3 Working Group 's `` element's reference](http://www.w3.org/TR/html-markup/s.html#s) which states "The s element represents contents that are no longer accurate or no longer relevant **and that therefore has been “struck” from the document.**" In this respect, surely `` and `` do behave in exactly the same way? – Sprogz Aug 22 '13 at 08:29
  • 1
    I agree with @Sprogz, while I know they are supposed to be semantically different, no matter how many ways I look at it, they are practically the same. And using `` *feels* too much like it is simple typographic markup like ``. For this reason, I lean towards using ``. – gfullam Nov 18 '14 at 15:53
  • 7
    The now-approved HTML5 Recommendation says about `` just what this answer quotes from an older draft, without any mention of something being “struck”. The only example is about an old retail price being mentioned in addition to new price. It is absurd to call the old price “no longer accurate or no longer relevant”, since it is mentioned specifically for comparison—it is accurate (as a fact about the past) and relevant. This shows that these “semantic” definitions and distinctions are on a thin ice. – Jukka K. Korpela Nov 27 '14 at 22:27
  • 1
    Also, increasing the inherent confusion here, the example for `DEL` in the [current "living standard"](https://html.spec.whatwg.org/multipage/edits.html#the-del-element) is not even the usual diff sample, but something one would intuitively do with `S` instead: a "done" item of a checklist (which is _certainly not_ "removed from the document" by any means, until it is, well, actually removed...) – Sz. Nov 22 '18 at 02:28
17

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>
Community
  • 1
  • 1
Taylor D. Edmiston
  • 12,088
  • 6
  • 56
  • 76
5

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.)

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • 1
    This is not good practice. Refer to the accepted answer for a better explanation. – Bardi Harborow Nov 27 '14 at 22:16
  • Perhaps it would be more correct to say that "There is no practical difference *in presentation*". Semantically the two are quite different, and semantics in practice are more than theoretical. – Taylor D. Edmiston Sep 03 '16 at 20:42
  • Taylor, "The two are quite different" is quite a bit of a stretch... Not even the standard itself can make a clear-cut case for it. Study the comments below the accepted answer for a more subtle picture. The "definitions" of their semantics are ambiguous at best, and the examples the W3C uses in the specs are downright confusing (`S` for an old price tag, but 'DEL' for an old (done) todo-item...). (NOTE: obviously, there are cases where the choice is clear, like `DEL` for rendering diff outputs etc.) – Sz. Nov 22 '18 at 02:42
2

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.

Nick McLeod
  • 91
  • 1
  • 4