[21] 重要性を示す strong要素 と強調を示す em要素を使い分けよう

今回は <strong>要素 と <em>要素を使い分けてみましょう。

以前（HTML4、XHTML1）は、どちらも強調を表すものとされていました。
が、HTML5で定義が少し変わって、
<strong>要素 は 重要性、 <em>要素 は 強調 を表すと区別されました。

使用する要素	<strong> 〜 </strong> <em> 〜 </em>

「em」は「emphasis（エンファシス）」の略。「強調」「力説」といった意味です。
「strong」は、そりゃーそのまんまストロングです。

<strong> も <em> も大昔からある要素で、どのブラウザも対応しています。
ブラウザのデフォルトスタイルでは <strong> は太字で、<em> はイタリック（斜体）で表示されます。
こんなかんじです。

重要性を示したいテキスト
強調したいテキスト

HTMLはこちらです。囲むだけでとても簡単。

<strong>重要性を示したいテキスト</strong><br>
<em>強調したいテキスト</em>

文字を太くしたいから<strong> を使ったり、イタリックにしたいから<em>を使ったりしないで、要素の意味を理解してマークアップしましょう。

スタイルの指定は必ず CSSを使います。 文字を太くしたいなら「font-weight: bold」、イタリックにしたいなら「font-style: italic」か「font-style: oblique」を使います。

<strong> と <em>の違い

<strong> と <em> は、HTML5から下記のように使い分けるよう定義づけられました。

<strong>は「重要性」を表す。使う部分で文章の意味は変更されない。
<em> は「強調」を表す。使う部分によって文章の意味が変わる。

って言われても…、なんだかわっかんないですよね。順番に説明します。

重要性を表す<strong>

<strong> は強烈にアピールすべきところに使います。こんなかんじで↓。

混ぜるな危険
酸性タイプの製品と一緒に使う(まぜる)と有害な塩素ガスが出て危険です。

HTMLはこちらです

<strong>混ぜるな危険</strong><br>
酸性タイプの製品と一緒に使う(まぜる)と有害な<strong>塩素ガスが出て危険</strong>です。

<strong> の入れ子でさらに重要度アップ

<strong> は入れ子にすることもできます。入れ子の階層が深いほど重要性も高くなります。
こんなかんじで↓（見た目はあんまり変わりませんけどね）

混ぜるな危険_塩素系漂白剤
酸性タイプの製品と一緒に使う(まぜる)と有害な塩素ガスが出て危険です。

HTMLはこちらです

<strong><strong>混ぜるな危険</strong>_塩素系漂白剤</strong><br>
酸性タイプの製品と一緒に使う(まぜる)と有害な<strong>塩素ガスが出て危険</strong>です。

「塩素系漂白剤」や「塩素ガスが出て危険」より「まぜるな危険」のほうが階層が深いので、より重要ということですね。

で「文章の意味が変更されることは無い」のですが、
これは<em>との比較論なので、とにかく次の <em> を見てみましょう。

強調を表す<em>

<em> も、 <strong>ほどではないけど、強めにアピールしたいところに使うんですが。
ただ「ひとつの文章の中で、使う部分によってその文章の意味合いが変わってくる」という性格を持つようになったんだそうです。
下のサンプルを見てください。

日本の新幹線は速くて安全です。
日本の新幹線は速くて安全です。
日本の新幹線は速くて安全です。
（わかりやすいように<em>でマークアップした文字を紫色にしています）

1行目は「速くて安全」を強調して、性能をアピール。
2行目は「新幹線」を強調し、車や飛行機など「他の交通手段よりも」をアピール。
3行目は「日本の」を強調して、ほかの国よりも「日本は大丈夫」ってアピール。

こんな具合で、口語（話し言葉）のとき「相手に伝えたい意味合いによって、ちょっと大きめに強調してしゃべる」ようなニュアンスで使います。

こんなわけで <em> は「使う場所によって文章の意味が変わる」と定義されているのです。で、<strong>はこんなふうに意味は変わらないんだって。

ちなみに上の新幹線サンプルのHTMLはこちらです

日本の新幹線は<em>速くて安全</em>です。<br >
日本の<em>新幹線</em>は速くて安全です。<br />
<em>日本の</em>新幹線は速くて安全です。

<em>の入れ子でさらに強調

<em>も入れ子にすることができます。入れ子の階層が深いほど強調されます。

日本の新幹線は速くて安全です。
（わかりやすいように<em>でマークアップした文字を赤くしています。）

HTMLはこちらです

<em>日本の新幹線は<em>速くて安全</em></em>です。

「日本の新幹線」より「速くて安全」のほうが階層が深いので、より強調されます。

<strong> と <em> の比較まとめ

まとめです。

・強度は、 <strong>　＞　<em>
・両方とも「入れ子」で使えて、入れ子の階層が深いほど強くなる
・ <em> は使う部分によって文章の意味が変わる（<strong>は変わらない）

次回予告

さて次回は、HTML5から新しく加わった <mark> 要素を使ってみましょう。
<mark> も <strong> や <em> と同類で、読んでる人に強めにアピールしたいところに使います。
でも <strong> や <em> とは意味が違う…。詳細は次回。