strongタグとは、ページ内のテキストのなかで重要性が高い箇所を指定するHTMLタグのことです。そして、指定されたテキストは太字で描画されます。その一方で、bタグやemタグ、iタグといった類似タグが存在します。

Mozilla公式サイトのMDN Web Docsでも指摘されていますが、strongタグと類似タグの混同のほか、デザインを司るCSSの代用としてstrongタグが使われるトラブルが多々あります。WEBページを作成する際は、各種タグの機能性、さらにHTMLとCSSの役割をしっかりと理解することが大切です。

今回は、strongタグについて解説します。HTMLの初心者に向けて、SEO専門メディアの東京SEOメーカーがわかりやすく説明します。本記事を最後まで読んで、strongタグとbタグの違いを理解して、strongタグの正しい記述方法を身につけてください。

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が挙げられます。

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タグは、強調タグですのでデザイン目的で使用しないでください。現実的には、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タグに関する、よくある質問をまとめています。
 

まとめ

strongタグは、ページ内のテキストを強調するHTMLタグです。類似タグとしてbタグやemタグ、iタグが存在しますが、それぞれ機能性が異なりますので注意してください。また、テキスト内容を強調するのではなく、デザインで装飾することが目的であればCSSを利用してください。さらに、CSSを利用することで、テキストの太字表示だけでなく、フォントカラーを変更して文字の色を変えることもできます。目的に応じて、それぞれのタグや言語を使い分けるように努めてください。

SEOコンサルティングの東京SEOメーカーTOPへ戻る

この記事の監修者

アドマノ株式会社　代表取締役　天野　剛志

日本大学法学部卒業、広告代理店で12年間働いている間、SEOと出会い、SEO草創期からSEO研究を始める。SEOを独学で研究し100以上のサイトで実験と検証を繰り返しました。そのノウハウを元に起業し現在、11期目。営業、SEOコンサル、WEB解析（Googleアナリティクス個人認定資格GAIQ保持）コーディング、サイト制作となんでもこなす。会社としては今まで2000以上のサイトのSEO対策を手掛けてきました。