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