未分類

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

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

strong要素の使い方

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

<body>
    <p>法隆寺は聖徳太子と推古天皇により<strong>607</strong>年に建立された。</p>
</body>

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

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

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

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

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

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

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

<body>
    <p>法隆寺は聖徳太子と推古天皇により<strong>607</strong>年に建立された。</p>
    <p>法隆寺は<strong>聖徳太子</strong>と推古天皇により<strong>607</strong>年に建立された。</p>
</body>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

例文を使って、見てみましょう。

<body>
    <p>富士山は<strong>山梨県と静岡県に跨る活火山</strong>です。</p>
    <p>富士山は<strong>山梨県と静岡県に跨る<strong>活火山</strong></strong>です。</p>
</body>

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

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

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

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

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

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

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

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

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

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

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

<body>
    <p>人類初の宇宙飛行は<strong>1961年</strong>です。</p>   
</body>

上のプログラムに示す通り、strong要素は、body要素の中において、テキストに重要性を付与(マークアップ)するために用いることが求められます。

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

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

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

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

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

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

<body>
    <p>検索エンジンとして<strong>多くのユーザーが利用するサイトの一つに<a href="https://www.google.co.jp/">Google</a></strong>が挙げられます。</p>   
</body>

上に示したプログラムでは、p要素でマークアップされた文章の中で、「多くのユーザーが利用するサイトの一つにGoogle」のフレーズがstrong要素でマークアップされています。そして、strong要素でマークアップされたフレーズ「多くのユーザーが利用するサイトの一つにGoogle」のうち、「Google」のフレーズがa要素でマークアップされています。

このため、ブラウザの表示結果の通り、「多くのユーザーが利用するサイトの一つにGoogle」のフレーズが太字として表示(重要性を付与)され、さらに「Google」の文言にリンクが付与されて表示することができています。

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

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

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

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

-未分類