
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 Chrome | Microsoft Edge | Safari | Firefox | Opera |
strong要素 | ○ | ○ | ○ | ○ | ○ |
以上、strong要素の使い方について、ご参考になさってください!