HTMLで太字にする方法│strongタグとbタグの違いと使い方

HTMLでテキストを太字にする方法は、<strong> タグや <b> タグを使用することです。
<strong> タグはテキストに強調の意味を持たせ、多くのブラウザでは太字で表示します。

一方、<b> タグは純粋にテキストを太字にするためのもので、意味的な強調はありません。意味的な強調を重視する場合は <strong> を、単に視覚的に太字にするだけの場合は <b> を使用します。

strongタグとbタグの概要、使い方、記述方法についてそれぞれ詳しく解説します。

「strongタグ」とは「強調」という意味を持ち、検索エンジンに対して指定したテキストが重要であることを伝えるHTMLタグです。

strongタグで指定したテキストはブラウザで太字で表示されるため、ページを閲覧したユーザーに対しても指定したテキストが重要であることが分かります。

ただし、strongタグを使用する主目的は検索エンジンに対して指定したテキストが重要であることを伝えることであり、テキストを太字にするためだけに使用するものではありません。

strongタグは以前使用されていたHTML4.01において「より強い強調」という意味でしたが、HTML5に変更された段階で「重要性のあるもの」という意味に変更されました。

現在のHTMLの標準仕様であるHTML Living Standardにおいても同じ意味を持ち、strongタグが廃止・非推奨になっているわけではありません。

▼ strongタグを使用するテキストは主に以下の2つです。

• 重要な文章全体
• 文章内の重要なワード

strongタグは、見出し、もしくは特定のトピックの中で、相対的に重要な文章全体に対して使用します。

【strongタグの使用例①】

<h3>CPCの計算方法</h3>

出稿した広告のCPCの計算式は、以下の通りです。

CPC＝広告出稿にかかった費用÷広告がクリックされた回数

広告出稿にかかった費用が50,000円で、広告が200回表示された場合は、50,000円÷200回で250円となります。

上記のトピックの中で最も伝えたいことは、「CPCの計算式は何か」です。

太字以外の部分は計算式に対する補足説明であり、書かれていなかったとしてもCPCの計算式は何かという結論を伝えることはできます。

つまり、上記トピックにおいては計算式が相対的に重要になるため、計算式が書かれた文章に対してstrongタグを使用するわけです。

strongタグは、特定の文章の中で、相対的に重要なワードに対して使用します。

【strongタグの使用例②】

SEOとは、「Search Engine Optimization」を略したもので、直訳すると、検索エンジン最適化を意味します。

上記の文章の中で最も伝えたいことは、「SEOとは何か」です。

「Search Engine Optimization」を略したものであることや、直訳した言葉であることは、相対的に重要性が低くなります。

つまり、上記文章においては「検索エンジン最適化」というワードが相対的に重要になるため、「検索エンジン最適化」というワードに対してstrongタグを使用するわけです。

strongタグは、指定するテキストを<strong>と</strong>で挟む形で記述します。

▼ strongタグの記述例
【文章全体にstrongタグを使う場合】

【特定のワードにstrongタグを使う場合】

▼ 以下のようにリストの一部にstrongタグを使う場合もあります。

また、strongタグを入れ子で使用することで、効果を高めることもできます。

「bタグ」とは、ページを閲覧したユーザーに対して、指定したテキストが重要であることを伝えるHTMLタグです。

strongタグと同様に指定したテキストはブラウザで太字で表示されますが、検索エンジンに対して指定したテキストが重要であることを伝える効果はありません。

bタグは以前使用されていたHTML4.01において「表示を太字にする」という意味でしたが、HTML5に変更された段階で「読み手の注意を引く」という意味に変更されました。

現在のHTMLの標準仕様であるHTML Living Standardにおいても同じ意味を持ち、bタグが廃止・非推奨になっているわけではありません。

実質的にbタグはテキストを装飾する目的で使用されていますが、基本的にテキストの装飾はCSSで行うことが推奨されているため、太字にすることだけが目的の場合は、可能な限りCSSを利用しましょう。

▼ bタグは、主に以下のようなケースで使用します。

• 相対的な重要度は低いが文章を目立たせたい時
• 他の要素に当てはまらないが強調したい場合

bタグは、相対的な重要度は低いが文章を目立たせたい時に使用します。

【1つの文章内でstrongタグとbタグを併用するケース】

Googleのインデックスとは、ページに含まれる<b>テキストや画像・動画ファイル、metaタグ、属性などの情報</b>が、Google検索エンジンのデータベースに<strong>登録されること</strong>を指します。

上記の文章では、「登録されること」と比べると、「テキストや画像・動画ファイル、metaタグ、属性などの情報」は重要性が低いです。

この場合、重要性が高いワードにはstrongタグを使い、目立たせたい箇所にはbタグを使用します。

bタグは、他の要素に当てはまらないが強調したい場合に使用します。

ワードサラダは、ブラックハットSEOのひとつとして乱用されていましたが、現在ではスパム行為と判断されるためSEO効果はありません。

サイト全体に悪影響を与える可能性もあるため、ワードサラダを使ってコンテンツを作成するのではなく、高品質なコンテンツを作成するようにしましょう。

上記のように、検索エンジンに対して重要性を伝える必要はないものの、ユーザーに対して行動を促すような文章に対しては、bタグを使用します。

bタグは、指定するテキストを<b>と</b>で挟む形で記述します。

【bタグの記述例】

上記のように、ブラウザでの見た目はstrongタグを使用した場合と全く同じです。

▼ strongタグとbタグの主な違いは以下になります。

ブラウザで指定したテキストが太字になる点は同じですが、bタグには検索エンジンに対して指定したテキストが重要であることを伝える効果はありません。

また、strongタグとbタグには、SEO効果の差はありません。

Googleのマット・カッツ氏は、2013年にGoogle公式動画の中で、「Googleはstrongタグやbタグ、emタグ、iタグを同じように扱う。ランキングには影響を与えない」と述べています。

前述したように、マット・カッツ氏はstrongタグやbタグの使用ランキングには影響を与えないと述べていますが、太字にすることでSEO効果は得られます。

2021年に実施された「Google Search Central SEO」の中で、Googleのジョン・ミューラー氏は、単語の太字と「段落の重要なポイント」がSEOとランキングに役立つことを改めて認めています。

Googleはページのタイトルや見出し、本文などさまざまな情報から書かれた内容を読み取ろうとしますが、特定のテキストを太字にすることで重要なポイントがどこなのかを把握しやすくなるため、結果としてSEOに影響するということです。

太字にすることが重要なのではなく、適切な箇所を太字にすることでテキストの意味を与え、検索エンジンの理解を助けることが重要になります。

▼ HTMLで太字にする際には、以下の3点に注意しましょう。

• 見出しには設定しない
• 多用しすぎない
• strongタグを装飾目的では使わない

HTMLで太字にする場合の注意点は、見出しにstrongタグを設定しないことです。

【見出し（hタグ）にstrongタグを使用した記述例】

<h2><strong>strongタグとhタグの重複</strong></h2>

上記の記述は、タグの文法として間違っているわけではありません。

しかし、strongタグとhタグを重複して使用すると、テキストを強調する効果も重複することになり、過剰な強調と判断されてしまう恐れがあります。

見出しにはstrongタグを設定しないようにしましょう。

見出し（hタグ）については別記事で詳しく解説しているので、興味がある方は以下ページをご確認ください。

【関連記事】

HTMLで太字にする場合の注意点は、strongタグとbタグを多用しすぎないことです。

【strongタグとbタグを多用しすぎた例】

HTMLで太字にする場合の注意点は、strongタグとbタグを多用しすぎないことです。

strongタグには検索エンジンに対して指定したテキストが重要であることを伝える効果があるので、多用しすぎると検索エンジンが重要性を正しく認識できなくなります。

また、ページを閲覧するユーザーにとってもどこが重要なのか分かりません。

strongタグとbタグを使用する際には、本当に使用する必要があるのかを意識しましょう。

HTMLで太字にする場合の注意点は、strongタグを装飾目的では使わないことです。

strongタグには検索エンジンに対して指定したテキストが重要であることを伝える効果があるので、装飾目的で使用してしまうと検索エンジンが重要性を正しく認識できなくなります。

単純にテキストを装飾することが目的の場合は、strongタグやbタグで太字にするのではなく、CSSのfont-weightを使うことで太字にします。

strongタグ・bタグを使用せずに、CSSを使って太字にすることもできます。

【太字にする場合のCSSの記述例】

p {
　color: #00a400;
　font-size:16px;
　font-weight: bold;
}

さらに、color・font-sizeを指定することで、自由に装飾を変えることもできます。

また、HTMLタグのスタイル属性でテキストを太字にすることもできます。

<p style="font-weight:bold">スタイル属性</p>

一方、strongタグ・bタグを使用した上で、文字の色やフォントサイズを変えることもできます。

<strong style=”color: #00a400;font-size:16px;”>文字の色・サイズを変える</strong>

また、strongタグを使用した上で、太字にしないようにすることも可能です。

<strong style="font-weight:normal;">太字にしない</strong>

今回は、HTMLで太字にする方法からstrongタグ・bタグの使い方、strongタグとbタグの違い、HTMLで太字にするSEO効果、HTMLで太字にする場合の注意点について解説しました。

strongタグもしくはbタグを使用することで、特定のテキストを太字で表示させることができます。

ただし、strongタグの本来の目的は検索エンジンに指定したテキストの重要性を伝えることなので、単純に文字を太くすることだけが目的の場合はstrongタグを使用してはいけません。

strongタグとbタグのどちらを使用するべき状況なのかを意識し、適切な方法で太字にしましょう。