2020年1月27日こんにちは、Kosei(https://twitter.com/pompom_stk)です。今回はHTMLで文字を太字にするときに用いる「strong」と「b」、文字を斜体にするときい用いる「em」と「i」の違いについて解説していきます。これらは全て「文字を強調するタグ」として用いられ、意味が似ています。それぞれ少しずつ意味が異なってきます。HTMLの基本構造」の記事から読むと、この記事をより理解することができます。この記事の要点まとめこれらを使い分けることは難しいstrongとb、emとiをただしく使い分けることは難しい。strong要素とb要素の違いどちらも文字を太字にするが、strong要素は重要性を表す部分に使用し、b要素は他のテキストと区分する際に使用する。em要素とi要素の違いどちらも文字を書体にするが、em要素はテキストに強勢を付け、i要素は他のテキストと区分する際に使用する。SEOの観点それぞれをSEOの観点で見ると同じ。b要素とi要素は使用しない方がいいb要素とi要素を使うより、CSSを使い文字装飾をした方がいい。文字を太くする・斜体にするだけならCSSで、重要性を示したいならstrong要素を使用。ヒナとハリボーの部屋これらを使い分けることは難しいまず始めに結論から言いますが、strongとb、emとiを正しく使い分けることはかなり難しいと言えます。それと同時にわざわざ使い分ける必要性がないとも言えます。ハリボーえ?なら別に勉強しなくていいの?正直別にいいかもしれない。知っていて使い分けないのと知らなくて使い分けないのでは違うから、できれば知ってて欲しいかな。ヒナこの中でstrongとemは文字に対して「強調する」といった意味をもたらしますが、bとiに関してはただ文字を太字・斜体にするだけです。現在のHTMLにおいて、「文字装飾をする場合はHTMLではなくCSSで行う」ことが推奨されています。bとiが非推奨というわけではありませんが、これらを使用するよりCSSで文字装飾を行った方が無難です。僕個人の意見としては「文字強調はstrongだけ使えばいい」と思っています。これに関してはそれぞれのタグを解説した上で、最後にもう一度理由を説明します。ちなみにこれら3つを使うと、文字は以下のようの変化します。CodePen.strong要素とb要素の違いstrong要素とb要素は、どちらも「文字を太字にする」という効果をもたらします。それぞれ意味合いは異なり、使用する目的としては異なります。strong要素はタグで囲んだテキストの文字を太字にし、「重要性」を示すことができるものです。文章中、「ここは本当に大切だからしっかりと読んで欲しい」と思うテキストに対して使用しましょう。対してb要素は、「他のテキストと区別する」際に使用します。strong同様、タグで囲まれたテキストは太字で表示されますが、「このテキストは重要」という意味は与えません。クリックで拡大em要素とi要素の違いem要素とi要素は、どちらも「文字を斜体にする」という効果をもたらします。これもstrongとb同様、それぞれ意味合いが異なり使用する目的としては異なります。em要素はタグで囲んだテキストを斜体にし、「強勢を付ける」ことができます。強勢とは、「口に出して発音するときにアクセントを付け強調する」という意味です。テキストに対して強勢を付けるということの意味が正直よくわかりませんが、「strongを付けるほどではないけど、ここ大切だよ」という場所に対して使用します。対してi要素は、強勢するという意味はもたず、「他のテキストと区分する」際に使用します。文章中に専門用語など、他の文章と区別させたいときに使用しましょう。意味がなく、ただ「斜体という装飾をする目的」で使用することは非推奨なのでCSSを使うようにしましょう。クリックで拡大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で文字の太さを指定することができます。【CSS】」の記事をご覧ください。太文字と斜体をCSSで変更すると以下のようになります。CodePen.文字強調はstrong要素だけでいい理由ハリボーなんとなくstrongだけでいいって言った理由が分かった気がする。この記事の最初に書いた「文字強調はstrongだけ使えばいい」という理由についてですが、まずb要素とi要素を使わない方がいいという理由については説明しました。em要素はどうなるのかという話ですが、em要素は効果が正直中途半端だからです。重要性だけでいくと、b=i<em<strongといったかんじです。それと斜体で書かれた文字は、通常の書体と比べて比べて読みにくいです。emタグで囲んだ部分に対し、読みやすいようにCSSで標準フォントにすることもできます。これも文章としては何も変わらないため、読み手には何の意味も与えません。効果が中途半端な上、読みやすさも下がるならem要素よりもstrong要素を使う方がいいと僕は考えます。文字を太くする・斜体にする装飾を付けたいならCSSで、テキストに対して重要性を示したいならstrongタグで囲むようにすることをオススメします。違いについてわかったけど、やっぱり僕はstrongだけでいいと思う。わかった上でstrongしか使わないっていうのと、よくわからないけどstrongしか使わないのだとやっぱり違うよ。ヒナハリボーところでさ、ヒナちゃんも最近strongしてn何か言った!?ヒナハリボーなんでもないですごめんなさい。けリンクの貼り付け方法【HTML】こんにちは、Kosei()です。...CSSでできることと組み込み方【初心者向け】CSSでできること、組み込み方を初心者向けに記述した記事です。...見出しを表す方法【HTML】h要素はHTMLにおいて「見出し」を表します。...初心者向けテーブル(表)の作成方法/【HTML】テーブルの作成方法を初心者向けに解説した記事です。コメントをキャンセルメールアドレスが公開されることはありません。*ウェブサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。