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

Answer 1

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 is correct for most use cases, and here's why along with the four relevant options:

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

2. From on MDN:

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

3. From on MDN:

   The HTML Deleted Text Element () 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 , like , 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; }

   Wish list
   
     
   New MacBook
     
   Cookies