HTMLで太字にするには？strongタグとbタグの使い方やSEO効果など徹底解説！

HTMLで太字にするには、主にstrongタグやbタグをマークアップします。
strongタグとは、内容の重要性、重大性、または緊急性が高いテキストを示すためのHTMLタグのことです。
bタグとは、ユーザーの注意を惹きたい（目線を引き付けたい）テキストを示すためのHTMLタグのことで、以前は「太字要素」とも呼ばれてました。
これらのタグを使ってHTMLで太字にすることによってSEOに役立ちます。

一方、HTMLで不適切に太字にすれば、クローラビリティの低下に繋がります。
具体的には、検索エンジンに重要性を伝えたいテキストをstrongタグではなく、bタグでマークアップします。
この場合、そのテキストがクロールされたときに、ユーザーの注意を惹くという認識で留まります。
そうなれば、その分Googleに評価されづらくなる可能性があるというわけです。

こうした良くない状況を回避する為に、HTMLで太字を適切に行って、見やすくわかりやすいコンテンツにしましょう。

この点踏まえて今回は、HTMLで太字にする方法や注意点など中心に、初心者にもわかりやすくポイントをまとめて解説したいと思います。

HTMLで太字にするタグとは？

HTMLで太字にするタグは、主にstrongタグとbタグがあります。

• strongタグとは？
• bタグとは？

strongタグとは？

strongタグとは、内容の重要性、重大性、または緊急性が高いテキストを示すためのHTMLタグのことです。
HTML4では単により強い強調という意味でしたが、 HTML5では「内容の強い重要性」を示すという意味に変更になりました。なので廃止されていません。

例えば、Webページのテーマを示すキーワードを含んだテキスト文章がコンテンツ内にあるとします。
このテキスト文章の重要性は高くなります。
なので、内容の重要性を示す<strong>をマークアップして太字にします。
こうして太字にするHTMLタグが、strongタグというわけです。

strongタグの廃止や非推奨について

strongタグは、HTML4.01で廃止されずにHTML5やHTML Living Standardでも残ってます。

具体的には、HTML4.01では「単により強い強調」という意味でしたが、HTML5やHTML Living Standardでは「内容の強い重要性」という意味に変更されながら、廃止されずに残ってるので非推奨ではありません。
※参考：<strong>: 強い重要性要素 – HTML: HyperText Markup Language | MDN

bタグとは？

bタグとは、ユーザーの注意を惹きたい（目線を引き付けたい）テキストを示すためのHTMLタグのことで、以前は「太字要素」とも呼ばれてました。

例えば、製品を実際に使った感想（レビュー）をブログ記事に書くとします。
この記事では、製品名ではなくて製品の感想（レビュー）が最も重要です。
なので、特別な重要性を持たない製品名を<b>でマークアップして太字にします。
こうして太字にするHTMLタグが、bタグというわけです。

bタグの廃止や非推奨について

bタグは、HTML4.01で廃止されずにHTML5やHTML Living Standardでも残ってます。

具体的には、従来「太字の文字列を作る」というスタイル情報を含む意味でしたが、HTML4.01でスタイル情報が非推奨になったので「ユーザーの注意を惹きつける（目線を引き付ける）」という意味に変更されました。その意味を継続しながら、HTML5やHTML Living Standardででも廃止されずに残ってる状態です。
※参考：<b>: 注目付け要素 – HTML: HyperText Markup Language | MDN

HTMLで太字にするSEO効果

HTMLで太字にすることで、SEOに役立ちます。

これについては、Googleのジョンミュラー氏が言及してます。
具体的には、段落の重要なポイントを太字にすることはSEOに役立ちます。ですが、相対的なものなのでページ上のすべてを太字にすると役に立ちません。と言及してます。
※参考：Google Confirms Again, Bolding Words Does Help With SEO

このことから、一部のテキスト（適切な個所だけ）をstrongタグで太字にして相対的な重要性の高さ示せば、SEO効果が期待できると考えられます。

HTMLで太字にするstrongタグとbタグの違い

HTMLで太字にするstrongタグとbタグは、タグ自体に与えられた意味や目的が大きく違います。

例えば、strongタグとは、内容の重要性、重大性、または緊急性が高い一部のテキストに使うHTMLタグのことです。
なので、相対的に重要性の高いテキストを伝えることが主目的です。
一方、bタグとは、ユーザーの注意を惹きたい（目線を引き付けたい）テキストに使うHTMLタグのことです。
なので、相対的に重要性の低いテキストを際立たせることが主目的です。
つまり、タグ自体に与えられた意味や目的が違うというわけです。

こうして、タグ自体に与えられた意味や目的が異なる点が、HTMLで太字にするstrongタグとbタグの大きな違いです。

HTMLで太字にする方法

HTMLで太字にするには、strongタグやbタグ、CSSを使います。

• strongタグの使い方
• bタグの使い方
• CSSの使い方

strongタグの使い方

strongタグの使い方がいくつかあります。

• 非常に重要な文のときに使う
• 文の一部に重要性を加えるときに使う

非常に重要な文のときに使う

strongタグは、非常に重要な文のときに使います。

例えば、コンテンツ内に「重要：SEO対策をしても必ず成果が出るわけではありません」というテキスト文章があるとします。
このテキスト文章は、冒頭に重要という文言が書かれていて重要性が高いことがわかります。
この場合、テキスト文章全体を<strong>でマークアップします。

つまり、非常に重要な文のときに使うというわけです。

こうして、非常に重要な文のときに使うことが、strongタグの使い方です。

文の一部に重要性を加えるときに使う

strongタグは、文の一部に重要性を加えるときに使います。

例えば、コンテンツ内に「SEO対策がうまくいけば検索順位が上がりやすくなります。ですが不適切なSEO対策をすれば、検索順位が下がったりペナルティを受けてインデックス削除される可能性が高まります。」というテキスト文章があるとします。
このテキスト文章は、「検索順位が下がったり」や「インデックス削除される」といった一部の文章内容の重要性が高いです。
この場合、一部の文章内容を<strong>でマークアップします。

つまり、文の一部に重要性を加えるときに使うというわけです。

こうして、文の一部に重要性を加えるときに使うことが、strongタグの使い方です。

bタグの使い方

bタグの使い方がいくつかあります。

• 相対的な重要性が低く、かつ読み手の注意を惹きたいときに使う
• 他の要素が持つ意味合いに合わないときに使う

相対的な重要性が低く、かつ読み手の注意を惹きたいときに使う

bタグは、相対的な重要性が低く、かつ読み手の注意を惹きたいときに使います。

例えば、コンテンツ内に「SEO対策では検索順位を上げることが重要です。検索順位は、コンテンツの品質や被リンクなどの検索アルゴリズム要因によって決まります。」というテキスト文章があるとします。
このときに「検索順位を上げることが重要です。」という文章の重要性が一番高くて、次に「コンテンツの品質や被リンク」という文章の重要性が高いとします。
そうなれば、「検索順位を上げることが重要です。」をstrongタグでマークアップして、「コンテンツの品質や被リンク」をbタグでマークアップします。

bタグでマークアップした「コンテンツの品質や被リンク」は太字になるのでユーザーの目を惹きやすくなります。
つまり、相対的な重要性が低く、かつ読み手の注意を惹きたいときに使うというわけです。

こうして、相対的な重要性が低く、かつ読み手の注意を惹きたいときに使うことが、bタグの使い方です。

他の要素が持つ意味合いに合わないときに使う

bタグは、他の要素が持つ意味合いに合わないときに使います。

例えば、bタグと混同されやすいstrongタグやemタグ、markタグなどの要素があります。
strong要素は文字列に特定の重要性を持たせるという意味、em要素はテキストを軽く強調するという意味、mark要素は文字列に特定の関連性を持たせるという意味です。
これらの要素が持つ意味に合わないときに使うというわけです。

こうして、他の要素が持つ意味合いに合わないときに使うことが、bタグの使い方です。

CSSの使い方

CSSは、単に装飾で太字にするときに使います。

例えば、見栄えを良くしたいので、コンテンツ内の一部のテキスト文章を太字にしたいとします。
この場合、重要性を示したり、ユーザーの注意を惹きつけたいわけではなく、デザインが目的です。
なので、strongタグやbタグではなくて、CSSのfont-weightプロパティを使います。

そうすれば、テキスト文章の一部を太字にデザインして見栄えを良くできます。
つまり、単に装飾で太字にするときに使うというわけです。

こうして、単に装飾で太字にするときに使うことが、CSSの使い方です。

CSSで太字に装飾する使い方

CSSで太字に装飾する使い方がいくつかあります。

• 太字に色を付ける（赤など）
• 太字にして文字サイズ（フォントサイズ）を調整する

太字に色を付ける（赤など）

CSSで太字にして、赤色などの文字色を付けることができます。

赤色の場合、colorプロパティに「red」の単位（プロパティ値）も指定ができます。

太字にして文字サイズ（フォントサイズ）を調整する

CSSで太字にして、文字サイズ（フォントサイズ）を調整することができます。

font-sizeプロパティでは、その他「em」「px」などの単位（プロパティ値）が指定できます。

HTMLで太字にするときに避けたいこと

HTMLで太字にするときに避けたいことがいくつかあります。

• タグ自体の目的を無視してマークアップする
• 優先順位を下げてCSSを指定する
• 書式ミスをする

タグ自体の目的を無視してマークアップする

HTMLで太字にするときに、タグ自体の目的を無視してマークアップすることは避けましょう。

例えば、太字にしてテキストの見栄えを良くしたいので、strongタグでマークアップしたとます。
strongタグは、コンテンツ内で相対的に重要性の高いテキスト文章（文言）に対して使うタグです。
一方、太字にしてテキストの見栄えを良くするなどの単なる装飾に対しては、CSSのfont-weight:bold;を使います。
なので、用途が間違ってます。
つまり、タグ自体の目的を無視してマークアップしてるというわけです。

こうして、タグ自体の目的を無視してマークアップすることが、HTMLで太字にするときに避けたいことです。

優先順位を下げてCSSを指定する

HTMLで太字にするときに、優先順位を下げてCSSを指定することは避けましょう。

例えば、「SEO対策では、コンテンツの品質を高めることが重要です。」という文章内の「コンテンツの品質を高めることが重要」を太字にして、見栄えを良くしたいとします。
この場合、「コンテンツの品質を高めることが重要」をspanタグでマークアップして、CSSのfont-weightプロパティにboldプロパティ値で太字の指定をします。
この指定より上で、font-weightプロパティにnormalプロパティ値で通常の太さを誤って記述しました。

この場合、ファイル上でより上に記述されてるCSSが優先されるので、「font-weight:normal;」の優先順位が一番高くなります。
つまり、「font-weight:bold;」の優先順位が下がって太字の指定が効きません。
結果、「font-weight:normal;」が効いて「font-weight:bold;」が効かないので、フォントが通常の太さになり太字にならないというわけです。

こうして、優先順位を下げてCSSを指定することが、HTMLで太字にするときに避けたいことです。

書式ミスをする

HTMLで太字にするときに、書式ミスをすることは避けましょう。

例えば、「SEO対策では、コンテンツの品質を高めることが重要です。」という文章内の「コンテンツの品質を高めることが重要」を太字にして、見栄えを良くしたいとします。
この場合、「コンテンツの品質を高めることが重要」をspanタグでマークアップして、CSSのfont-weightプロパティにboldプロパティ値で太字の指定をします。
このときに、CSSのセレクタ指定を間違ったり、font-familyやコメントアウトなどの例外はありますがCSSのプロパティやプロパティ値に全角文字を入れます。
また、プロパティの後ろのコロンやプロパティ値の後ろのセミコロンの記述を間違えます。
つまり、書式ミスをします。
結果、CSSが効かないので、太字にならないというわけです。

こうして、書式ミスをすることが、HTMLで太字にするときに避けたいことです。

まとめ：HTMLで太字を適切に行って、見やすくわかりやすいコンテンツにしよう

HTMLで太字を適切に行って、見やすくわかりやすいコンテンツにしましょう。

一方、HTMLで不適切に太字にすれば、クローラビリティが下がります。
具体的には、コンテンツ内で相対的に重要性の高い一部の文章（対策キーワードを含む文章など）をstrongタグではなくて、bタグでマークアップしたとします。
この場合、ユーザーの注意を惹きたいという認識に留まります。
そうなれば、認識がずれて本来の重要性が伝わらないので、その分Googleから評価されづらくなる可能性があるというわけです。

こうした悪い状況を回避する為に、HTMLで太字を適切に行って、見やすくわかりやすいコンテンツにしましょう。