【HTML Living Standard】s要素の使い方
s要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
sオブジェクトは、もはや正確ではない、あるいは関連性がなくなったテキストを表すHTML要素です。この要素は、提供された情報が時代遅れになったり、以前は正しかったが現在は誤りである場合に、その情報が過去には存在したことを示すために使用されます。
ブラウザは通常、s要素で囲まれたテキストに取り消し線を表示することで、そのコンテンツが非推奨であることを視覚的に示します。例えば、オンラインストアで商品の旧価格を表示し、新しい価格と並べて示す際などに役立ちます。これにより、ユーザーは情報が更新されたことや、提示されたコンテンツが現在の状況には当てはまらないことを容易に理解できます。
s要素を使用する際の重要な点は、純粋な見た目（取り消し線）のためだけに使用しないことです。単にテキストに打ち消し線を引くスタイルを適用したい場合は、CSSのtext-decoration: line-through;プロパティを使用するべきです。s要素は、その内容に「もはや正確ではない」というセマンティックな意味合いを付与するために利用されるべきであり、コンテンツの構造と意味を正しく伝える上で重要な役割を果たします。
HTMLには、文書から削除されたテキストを示すdel要素もありますが、s要素とは目的が異なります。s要素は、情報が不正確になったり非推奨になったりしたものの、その情報自体が文書から削除されたわけではなく、存在し続けることに意味がある場合に使用されます。
構文(syntax)
1<s>テキスト</s>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML s要素で連続スペースを扱う
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>s要素のサンプル</title> 7</head> 8<body> 9 <!-- s要素は、もはや正確ではない、関連がない、または削除されたテキストを表し、通常は取り消し線で表示されます。 --> 10 <!-- この例では、s要素が適用されるテキスト内に複数のスペースが含まれています。 11 HTMLでは、連続するスペースは通常1つのスペースとして扱われます。 --> 12 <p> 13 <s>この 古い 情報 は 削除されました。</s> 14 <br> 15 正しい情報: この情報は最新のものに更新されました。 16 </p> 17 18 <p> 19 <s>誤った 価格: 1,500 円</s> 正しい価格: 1,200 円 20 </p> 21</body> 22</html>
s要素は、HTMLのLiving Standardで定義されている要素です。この要素は、もはや正確ではない、関連がない、または削除されたテキストを表すために使用されます。ブラウザでは、通常、s要素で囲まれたテキストに取り消し線が表示され、その情報が古くなったことや修正されたことを視覚的に伝えます。
サンプルコードでは、「この 古い 情報 は 削除されました。」という文章にs要素が適用されています。これにより、この情報がもはや有効ではないことが示され、続く正しい情報との対比が明確になります。また、「誤った 価格: 1,500 円」のように、修正前の価格を示す際にも利用できます。
s要素は引数を持たず、特定の値を返すこともありません。これは、テキストに意味的なマークアップと視覚的な装飾を適用するためだけの要素であるためです。
なお、サンプルコードの「この 古い 情報 は 削除されました。」という部分に見られるように、HTMLではテキストコンテンツ内の連続する複数の半角スペースは、通常1つの半角スペースとして扱われます。これは、HTMLが要素間の空白文字を折りたたむという特性によるものです。
s要素は、もはや正確ではない、関連がない、または削除されたテキストを意味し、通常は取り消し線で表示されます。この要素は単に取り消し線を引くスタイルではなく、その情報が古いという「意味」を伝えるために利用される点に注意してください。サンプルコードで特に重要なのは、HTMLにおけるスペースの扱いです。要素内の連続する半角スペースや改行は、ブラウザによって通常一つの半角スペースとして表示されます。例えば、「古い 情報」と記述しても、画面上では「古い 情報」と表示される点に留意してください。意図的に複数のスペースを表現したい場合は、特殊文字の （ノーブレークスペース）を使用するか、CSSのwhite-spaceプロパティを検討すると良いでしょう。
HTML selectで選択肢を設定する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>配送オプションの選択</title> 7</head> 8<body> 9 <!-- 配送オプションを選択するためのフォーム --> 10 <form action="#" method="get"> 11 <label for="delivery-option">配送方法を選択してください:</label> 12 <!-- ドロップダウンリストを作成するselect要素 --> 13 <select id="delivery-option" name="deliveryMethod"> 14 <option value="standard">標準配送</option> 15 <option value="express">速達配送</option> 16 <!-- <s>要素を使用して、利用できなくなった、または非推奨の選択肢を示す --> 17 <option value="same-day-unavailable"><s>当日配送</s> (現在一時停止中)</option> 18 <option value="international">国際配送</option> 19 </select> 20 <br> 21 <button type="submit">選択を確定</button> 22 </form> 23</body> 24</html>
HTMLの<s>要素は、もはや正確ではない、関連性がない、または利用できなくなったテキストを表すために使用されます。この要素で囲まれたテキストは、通常、ブラウザによって取り消し線が引かれて表示される視覚的な効果を持ちます。
この<s>要素には、特定の引数や戻り値は存在しません。要素の開始タグ<s>と終了タグ</s>で囲まれたコンテンツに対して、視覚的な表現を追加する役割を果たします。
サンプルコードでは、配送オプションを選択するためのドロップダウンリスト（<select>要素）の中に、「<s>当日配送</s> (現在一時停止中)」という形で登場しています。これは、かつて提供されていた、または提供される予定だった「当日配送」のオプションが、現在では利用できない状態であることをユーザーに明示するために使用されています。取り消し線が表示されることで、その選択肢が非推奨や一時停止中であると直感的に理解でき、ユーザーが誤って選択しようとすることを防ぎます。
このように<s>要素は、ウェブサイト上で情報が古くなったり、利用できなくなったりした際に、その状態をユーザーに分かりやすく伝えるための重要な手段となります。
HTMLの<s>要素は、テキストが「もはや正確ではない」「関連性がない」「利用できない」といった状態であることを示すために使用され、視覚的に取り消し線を引きます。これは単なる装飾ではなく、セマンティックな意味を持つ点に注意が必要です。サンプルコードのように、利用できなくなった選択肢をユーザーに伝える際に有効です。ただし、スクリーンリーダーでは取り消し線が読み上げられない場合があるため、視覚障がいのある方にも情報が伝わるよう、「(現在一時停止中)」のような補足説明を必ず併記してください。<s>は「不正確な情報」を示すのに対し、del要素は「文書から削除された情報」を示すため、混同しないように使い分けが重要です。