取り消し線のタグはsタグとdelタグの二種あり表示され方は同じだが使い方の意味が異なる

2014.06.08
この記事は約4分で読めます。

取り消し線のhtmlタグhtmlの取り消し線は<strike>～</strike>であったが、html5からこのstrikeタグが非推奨となった。html5では取り消し線のタグにsタグ<s>～</s>かdelタグ<del>～</del>か、どちらかを使うことになる。二種類とも表示され方は同じだが、調べてみると使い方の意味が異なる。
sタグ<s>～</s>は以前書いた文章の訂正「訂正」などに使うのに適していて、delタグは以前書いた文章の削除「削除」に適している。ややこしいが、取り消し線の中身の内容が以前は正しくて今でもなんらかの意味を持っている場合はsタグ<s>～</s>のほうがよいということだ。実用上はほとんどがsタグになるように思われる。

sタグ<s>～</s>の使用例

sタグ<s>～</s>の使用例としては、セミナー日程が変更になった場合に使うことがある。すでに告知されていて、以前のセミナー日程を認知されている方もいるため、明確に日が変わったことを表示する意味で取り消し線は有効である。単に変更になった日程だけを書いた場合に、以前の日程を知っている人にはどちらが正しいのか悩ませてしまうためだ。

ブログマーケティング道場（５回）
平成26年6月12日（木）、26日（木）、7月10日（木）、24日（木）、8月7日（木） 18:00-21:00
※日程変更になりました。
平成26年10月15日（水）、29日（水）、11月12日（水）、26日（水）、12月10日（水） 18:00-21:00
受講料: 27,000円（税込） テキスト料: 0円（税込）
http://www.fisc.jp/pckouza/class.php?y=h26&id=0034

というように、取り消し線があるほうがわかりやすい。この場合にsタグ<s>～</s>を使う。

他にw3cのサイトでも利用例があった。
特売などのセールで今だけ特別価格（値引き）を表示する場合は取り消し線が有効である。

▼表示される文章内容
アイスティーとレモネードを買う
推奨小売価格：ボトルあたり3.99ドル
今だけ2.99ドルで販売！
▼上記のhtmlソース
アイスティーとレモネードを買う
<s>推奨小売価格：ボトルあたり3.99ドル</s>
今だけ2.99ドルで販売！

以下、http://www.w3.org/TR/2012/CR-html5-20121217/text-level-semantics.htmlより引用（英文原文のまま）

The s element represents contents that are no longer accurate or no longer relevant.

The s element is not appropriate when indicating document edits; to mark a span of text as having been removed from a document, use the del element.

In this example a recommended retail price has been marked as no longer relevant as the product in question has a new sale price.

<p>Buy our Iced Tea and Lemonade!</p>
<p><s>Recommended retail price: $3.99 per bottle</s></p>
<p><strong>Now selling for just $2.99 a bottle!</strong></p>

以下は2022年6月2日追記

実際の取り消し線は<del>タグの利用が多い

主要なCMSでの取り消し線は<del>タグになっているようです。

torikesisendel.jpg

当ブログはムーバブルタイプで構築しているが取り消し線を設定すると<del>タグで設定されます。

またワードプレスで取り消し線を設定すると
ワードプレスだと
の部分は
<del>ワードプレスだと</del>
というタグになっています。

なので、現実的には<del>タグに収束していくのかもしれません。