/*サーチコンソール*/ /*google adcense*/

文字を太字にするstrongとb、斜体にするemとiの違い【HTML】

2020年1月27日

こんにちは、Kosei(https://twitter.com/pompom_stk)です。

今回はHTMLで文字を太字にするときに用いる「strong」と「b」、文字を斜体にするときい用いる「em」と「i」の違いについて解説していきます。これらは全て「文字を強調するタグ」として用いられ、意味が似ています。

ですが、それぞれ少しずつ意味が異なってきます。それぞれの使用する場面と、もたらす効果について見ていきましょう!

HTMLについてよく知らないという方は、「タグ中の要素、属性とは?HTMLの基本的な書式」「初心者向け HTMLの基本構造」の記事から読むと、この記事をより理解することができます。

strongとb、emとiの違い
この記事の要点まとめ
これらを使い分けることは難しい
strongとb、emとiをただしく使い分けることは難しい。
strong要素とb要素の違い
どちらも文字を太字にするが、strong要素は重要性を表す部分に使用し、b要素は他のテキストと区分する際に使用する。
em要素とi要素の違い
どちらも文字を書体にするが、em要素はテキストに強勢を付け、i要素は他のテキストと区分する際に使用する。
SEOの観点
それぞれをSEOの観点で見ると同じ。
b要素とi要素は使用しない方がいい
b要素とi要素を使うより、CSSを使い文字装飾をした方がいい。
文字強調はstrongだけでいい理由
文字を太くする・斜体にするだけならCSSで、重要性を示したいならstrong要素を使用。
ヒナとハリボーの部屋

これらを使い分けることは難しい

まず始めに結論から言いますが、strongとb、emとiを正しく使い分けることはかなり難しいと言えます。それと同時にわざわざ使い分ける必要性がないとも言えます。

ハリボー
ハリボー

え?なら別に勉強しなくていいの?

正直別にいいかもしれない。けど、知っていて使い分けないのと知らなくて使い分けないのでは違うから、できれば知ってて欲しいかな。

ヒナ
ヒナ

この中でstrongとemは文字に対して「強調する」といった意味をもたらしますが、bとiに関してはただ文字を太字・斜体にするだけです。現在のHTMLにおいて、「文字装飾をする場合はHTMLではなくCSSで行う」ことが推奨されています。bとiが非推奨というわけではありませんが、これらを使用するよりCSSで文字装飾を行った方が無難です。

僕個人の意見としては「文字強調はstrongだけ使えばいい」と思っています。これに関してはそれぞれのタグを解説した上で、最後にもう一度理由を説明します。

ちなみにこれら3つを使うと、文字は以下のようの変化します。

※CodePenの使い方がわからない方はこちら

See the Pen strong、b、em、i by Kosei@SplaTech (@pompom_stk) on CodePen.

strong要素とb要素の違い

strong要素とb要素は、どちらも「文字を太字にする」という効果をもたらします。しかしそれぞれ意味合いは異なり、使用する目的としては異なります。

strong要素はタグで囲んだテキストの文字を太字にし、「重要性」を示すことができるものです。文章中、「ここは本当に大切だからしっかりと読んで欲しい」と思うテキストに対して使用しましょう。

対してb要素は、「他のテキストと区別する」際に使用します。strong同様、タグで囲まれたテキストは太字で表示されますが、「このテキストは重要」という意味は与えません。

strongとbの違い
クリックで拡大

em要素とi要素の違い

em要素とi要素は、どちらも「文字を斜体にする」という効果をもたらします。これもstrongとb同様、それぞれ意味合いが異なり使用する目的としては異なります。

em要素はタグで囲んだテキストを斜体にし、「強勢を付ける」ことができます。強勢とは、「口に出して発音するときにアクセントを付け強調する」という意味です。テキストに対して強勢を付けるということの意味が正直よくわかりませんが、「strongを付けるほどではないけど、ここ大切だよ」という場所に対して使用します。

対してi要素は、強勢するという意味はもたず、「他のテキストと区分する」際に使用します。文章中に専門用語など、他の文章と区別させたいときに使用しましょう。特に意味がなく、ただ「斜体という装飾をする目的」で使用することは非推奨なのでCSSを使うようにしましょう。

emとiの違い
クリックで拡大

SEOの観点

SEOから見ると太字は太字、斜体は斜体として同じ意味で捉えられるらしいよ。

ヒナ
ヒナ

それぞれをSEOの観点から見ていくと、Googleからは同じ意味として捉えられます。「strong要素とb要素は太字だから重要、em要素とi要素は斜体だから強勢を表していると捉える」というのがGoogleからの答えです。

HTMLの意味としては異なりますが、SEOとしてはどちらも同じ意味です。SEOの観点から見た時は、深く考えて使う必要はありません。

どちらにしても、strong要素もem要素もSEOに対してそこまで影響は与えません。重要な場所を見やすく強調させるために使い、SEOはあまり考えなくてもいいでしょう。むしろ多用してしまうと、文章的に見づらくなり、逆にGoogleからスパムとして扱われてしまうこともあります。

b要素とi要素は使用しない方がいい

前章までの内容から、strong要素とem要素は「文字に対して強調、強勢という意味付けをする」ものです。それに対しb要素とi要素は「他と区分したいテキストに対して太字、斜体という装飾を付ける」と考えていいでしょう。

実際、強調したい場所以外の場所に対して太字にしたり斜体にしたりすることはほとんどないと思います。

SEOの観点からは同じと説明しましたが、HTMLとしては意味が異なります。そしてb要素とi要素は「装飾目的」で使われることも多いと思います。そのため、いつか非推奨になり、いつか廃止になるという可能性もあります。そういう点からもb要素とi要素はあまり使用せず、できるだけstrong要素かem要素を使用するようにしましょう。

もし「強調させたくはないけど太字にしたい」という場合は、HTMLではなくCSSで装飾するようにしましょう。ここでは詳しく解説しませんが、CSSでfont-styleをitalicにすると斜体、font-weightで文字の太さを指定することができます。font-weightに関しては別の記事にしてあるので、「文字のサイズと太さの指定方法/ 【CSS】」の記事をご覧ください。

太文字と斜体をCSSで変更すると以下のようになります。

See the Pen 太文字と斜体をCSSで by Kosei@SplaTech (@pompom_stk) on CodePen.

文字強調はstrong要素だけでいい理由

ハリボー
ハリボー

なんとなくstrongだけでいいって言った理由が分かった気がする。

この記事の最初に書いた「文字強調はstrongだけ使えばいい」という理由についてですが、まずb要素とi要素を使わない方がいいという理由については説明しました。ではem要素はどうなるのかという話ですが、em要素は効果が正直中途半端だからです。

重要性だけでいくと、b=i<em<strongといったかんじです。それと斜体で書かれた文字は、通常の書体と比べて比べて読みにくいです。emタグで囲んだ部分に対し、読みやすいようにCSSで標準フォントにすることもできます。しかしこれも文章としては何も変わらないため、読み手には何の意味も与えません。

効果が中途半端な上、読みやすさも下がるならem要素よりもstrong要素を使う方がいいと僕は考えます。文字を太くする・斜体にする装飾を付けたいならCSSで、テキストに対して重要性を示したいならstrongタグで囲むようにすることをオススメします。

ヒナとハリボーの部屋

ハリボー
ハリボー

違いについてわかったけど、やっぱり僕はstrongだけでいいと思う。

よかった。わかった上でstrongしか使わないっていうのと、よくわからないけどstrongしか使わないのだとやっぱり違うよ。

ヒナ
ヒナ
ハリボー
ハリボー

ところでさ、ヒナちゃんも最近strongしてn

何か言った!?

ヒナ
ヒナ
ハリボー
ハリボー

なんでもないですごめんなさい。