ブラウザで取り消し線を表示するとき、s要素かdel要素が使われます。s要素は一時期廃止の話も出ましたが、最新仕様WHATWGのHTMLでは利用できます。使用場面によって使い分けましょう。
s要素
WHATWG（21 May 2021）日本語訳 s要素より引用します。
s要素は正確ではないか、もはや関連しないコンテンツを表す。
実際の使用例は英語だったので翻訳して記載します。
コード
|
1 2 3 |
<p>レモネード発売！</p> <p><s>希望小売価格 450円</s></p> <p><strong>今だけ 350円！</strong></p> |
ブラウザでの表示
レモネード発売！
希望小売価格 450円
今だけ 350円！
希望小売価格450円は、今だけ適用されない情報です。ただし希望小売価格自体がなくなっているわけではないので、恒久的なdel要素より、一時的なs要素が適切です。
del要素
WHATWG（21 May 2021）日本語訳 del要素より引用。
del要素は、文書からの削除を表す。
こちらも使用例を見ましょう。
コード
|
1 2 3 4 5 6 7 |
<h1>やること</h1> <ul> <li>食洗器から皿を出す</li> <li><del datetime="2009-10-11T01:25-07:00">YouTubeで講演を見る</del></li> <li><del datetime="2009-10-10T23:38-07:00">講演資料をダウンロードする</del></li> <li>プリンターを買う</li> </ul> |
ブラウザでの表示
やること
- 食洗器から皿を出す
YouTubeで講演を見る講演資料をダウンロードする- プリンターを買う
家事が後回しになってしまいますね。
それはよいとして、すでにやり終え、削除した項目にdel要素を使っています。削除した履歴を残したいときに使います。
いつ削除したか、datetime属性も設定できます。s要素にはない属性です。
一時的な変更は<s>、恒久的な変更は<del>
ショッピングサイトのセール価格など、一時的な変更はs要素。
ブログ記事の誤りを訂正して伝えるときなど、不可逆的な変更はdel要素を使います。
ブラウザのデフォルトCSSでは同じ取り消し線に見えますが、意味によって使い分けられればと思います。