未分類

【HTML】b要素の使い方【他のテキストと区別するためのマークアップです】

b要素を使えば、視覚的に他のテキストと区別できるようになります。

b要素の使い方

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

<body>
    <p>日本とハワイの時差は<b>19</b>時間です。</p>
</body>

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

p要素の中には、「日本とハワイの時差は19時間です。」と書かれた文章があります。

そして「19」と書かれたフレーズは、b要素でマークアップされています。

このため、ブラウザの表示結果の通り「19」は太字として表示されています。

つまり、この「太字」のように表示された状態が、「他のテキストと区別された状態」を表してます。

全角文字をb要素でマークアップできるか?

では、全角文字(日本語)について、b要素でマークアップしてみましょう。

<body>
    <p>日本とハワイの時差は<b>19</b>時間です。</p>
    <p><b>日本</b>とハワイの時差は<b>19</b>時間です。</p>
</body>

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

追加した文章では、「日本」と、全角文字として記載した「19」について、b要素でマークアップしてあります。

そして、ブラウザの表示結果の通り、「日本」及び「19」の両方のフレーズについて、太字に表示できたことが確認できます。

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

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

<body>
    <p>日本とハワイの時差は<b>19</b>時間です。</p>
    <p><b>日本</b>とハワイの時差は<b>19</b>時間です。</p>
    <p>The time difference between <b>Japan</b> and Hawaii is <b>19</b> hours.</p>
</body>

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

追加した英文では、「Japan」と「19」について、b要素でマークアップしてあります。

そして、ブラウザの表示結果の通り、「Japan」と「19」の両方のテキストを「太字」に表示させることができました。

b要素は半角のカタカナをマークアップできるか?

また、半角のカタカナについて、b要素でマークアップを行いました。

<body>
    <p>日本とハワイの時差は<b>19</b>時間です。</p>
    <p><b>日本</b>とハワイの時差は<b>19</b>時間です。</p>
    <p>The time difference between <b>Japan</b> and Hawaii is <b>19</b> hours.</p>
    <p>日本と<b>ハワイ</b>の<b>時差</b>は<b>19</b>時間です。</p>
</body>

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

追加した文章では、「ハワイ」、「時差」、「19」について、b要素でマークアップしてあります。

そして、ブラウザの表示結果の通り、「ハワイ」についてもb要素でのマークアップができました。

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

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

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

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

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

<body>
    <p>1964年の東京オリンピックの実施競技数は<b>20競技</b>です。</p>
</body>

上のプログラムに示す通り、b要素は、body要素の中において、マークアップしたテキストを「他のテキストと区別された状態」とするために用いることが求められます。

また、プログラムに示す通り、b要素にhidden属性を指定することなく、b要素の内容「20競技」をブラウザに表示された状態とする必要があります。

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

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

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

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

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

<body>
    <p>1964年の東京オリンピックにおける<b>日本の金メダル獲得数は<em>16個</em></b>です。</p>   
</body>

上に示したプログラムでは、p要素でマークアップされた文章の中で、「日本の金メダル獲得数は16個」のフレーズがb要素でマークアップされています。そして、b要素でマークアップされたフレーズ「日本の金メダル獲得数は16個」のうち、「16個」のフレーズがem要素でマークアップされています。

このため、ブラウザの表示結果の通り、「日本の金メダル獲得数は16個」のフレーズが太字(他のテキストと区別された状態)として表示され、さらに「16個」の文言に強勢(アクセント)を付与した状態で表示することができています。

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

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

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

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

-未分類