<s>タグは、その内容がもはや正確ではなくなった、またはもはや関連性がなくなった事を示す要素です。 文章の一部を削除した事を示すために、<s>を使用するのは適切ではありません。 このような場合は<del>を利用するようにします。
なお一般的なブラウザでは、<s>~</s>で囲まれた部分は取り消し線が引かれた状態で表示されます。
HTML5での変更点
HTML4.01のs要素は、テキストに対して打ち消し線を引くという要素でした。 ですがHTML5では、「その内容がもはや正確ではなくなった、もはや関連性がなくなった」という意味に変わったため、スタイリングを目的とした打ち消し線を引く場合は、CSSでの代替が推奨されています。
例えば下記の使用例の場合なら、s要素の部分には削除されたという意味はありません。 あくまでも、定価がすでに関係なくなっているという意味になります。 この場合で、訂正のために削除したという意味を示したいなら、s要素ではなくdel要素を使います。
なおs要素は訂正されたことを示す要素ではないため、「削除された」という意味を持っていません。 ですので、「本来記述してあったが、削除したもの」という表現を示したい場合はdel要素を使用します。
またHTML5のs要素は非推奨ではなくなっています
書式
- <s 属性="値">~</s> ……… 不正確・無関係という事を示す
使用した時の例
<p>買うなら今!</p> <p><s>定価:10,000円</s></p> <p>今なら割引価格:100円に!</p>
下記はdelを使用した場合の例です。
ブラウザ上ではどちらも打ち消し線が引かれますが、意味は異なるので注意して下さい。
<p><del>今なら割引価格:100円に!</del></p> <p><ins>価格に誤りがありました。正しくは1,000円となります</ins></p> <p>誠に申し訳ないですが、既に頂いたご注文はキャンセルさせて頂きます。</p>
ブラウザ上の表示例
買うなら今!
定価:10,000円
今なら割引価格:100円に!
今なら割引価格:100円に!
価格に誤りがありました。正しくは1,000円となります
誠に申し訳ないですが、既に頂いたご注文はキャンセルさせて頂きます。
対応ブラウザなどのデータ
形式 | <s>~</s> | カテゴリ | フローコンテンツ, フレージングコンテンツ, パルパブルコンテンツ |
---|---|---|---|
親要素 | フレージングコンテンツが期待される場所 | 子要素 | フレージングコンテンツ |
開始タグ | 必須 | 終了タグ | 必須 |
グローバル属性 | accesskey / class / contenteditable / contextmenu / dir / draggable / hidden / id / lang / spellcheck / style / tabindex / title / translate | ||
対応ブラウザ | Internet Explorer8~ , Google Chrome14~ , Firefox7~ , Opera11.5~ , Safari5.1~ |