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

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重要性を強調した例

  1. プロ野球選手のイチローはなんと野菜が嫌い!
  2. 長嶋茂雄は「I live in Tokyo」の過去形は?という問題に「I live in EDO」と回答した。

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

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

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

  1. プロ野球選手のイチローも野菜が嫌い!(プロアスリートでも野菜嫌いがいることを強調)
  2. プロ野球選手のイチローも野菜が嫌い!(自分に厳しそうなイチロー選手が野菜を嫌いだという驚きを強調)

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

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

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

strongやemは使いすぎない

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

strongの使いすぎ事件

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

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

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

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

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

strongタグはhタグ(見出しタグ)には使用しない

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

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

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

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

strongとemは評価に差はない

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

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

ワンポイントアドバイス

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

この記事を書いた人

web関連の勉強をしているみんなのために「とにかくわかりやすい記事」にこだわってwebスキルの情報を発信しています。フリーランスでデザイン・コーディング・webマーケティング(SEO)とweb全般のお仕事をしています。

この記事を読んだ人におすすめ

  • パンくずリストを構造化データでリッチスニペット対応する方法

  • HTMLのtableでテーブルを作る方法と応用テクニックを解説

  • HTMLとCSSの文法チェックツール7選!よくある文法エラーも紹介

  • 【イラスト解説】divに付いているidとclassの意味と使い方

  • webサイトのフォルダ構造(ディレクトリ)やファイルはどうなっている?

  • 入れ子構造をイラストを使ってわかりやすく説明!

  • 【基本のき】ホームページの仕組みをイラスト付きでまるっと解説!

  • 【HTMLのテクニック】コメントアウトを覚えてコードを見やすくしよう

記事をもっと見る +

目次を開く