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

Program

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

b要素の基本的な使い方

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>b要素</title>
</head>
<body>
    <p>日本とハワイの時差は<b>19</b>時間です。</p>
</body>
</html>

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

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

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

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>b要素</title>
</head>
<body>
    <p>日本とハワイの時差は<b>19</b>時間です。</p>
    <p><b>日本と</b>ハワイの時差は<b>19</b>時間です。</p>
</body>
</html>

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

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>b要素</title>
</head>
<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>
</html>

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

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>b要素</title>
</head>
<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>
</html>

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

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

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

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

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

また、b要素の各種ブラウザにおける最新のサポート状況は、以下のようになってます。

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

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

タイトルとURLをコピーしました