【HTML】strong要素の使い方【テキストに重要性を付けます】

Program

strong要素を使えば、重要なテキストをマークアップできます!

strong要素の基本的な使い方

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>strong要素</title>
</head>
<body>
    <p>法隆寺は聖徳太子と推古天皇により<strong>607</strong>年に建立された。</p>
</body>
</html>

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

p要素の中には、「法隆寺は聖徳太子と推古天皇により607年に建立された。」と書かれた文章があります。

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

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

つまり、この「太字」のように表示された状態が、「テキストに重要性を付与した状態」を表してます。

全角文字に「重要性」を付与することはできる?

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>strong要素</title>
</head>
<body>
    <p>法隆寺は聖徳太子と推古天皇により<strong>607</strong>年に建立された。</p>
    <p>法隆寺は<strong>聖徳太子</strong>と推古天皇により<strong>607</strong>年に建立された。</p>
</body>
</html>

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

追加した文章では、「聖徳太子」と、全角文字として記載した「607」について、strong要素でマークアップしてあります。

そして、ブラウザでの表示結果の通り、「聖徳太子」及び「607」の両方のフレーズ共に、「重要性の付与」ができたことが確認できます。

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>strong要素</title>
</head>
<body>
    <p>法隆寺は聖徳太子と推古天皇により<strong>607</strong>年に建立された。</p>
    <p>法隆寺は<strong>聖徳太子</strong>と推古天皇により<strong>607</strong>年に建立された。</p>
    <p>Horyu-ji Temple was built in <strong>607</strong> by <strong>Prince Shotoku</strong> and Emperor Suiko.</p>    
</body>
</html>

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

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

そして、ブラウザでの表示結果の通り、「607」と「Prince Shotoku」の両方のフレーズ共に、「重要性の付与」ができました。

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>strong要素</title>
</head>
<body>
    <p>法隆寺は聖徳太子と推古天皇により<strong>607</strong>年に建立された。</p>
    <p>法隆寺は<strong>聖徳太子</strong>と推古天皇により<strong>607</strong>年に建立された。</p>
    <p>Horyu-ji Temple was built in <strong>607</strong> by <strong>Prince Shotoku</strong> and Emperor Suiko.</p>
    <p><strong>ホウリュウジ</strong>は<strong>聖徳太子</strong>と推古天皇により<strong>607</strong>年に建立された。</p>    
</body>
</html>

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

追加した文章では、「ホウリュウジ」、「聖徳太子」、「607」について、strong要素でマークアップしてあります。

そして、ブラウザでの表示結果の通り、「ホウリュウジ」についても、「重要性の付与」ができました。

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

strong要素は、「入れ子」にした使い方もできる?

『「入れ子」にした使い方』とは、どういう意味?

1つの例文を使って、説明します。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>strong要素</title>
</head>
<body>
    <p>富士山は<strong>山梨県と静岡県に跨る活火山</strong>です。</p>
    <p>富士山は<strong>山梨県と静岡県に跨る<strong>活火山</strong></strong>です。</p>
</body>
</html>

上の文章では、「山梨県と静岡県に跨る活火山」にstrong要素でマークアップされています。

下の文章では、strong要素でマークアップされた「山梨県と静岡県に跨る活火山」について、さらに、その中の「活火山」についてもstrong要素でマークアップされています。

つまり、下の文章では、strong要素の中にstrong要素がマークアップされた状態となっており、これが『「入れ子」にした使い方』ということになります。

そして、strong要素では、「入れ子」にした中側のテキストほど、重要性が高いテキストであることを意味することになります。

しかし、表示結果に示す通り、ブラウザの表示結果による視覚効果としては、テキストの「文字太さ」としての変化は、ほとんど見られないことが確認できます。

このため、strong要素の『「入れ子」にした使い方』は、HTML構造上の「テキストの重要性」に段階を設けることはできるものの、視覚的には「共通の太さの太字」として表示されるに留まることが確認できました。

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

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

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

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

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