
テキスト内容が無効になった場合、s要素でマークアップしましょう。
s要素の基本的な使い方
まずは、以下のプログラムと、ブラウザでの表示結果を見てください。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>s要素</title>
</head>
<body>
<p><s>販売価格:2,000円(税込み)</s>⇒タイムセール価格:1,400円(税込み)</p>
</body>
</html>

body要素の中に、「文のかたまり(段落)」を示すp要素があります。
p要素の中には、「販売価格:2,000円(税込み)⇒タイムセール価格:1,400円(税込み)」と書かれた文章があります。
そして、「販売価格:2,000円(税込み)」と書かれたフレーズは、s要素でマークアップされています。
このため、ブラウザでの表示結果の通り、「販売価格:2,000円(税込み)」には、取り消し線が付けられて表示されています。
英語(英文)ではどうなる?
では、英語(英文)について、s要素でマークアップしてみましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>s要素</title>
</head>
<body>
<p><s>販売価格:2,000円(税込み)</s>⇒タイムセール価格:1,400円(税込み)</p>
<p><s>Retail price: 2,000 yen (including tax)</s> => Time sale price: 1,400 yen (including tax)</p>
</body>
</html>

先ほどのプログラムに、更にもう一行、英文を追加しました。
追加した英文では、「Retail price: 2,000 yen (including tax)」について、s要素でマークアップしてあります。
そして、ブラウザでの表示結果の通り、「Retail price: 2,000 yen (including tax)」には、取り消し線が付けられて表示されています。
s要素は、カタカナにマークアップできるか?
さらに、カタカナ(全角、半角)について、s要素でマークアップを行いました。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>s要素</title>
</head>
<body>
<p><s>販売価格:2,000円(税込み)</s>⇒タイムセール価格:1,400円(税込み)</p>
<p><s>Retail price: 2,000 yen (including tax)</s> => Time sale price: 1,400 yen (including tax)</p>
<p>購入パソコン:<s>ウィンドウズPC</s>⇒Mac Book Airへ変更</p>
<p>購入パソコン:<s>ウィンドウズPC</s>⇒Mac Book Airへ変更</p>
</body>
</html>

先ほどのプログラムに、カタカナのテキストを含む文を追加しました。
追加した文章では、「ウィンドウズPC」、「ウィンドウズPC」について、s要素でマークアップしてあります。
そして、ブラウザでの表示結果の通り、カタカナ(全角および半角)についても、取り消し線を付けて表示できました。
以上から、s要素は、「全角文字」、「半角数字」、「英文字」、「カタカナ(全角及び半角)」に対して、マークアップできることが確認できました。
各種ブラウザでの表示結果
また、s要素の各種ブラウザにおける最新のサポート状況は、以下のようになってます。
【HTML】 | Internet Explorer | Google Chrome | Microsoft Edge | Safari | Firefox | Opera |
s要素 | ○ | ○ | ○ | ○ | ○ | ○ |
以上、s要素の使い方について、ご参考になさってください!