HTMLの strong と b、em と i 要素の違いと使い方【タグ】

HTMLの strong と b、em と i 要素の違いと使い方【タグ】 HTML/CSS

こんにちは、mickです。

strong と b の違いを知りたい
em と i の違いを知りたい
SEO対策との関係を知りたい

こんな疑問に答えます。

ここで紹介する内容は、実際に自分が上の疑問から調べた結果です。

strong 要素 と b 要素 は違う要素

strong要素とb要素は違う要素です。

よく混同される理由は、HTMLで表示が同じに太字で強調しているように見えるから。

<strong>特に強い重要性を伝える意味合い</strong>
<b>文章で注意を引きたい場所に使用する意味合い</b>

このように視覚的には同じに見えても、2つの要素の意味合いは違います。

strong要素は、特に強い重要性を示す文字に使います。
b要素は、単に注意を引きたい文字に使います。

strong要素もb要素もSEO対策では変わらない

strong要素とb要素、どちらを使ってもSEO対策では変わりません。

ソースは、Googleの発表。
⇒ YouTube(Is there a difference between the “strong” and “b” tags in terms of SEO?)

strong要素やb要素は太字にするためには使わない

strong要素やb要素を文字を太字にするためには使いません。

太字にするには、見栄えを担当するCSSに任せます。
具体的には、font-weightを使います。

理由は、strong要素とb要素がHTML、つまりマークアップ言語だからです。

strong要素で文章を囲い込むと、人だけでなくコンピューターも特に強い重要性のあると認識できます。
b要素で文章を囲い込むと、人だけでなくコンピュータも単に注意を引きたいだけだと認識できます。

strong要素の使い方

strong要素は、文章の中で特に強い重要性を示すために使います。

設定方法は以上です。削除したファイルは復元できません

太字にするときは、font-weightを使います。

このとき一般的な値は、boldです。

b要素の使い方

b要素は、文中に製品の名前や地名などルールのうえで人の注意を引きたい部分に使います。

このときb要素には、重要性を示す意味合いはありません。

WordPressはブログを運営するには最高のブログソフトウェアです

strong要素と同じように太字にするときは、font-weightを使います。

このとき一般的な値は、boldです。

WordPressのブロックエディタの太字はstong要素

WordPressのブロックエディタで太字にした場合は、strong要素が使われることを確認しています。

em 要素 と i 要素 は違う要素

em要素とi要素は違う要素です。

よく混同される理由は、HTMLで表示が同じに斜体で強調しているように見えるから。

<em>重要性を伝える意味合い</em>
<i>用語の定義や外来語などほかのテキストとの違いを示す意味合い</i>

視覚的には同じに見えても、2つの要素の意味合いは違います。

em要素は、(strong要素よりは弱い)重要性を示す文字に使います。
i要素は、用語の定義や外来語などほかのテキストとの違いを示す文字に使います。

em要素もi要素もSEO対策では変わらない

em要素とi要素、どちらを使ってもSEO対策では変わりません。
正確には、そう考えられています。

理由は、strong要素とb要素と同じ扱いと考えられているから。

em要素やi要素は斜体にするためには使わない

em要素やi要素を文字を斜体にするためには使いません。

太字にするには、見栄えを担当するCSSに任せます。

具体的には、font-styleitalicを使います。

理由は、em要素とi要素がHTML、つまりマークアップ言語だからです。

em要素で文章を囲い込むことで、人だけでなくコンピューターも重要性のある文章だと認識できます。
b要素で文章を囲い込むことで、人だけでなくコンピュータも用語の定義や外来語などほかのテキストとの違いを示す文字だと認識できます。

em要素の使い方

em要素は、文章の中で重要性を示すために使います。

設定方法は以上です。あとは実行あるのみです。

斜体にするときは、font-styleitalicを使います。

i要素の使い方

i要素は、用語の定義や外来語などほかのテキストとの違いを示す部分に使います。

斜体にするときは、font-styleitalicを使います。

  • 温故知新
  • で先人を見習おう

    斜体にするときは、font-styleitalicを使います。

    WordPressのブロックエディタの斜体はem要素

    WordPressのブロックエディタで斜体にした場合は、em要素が使われることを確認しています。

    strong 要素と em 要素 の違いは強調の度合い

    strong が em よりも強い強調を意味します。

    strong要素とem要素は視覚も太字と斜体と違いますが、強調の度合いも違います。

    まとめ。大切なのはユーザーからみた見やすさ

    HTMLの strong と b、em と i 要素の違いと使い方を紹介しました。

    調べてみると、ちょっと複雑な印象。

    でも大切なのは、ユーザーから見た見やすさ、ユーザビリティーです。

    このユーザビリティーを意識することが最もSEO対策になります。

    迷ったらWordPressに従いましょう。

    • 太字は、strong要素。
    • 斜体は、em要素。

    ただし、これらにはHTMLとして意味合いがあることは覚えておいてください。

    以上、みなさまの助けなれば幸いです。

    初稿 2020/09/27