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

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

1 strong要素の基本的な使い方
2 全角文字に「重要性」を付与することはできる？
3 英語（英文）ではどうなる？
4 strong要素は、半角のカタカナにマークアップできるか？
5 strong要素は、「入れ子」にした使い方もできる？
6 各種ブラウザでの表示結果

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>６０７</strong>年に建立された。</p>
</body>
</html>

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

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

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

英語（英文）ではどうなる？

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

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

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

追加した文章では、「ﾎｳﾘｭｳｼﾞ」、「聖徳太子」、「６０７」について、strong要素でマークアップしてあります。

そして、ブラウザでの表示結果の通り、「ﾎｳﾘｭｳｼﾞ」についても、「重要性の付与」ができました。

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

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

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

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

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