テキストの一部を強調させる
サイトの一文の中で、特定の部分の内容が重要な意味を持つ場合、HTMLで「ここは特に重要」と意味を持たせることができます。
そんな時に活用されるのが「strong要素」と「em要素」です。
HTMLの定義上、strong要素は「重要なテキスト」、em要素は強調させたいテキストに使うことになっており使い分けがやや紛らわしいのですが、strong要素の方がより強い意味付けを行う要素となっています。
もう1つ、テキストを太字として表示するHTMLにb要素がありますが、こちらは意味においての重要を示すものではなく、単に表示として「太字にする」という機能を持った要素です。
以上のことから、文章のマークアップにおいて意味付けの重さで並べると次のようになります。
strong要素 > em要素 > b要素
strong要素とem要素は使い分けが難しいですが、文章の意味付けは曖昧な要素も多いため厳密な使い分けを意識する必要はありません。
重要な箇所では基本的にstrong要素を使うようにし、どこが本当に重要な箇所か分からなくなってしまいそうなぐらい多用することがあったら「もっとも大事な箇所、というわけではないけどちゃんと伝えたいこと」をem要素にしてみる...ぐらいな使い方で差し支えありません。
マークアップ例と表示の違い
実際にHTMLでマークアップを行い、ブラウザでの表示を確認してみましょう。
区別しやすいように、3つのp要素に分けてマークアップを行います。
HTML マークアップ例
<p>テキストの中で<strong>重要な意味を持つテキストについてはstrong要素で囲む</strong>。</p>
<p><em>意味を強調させたいテキストについては<em>em要素で囲む</em>。</p>
<p>単に表示上の強調をさせたい場合は<b>b要素を使う</b>。</p>ブラウザで表示すると、次のようになります。
1行目はstrong要素、2行目はem要素、3行目がb要素です。
strong要素とb要素は太字にしている点で表示は共通しています。
em要素については太字ではなく、斜体で表示されます。
強調の度合いについては先述した通りですが、普段は強調したい部分にはstrong要素を使うようにし、厳密な意味づけをしたい場合のみem要素とb要素を使うようにすれば十分です。