18人がいいねしました

更新日

HTMLの文字の強調・装飾|strong / em / b / i タグを理解しよう

web兄さん

html5から文字を強調・装飾するタグの使い方が変更されました。

その中でも

  • 文字を強調・太字にするstrong / bタグ
  • イタリック体に装飾するem / iタグ

これらのタグの違いと使い方をまるっと解説してきます!

文章を強調・太字にするstrongタグとbタグ

html5ではstrongもしくはbのどちらかを使うことで文字を太字にし強調することができます。

ブラウザでの表示の違い

これはstrongです
これはbです

このようにどちらのタグを使っても見た目の違いはありません。

strongbの違いは、それぞれのタグが「意味を持っているか、意味を持っていないか」です。

strongはタグで囲った部分が重要であることを表すことができ、bはただ見た目を太字にするだけでタグ自体に意味はありません。

厳密にはこういった違いがあるタグですが、Googleは「どちらのタグも同様に扱い、評価に影響することはない」と公言しているため、基本的にbは使わずにstrongを使っておきましょう。

strongを入れ子にすることでより強い重要性を示す

<strong>文字を強調するには<strong>ストロング</strong>を使用します</strong>

このようにstrongで囲った文章をさらにstrongで囲むことができます。この場合は内側の「ストロング」というワードが最も重要性の高いワードだと認識されます。

文章をイタリック(斜体)にするemタグとiタグ

文字をイタリック体(斜体)にして文章を強調する場合、emもしくはiというタグを使用します。

ブラウザでの表示の違い

これはemです
これはiです

emiもブラウザでの見た目の違いはありません。

この2つのタグの違いもstrongb同様「意味をもっているか、意味を持っていないか」です。

emは囲った部分にアクセントをつけ強調し、イタリック体にしますが、iはただイタリック体にするだけです。こちらもGoogleは同様に扱い評価するので、基本的にはemを使っておけば問題ありません。

ここまで強調をするにはstrongemを使っておけば問題なさそうですが、「一体strongemどっちを使ったらいいの?どっちも同じ強調じゃないの?」という疑問がでてきます。

この2つのタグにはきちんと違いがあるので続けて解説していきます。

strongタグとemタグの強調の意味の違い

さて、それぞれのタグの意味の違いについて説明していきます。
ブラウザでの出力結果は

  • strong → 太字
  • em → イタリック体(斜め文字

となります。

見た目では太字になるかイタリック体になるかの違いしかありませんが、強調の意味合いが少し異なります。

strongは重要性、emは強勢を示す

strongは重要だと伝えたい単語・文章に使用し、emはアクセントをつけることによって文章の意味を変えたい箇所に使用します。

実例を観て観ましょう。

strongで重要性を強調した例

プロ野球選手のイチローはなんと野菜が嫌い!

長嶋茂雄は「I live in Tokyo」の過去形は?という問題に「I live in EDO」と回答した。

文章の中で特に伝えたい部分や、重要なワードにはstrongを使います。

emによってアクセント(強勢)をつける場合

プロ野球選手のイチローも野菜が嫌い!(プロアスリートでも野菜嫌いがいることを強調)

プロ野球選手のイチローも野菜が嫌い!(自分に厳しそうなイチロー選手が野菜を嫌いだという驚きを強調)

アクセントをどこにつけるかによって伝えたい文章のニュアンスを変化させることができます。

とアクセントをどこにつけるかで文章の伝えたい内容(ニュアンス)が少し変化していますよね。

強調タグを使う時の2つの注意点

強調タグを使う時に気をつけたい2つの注意点を紹介します。

strongやemは使いすぎない

ブロガーでまだ記事を書き始めた方がやってしまいがちなパターンです。

strongの使いすぎ事件

チャーハンの決めては火加減IHは火力が弱いからダメだ!そんなのチャーハンと認めないぜ。大火力での煽り炒めがチャーハンをうまくするコツだ!

全体的に暑苦しいですね。主張したい部分もよくわからず太字箇所が多すぎてかえって読みにくくなっています。

伝えたい気持ちが強すぎるとこうなることが多いので、論理的に「ここを強調するとわかりやすさを補助できるな」という箇所にだけ使うようにしましょう。

またstrongをあまりに使いすぎると検索エンジンにスパム(※1)と判定される可能性があるので要注意です。

(※1)スパム:検索エンジンに評価してもらうために過剰にキーワードを強調する行為

こちらもよくあるミスです。

<h1>htmlでの<strong>見出しタグ</strong>の使い方の説明</h1>

重要なワードだからといって見出しタグにstrongを使用するのは違反です。見出しタグを使っている時点である程度文章を強調できているので使う必要はありません。
こちらもstrongの多用と同じくスパム判定される危険性があります。

強調タグのポイントまとめ

strongとemは評価に差はない

今回は太字に装飾し強調を表すstrongb、イタリック体に装飾し強調を表すemiを紹介しました。最終的にどのタグを使うことが現実的かということを踏まえてまとめます。

  • strongは重要性を表し、emは強勢(アクセント)をつける
  • strong / b / em /  i を検索エンジンは同じように評価するので、基本的にはstrongを使っておけば問題ない
  • 強調タグは多用しすぎない、見出しに使用しない

ワンポイントアドバイス

strongemを使うことでSEOの評価が劇的に上がるということはないので、強調タグを使用することはあくまで読者と検索エンジンへのページの理解を促すもの程度に留めておこう。

“WEB制作の勉強で失敗したくないあなたへ”

サイト制作をホントに0から学習できる教材を無料配布中!

\モダンなポートフォリオサイトが作れるように!/
  • 他のスクールなら確実に「有料級」のWEB制作の教材が今なら無料で閲覧可能!
  • ディレクター、デザイナー、エンジニアすべて一貫できる現役プロが1人で作成したから体系的に学習できる
  • 4つの課題にチャレンジしながら着実に基礎を固めていくから挫折がない

無料配布の講座では、このようにモダンなポートフォリオサイトが作れちゃいます!

特設ページで詳しくチェックする

スクール越えの圧倒的なコスパ1ヶ月でWeb制作を身に着ける

プロのメンターサポート付き実務レベルのコーディングカリキュラム

詳細を今すぐチェック!

ギャクサンで作成するポートフォリオサイトのイメージ

記事では見れない豆知識

圧倒的なコスパを体感1ヶ月でWeb制作を身に着ける

プロのメンターサポート付き実務レベルのコーディングカリキュラム

詳細を今すぐチェック!

ギャクサンで作成するポートフォリオサイトのイメージ