18人がいいねしました
更新日
HTMLの文字の強調・装飾｜strong / em / b / i タグを理解しよう
web兄さん
html5から文字を強調・装飾するタグの使い方が変更されました。
その中でも
- 文字を強調・太字にするstrong / bタグ
- イタリック体に装飾するem / iタグ
これらのタグの違いと使い方をまるっと解説してきます！
文章を強調・太字にするstrongタグとbタグ
html5ではstrongもしくはbのどちらかを使うことで文字を太字にし強調することができます。
ブラウザでの表示の違い
これはbです
このようにどちらのタグを使っても見た目の違いはありません。
strongとbの違いは、それぞれのタグが「意味を持っているか、意味を持っていないか」です。
strongはタグで囲った部分が重要であることを表すことができ、bはただ見た目を太字にするだけでタグ自体に意味はありません。
厳密にはこういった違いがあるタグですが、Googleは「どちらのタグも同様に扱い、評価に影響することはない」と公言しているため、基本的にbは使わずにstrongを使っておきましょう。
strongを入れ子にすることでより強い重要性を示す
<strong>文字を強調するには<strong>ストロング</strong>を使用します</strong>このようにstrongで囲った文章をさらにstrongで囲むことができます。この場合は内側の「ストロング」というワードが最も重要性の高いワードだと認識されます。
文章をイタリック（斜体）にするemタグとiタグ
文字をイタリック体（斜体）にして文章を強調する場合、emもしくはiというタグを使用します。
ブラウザでの表示の違い
これはiです
emとiもブラウザでの見た目の違いはありません。
この２つのタグの違いもstrongやb同様「意味をもっているか、意味を持っていないか」です。
emは囲った部分にアクセントをつけ強調し、イタリック体にしますが、iはただイタリック体にするだけです。こちらもGoogleは同様に扱い評価するので、基本的にはemを使っておけば問題ありません。
ここまで強調をするにはstrongとemを使っておけば問題なさそうですが、「一体strongとemどっちを使ったらいいの？どっちも同じ強調じゃないの？」という疑問がでてきます。
この２つのタグにはきちんと違いがあるので続けて解説していきます。
strongタグとemタグの強調の意味の違い
さて、それぞれのタグの意味の違いについて説明していきます。
ブラウザでの出力結果は
- strong → 太字
- em → イタリック体（斜め文字）
となります。
見た目では太字になるかイタリック体になるかの違いしかありませんが、強調の意味合いが少し異なります。
strongは重要性、emは強勢を示す
strongは重要だと伝えたい単語・文章に使用し、emはアクセントをつけることによって文章の意味を変えたい箇所に使用します。
実例を観て観ましょう。
strongで重要性を強調した例
プロ野球選手のイチローはなんと野菜が嫌い！
長嶋茂雄は「I live in Tokyo」の過去形は？という問題に「I live in EDO」と回答した。
文章の中で特に伝えたい部分や、重要なワードにはstrongを使います。
emによってアクセント（強勢）をつける場合
プロ野球選手のイチローも野菜が嫌い！（プロアスリートでも野菜嫌いがいることを強調）
プロ野球選手のイチローも野菜が嫌い！（自分に厳しそうなイチロー選手が野菜を嫌いだという驚きを強調）
アクセントをどこにつけるかによって伝えたい文章のニュアンスを変化させることができます。
とアクセントをどこにつけるかで文章の伝えたい内容（ニュアンス）が少し変化していますよね。
強調タグを使う時の２つの注意点
強調タグを使う時に気をつけたい２つの注意点を紹介します。
strongやemは使いすぎない
ブロガーでまだ記事を書き始めた方がやってしまいがちなパターンです。
strongの使いすぎ事件
チャーハンの決めては火加減。IHは火力が弱いからダメだ！そんなのチャーハンと認めないぜ。大火力での煽り炒めがチャーハンをうまくするコツだ！
全体的に暑苦しいですね。主張したい部分もよくわからず太字箇所が多すぎてかえって読みにくくなっています。
伝えたい気持ちが強すぎるとこうなることが多いので、論理的に「ここを強調するとわかりやすさを補助できるな」という箇所にだけ使うようにしましょう。
またstrongをあまりに使いすぎると検索エンジンにスパム（※1）と判定される可能性があるので要注意です。
(※1）スパム：検索エンジンに評価してもらうために過剰にキーワードを強調する行為
こちらもよくあるミスです。
<h1>htmlでの<strong>見出しタグ</strong>の使い方の説明</h1>重要なワードだからといって見出しタグにstrongを使用するのは違反です。見出しタグを使っている時点である程度文章を強調できているので使う必要はありません。
こちらもstrongの多用と同じくスパム判定される危険性があります。
強調タグのポイントまとめ
今回は太字に装飾し強調を表すstrongとb、イタリック体に装飾し強調を表すemとiを紹介しました。最終的にどのタグを使うことが現実的かということを踏まえてまとめます。
- strongは重要性を表し、emは強勢（アクセント）をつける
- strong / b / em / i を検索エンジンは同じように評価するので、基本的にはstrongを使っておけば問題ない
- 強調タグは多用しすぎない、見出しに使用しない
ワンポイントアドバイス
strongやemを使うことでSEOの評価が劇的に上がるということはないので、強調タグを使用することはあくまで読者と検索エンジンへのページの理解を促すもの程度に留めておこう。
