未分類

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

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

s要素の使い方

以下のプログラムと、ブラウザの表示結果を見てください。

<body>
    <p><s>販売価格:2,000円(税込み)</s>⇒タイムセール価格:1,400円(税込み)</p>
</body>

body要素の中に、「文のかたまり(段落)」を示すp要素があります。

p要素の中には、「販売価格:2,000円(税込み)⇒タイムセール価格:1,400円(税込み)」と書かれた文章があります。

そして、「販売価格:2,000円(税込み)」と書かれたフレーズは、s要素でマークアップされています。

このため、ブラウザの表示結果の通り、「販売価格:2,000円(税込み)」には取り消し線が付けられて表示されています。

英語(英文)ではどうなる?

では、英語(英文)について、s要素でマークアップしてみましょう。

<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>

先ほどのプログラムに、更にもう一行、英文を追加しました。

追加した英文では、「Retail price: 2,000 yen (including tax)」について、s要素でマークアップしてあります。

そして、ブラウザの表示結果の通り、「Retail price: 2,000 yen (including tax)」には取り消し線が付けられて表示されています。

s要素はカタカナにマークアップできるか?

さらに、カタカナ(全角、半角)について、s要素でマークアップを行いました。

<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>

先ほどのプログラムに、カタカナのテキストを含む文を追加しました。

追加した文章では、「ウィンドウズPC」、「ウィンドウズPC」について、s要素でマークアップしてあります。

そして、ブラウザの表示結果の通り、カタカナ(全角および半角)についても、取り消し線を付けて表示できました。

以上から、s要素は、「全角文字」、「半角数字」、「英文字」、「カタカナ(全角及び半角)」に対して、マークアップできることが確認できました。

カテゴリー】パルパブル・コンテンツ、フロー・コンテンツ、フレージング・コンテンツ

s要素が属するカテゴリーは、パルパブル・コンテンツ、フロー・コンテンツ、フレージング・コンテンツになります。

パルパブル・コンテンツに属する要素は、その要素の中にhidden属性が指定されていない要素を1つ以上含める必要があります。

また、フロー・コンテンツに属する要素は、body要素の中に記述される必要があります。フレージング・コンテンツに属する要素は、テキストをマークアップするために記述される必要があります。

つまり、s要素は、以下のプログラムに示す通り、body要素の中においてテキストをマークアップするために記述され、s要素の中にhidden属性が指定されていない要素を1つ以上含めるように記述する必要があります。

<body>
    <p><s>開催日程:6月1日〜6月10日</s>→日程変更:7月10日〜7月20日</p>
</body>

s要素は、上のプログラムに示す通りbody要素の中で、マークアップしたテキストについて「取り消し線を付けた状態」として表示するために、用いられることが求められます。

また、プログラムに示す通り、s要素にhidden属性を指定することなく、s要素の内容「開催日程:6月1日〜6月10日」がブラウザに表示された状態とする必要があります。

【コンテンツ・モデル】フレージング・コンテンツ

s要素のコンテンツ・モデルは、フレージング・コンテンツです。

フレージング・コンテンツに属する要素は、文章内のテキストをマークアップするための要素です。そして、ブラウザに表示される「テキスト」も、フレージング・コンテンツに属する要素と同じように扱うことができます。

つまり、コンテンツ・モデルをフレージング・コンテンツとする要素(例えばs要素)は、その要素の中にフレージング・コンテンツに属する要素またはテキストを含めるように記述する必要があります。

つまり、s要素は、以下のプログラムに示す通り、s要素の中にフレージング・コンテンツに属する要素(例えばstrong要素)を含めるように記述する必要があります。

<body>
    <p><s>販売価格:<strong>2,000円(税込み)</strong></s>⇒タイムセール価格:<strong>1,400円(税込み)</strong></p>
</body>

上に示したプログラムでは、body要素の中のp要素において、「販売価格:2,000円(税込み)」のフレーズがs要素でマークアップされています。

そして、s要素でマークアップされたフレーズのうち「2,000円(税込み)」のテキストがstrong要素でマークアップされています。

このため、ブラウザの表示結果の通り、「販売価格:2,000円(税込み)」のフレーズが「取り消し線を付けた状態」として表示され、さらに「2,000円(税込み)」のテキストに重要性を付与した状態で表示することができています。

各種ブラウザでの表示結果

s要素について、主要なブラウザにおけるサポート状況は、以下の通りです。

Google ChromeMicrosoft EdgeSafariFirefoxOpera
【s要素】
〇:サポートあり、△:制限あり、×:サポートなし、?:不明

以上、s要素の使い方について、ご参考になさってください。

-未分類