【HTML】s要素の使い方【無効になったテキストに取り消し線を付けます】

テキスト内容が無効になった場合、s要素でマークアップしましょう。

1 s要素の基本的な使い方
2 英語（英文）ではどうなる？
3 s要素は、カタカナにマークアップできるか？
4 各種ブラウザでの表示結果

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>