strongタグとは? 意味や使い方、bタグとの違いを解説
strongタグとは、ページ内のテキストのなかで重要性が高い箇所を指定するHTMLタグのことです。そして、指定されたテキストは太字で描画されます。その一方で、bタグやemタグ、iタグといった類似タグが存在します。
Mozilla公式サイトのMDN Web Docsでも指摘されていますが、strongタグと類似タグの混同のほか、デザインを司るCSSの代用としてstrongタグが使われるトラブルが多々あります。WEBページを作成する際は、各種タグの機能性、さらにHTMLとCSSの役割をしっかりと理解することが大切です。
strong(ストロング)タグとは
strong(ストロング)タグとは、一部のテキストを強調するためのHTMLタグのことです。strongタグで指定したテキストは、ブラウザ上で太字で表示されます。
WEB標準で、Mozilla公式サイトのMDN Web Docsでは、strongタグについて次のように説明されています。
<strong>はHTMLの要素で、内容の重要性、重大性、または緊急性が高いテキストを表します。ブラウザーは一般的に太字で描画します。
引用:<strong>: 強い重要性要素 – HTML: ハイパーテキストマークアップ言語 | MDN
strongタグで囲ったテキストの意味が強調される
strongタグは、デザイン上の都合で目立たせたいテキストに利用されるケースが間々あります。しかし、strongタグは、テキスト内容が重要であることを伝える役割を担います。本来は、テキストが有する意味の重要性を訴えたい際に使用するべきタグです。
そもそもHTMLとは
HTMLとは、ハイパーテキスト マークアップ ランゲージ(Hyper Text Markup Language)の略で、WEBページを作成するためのマークアップ言語を指します。
このHTMLとCSS(カスケーディング スタイル シート / Cascading Style Sheet)の2つでWEBサイトがコーディングされて、ブラウザ上で視覚化されるようになります。つまり、HTMLとCSSは、サイト訪問者が直接触れる、フロントサイドの部分を司る役割の言語ということです。
関連記事:HTMLとは
関連記事:CSSとは
storngタグに類似するHTMLタグとCSSの値
strongタグと類似するタグが存在します。HTMLタグのbタグやemタグ、iタグのほか、CSSの値であるboldが挙げられます。
タグと値 | 言語 | 機能性 |
---|---|---|
strong | HTML | 太字表記して、意味を強調する |
b | HTML | 太字表記するが、意味を強調しない |
em | HTML | 斜体表記して、意味を強調する |
i | HTML | 斜体表記するが、意味を強調しない |
bold | CSS | フォントデザインを太字に変更する |
bタグとの違い
bタグとstrongタグの違いは、テキスト内容が重要であることを検索エンジンに伝えるか否かという点です。bタグは、テキストを太字表示する機能を持ちますが、テキストの意味を強調することはありません。
emタグとの違い
emタグとstrongタグの違いは、テキストの表記方法が異なる点です。具体的には、前者ではテキストが斜体表記で強調されますが、後者では太字表記で強調されます。なお、emタグは、strongタグと同様に、テキストの意味を強調する機能を有します。
関連記事:emタグとは
iタグとの違い
iタグとstrongタグの違いは、テキストの強調方法に加えて、テキストの意味を強調するか否かという2点です。emタグでは、指定したテキストを斜体表記しますが、テキストの意味を強調しません。
CSSの太字(bold)との違い
CSSによるboldとstrongタグは、そもそも利用する言語が異なります。そのため、言語としての根本的な役割が違います。
まず、HTMLは、WEBページの構成を指示する言語です。対して、CSSでは、WEBページを装飾するデザインを指定します。サイト訪問者に対して、特定のテキストを目立たせたいのであれば、strongタグではなく、CSSでboldの値を利用する方法が適切ということです。
strongタグのSEO効果
strongタグは、検索エンジンに「このテキストは重要な意味を持つ」ことを知らせる機能を有します。ただし、現実的には、strongタグを利用することで検索順位が高まることはありません。
実際に、GoogleがWEBマスター向けに配信する、Youtubeの公式チャンネルGoogle Search Centralの動画にて、「Googleはstrongタグとbタグを同じように扱っている」と言及しています。
strongタグの注意点
strongタグを使ううえで、次の点に注意してください。
- strongタグをデザイン目的で使用しない
- strongタグを多用しない
- strongタグを見出しタグに使用しない
strongタグをデザイン目的で使用しない
strongタグは、強調タグですのでデザイン目的で使用しないでください。現実的には、CSSの代用としてstrongタグで文字を強調したとしても、トラブルに発展することは極めてまれです。
ただし、HTMLの文法として誤っています。問題点は、strongタグと装飾を混同して使っているケースです。まずは、HTMLとCSSにおける、それぞれの役割を正しく認識することが大切です。
strongタグを多用しない
strongタグを多用することは避けてください。strongタグを多用すると、WEBページのなかで、どこを強調したいのかがわかりにくくなります。結果として、検索エンジンと検索ユーザーともに、理解しにくいページ構成と捉えられてしまいます。
そもそも、strongタグは、ページ中において、相対的に重要なテキストを強調するタグです。そのため、strongタグを多用することに意味がありません。むしろ、検索エンジンにスパム行為と判断されて、ペナルティを与えられる原因になりえますので注意してください。
strongタグを見出しタグに使用しない
h1、h2、h3といった見出しタグには、strongタグを使わないでください。見出しタグは、ページ構成の骨子となる部分です。HTML上で、もっとも強調するテキストとして扱われます。そのため、strongタグを反映すると、過剰にテキストを強調することになります。見出しタグにstrongタグを使用する行為は、利点がないだけでなく、リスクになりえます。
関連記事:見出しとは
strongタグの使い方
テキスト内容が重要であることを伝えたい場合は、strongタグを利用してください。strongタグの使い方と書き方は、下記のとおりです。
たとえば、次のようなテキストがあったとします。
このテキストのなかで、「ポテンシャルを買われる」部分にページ構成上の重要性があれば、ここをstrongタグで囲います。具体的には、<strong> 〜 </strong>で文字を太くしたい文章を囲みます。
<p>20代は<strong>ポテンシャルを買われる</strong>ことが多いため、転職活動を有利に進められます。</p>
CSSでテキストを装飾したいときの書き方
デザイン上の都合でテキストを目立たせたいときは、CSSを利用してください。CSSで文字を強調する書き方は、次のとおりです。
CSSファイルに下記のコードを追加します。
span.bold-txt {font-weight: bold;}
HTMLファイルのテキストに、下記のspanタグとクラス指定を記述します。
<p>20代は<span class="bold-txt">ポテンシャルを買われる</span>ことが多いため、転職活動を有利に進められます。</p>
さらに、クラス指定を使わず、HTMLのstyle属性を用いて直接的にテキストを装飾することもできます。
<p>20代は<span style="font-weight: bold;">ポテンシャルを買われる</span>ことが多いため、転職活動を有利に進められます。</p>
また、テキストを目立たせる方法として、colorプロパティを用いて文字の色を変える手法も効果的です。
<p>20代は<span style="color: red;">ポテンシャルを買われる</span>ことが多いため、転職活動を有利に進められます。</p>
strongタグのよくある質問
strongタグに関する、よくある質問をまとめています。
Q:strongタグを多用すると、テキストの価値が高まりますか?
Answer)strongタグをたくさん使用したからといって、テキスト全体の価値が高まるわけではありません。strongタグは、ページ内のテキストを相対的に強調する役割のタグです。そのため、多用すると、テキスト中のどこが重要な部分かがわからなくなります。
Q:strongタグは廃止されたのですか?
Answer)strongタグは、廃止されていません。2023年12月現在でもHTMLタグとして利用できます。
Q:strongタグを使うとペナルティを受けますか?
Answer)原則として、strongタグを使うことでペナルティを受けることはありません。
これはstrongタグに限った話ではありませんが、strongタグを乱用するとスパム判定の対象となりえますので注意してください。
まとめ