HTMLにおける強調表現。<strong>、<em>、<b>、<i>の使い分け

HTMLには、文字を太字にしたり斜体にしたりして、強調するための要素があります。こういった要素を使えば、文章にメリハリができるので、すごく読みやすくなります。また、重要な個所を知らせることが出来ますから、言いたいことも伝えやすいです。

太字を表す要素としては、<strong>や<b>などがあり、斜体を表す要素として<em>、<i>などがありますね。しかし、見た目は同じ効果でもコンピュータから見た場合、全く異なる意味になることがあります。

なので、それらの意味を正しく理解するようにしましょう。

 

意味を与えながら見た目を変える要素

<strong>と<em>は、太字と斜体を表す要素です。そして、どちらも「強調」の意味を表すときに使います。これらをどのように使い分けるのかというと、以下のようになります。

strong:重要性(どこで使っても同じ意味)
em:強調(使う場所によって意味が変わる)

これだけ見ても分からないと思うので、順番に解説しましょう。
 

strong要素

<strong>は、使う場所を問わず、重要性を示すことができます。

コミュニケーションを上達させるには、<strong>聞き上手になること</strong>が大切です。

上記の場合、「聞き上手になること」が強調されています。「ここが重要だ!」ということを示せるわけですね。

 

em要素

<em>は、相対的な強調を示す要素です。なので、使う場所によって、若干意味が異なってしまいます。

日本の電化製品は、<em>壊れにくい</em>です。
日本の<em>電化製品</em>は、壊れにくいです。
<em>日本の</em>電化製品は、壊れにくいです。

1行目は、「壊れにくい」という性質を強調しています。
2行目は、他の製品よりも「電化製品」が優れていることを強調。
3行目は、他の国よりも「日本」の製品が優れいていることを強調。

このように、<em>を使う場所によって強調の仕方が変わりますから、覚えておくようにしましょう。

さらに、入れ子構造にすることで、より強調をアピールすることもできます。

<strong>全品半額セールは、<strong>本日まで!</strong></strong>
<em>日本の電化製品は、<em>壊れにくい</em>です。</em>

1行目だと、「本日まで!」が二重の<strong>になっているので、さらに強調されています。2行目でも、「壊れにくい」が二重の<em>となっており、より壊れにくさをアピールしているわけです。

上手く使い分けることで、強調度を調節することができます。重要なことですから、覚えておくようにしましょう。

 

意味を与えずに見た目だけを変える要素

同じような強調表現に、<b>と<i>とがあります。それぞれ、太字と斜体を表すものですが、これらは意味を与えない要素となります。つまり、見た目を変えるだけであって、強調などの意味にはならないということですね。

だから、視覚効果だけを与えたい場合に、使うようにしましょう。「HTML5」においては、他と区別したいときに用いると定義されています。<b>や<i>を用いたからといって、コンピュータに重要だと認識させることは出来ないので注意してください。

でも、本来の目的からすると、テキストの装飾はCSSで行うものです。なので、<b>や<i>を使うのであれば、CSSを使った方が良いかもしれません。

 

以上、強調表現の使い分けについて紹介しました。読みやすく理解しやすい文章にするためには、強調表現は欠かすことが出来ないものです。なので、意味を正しく理解して、上手く使い分けができるようにしてください。

サブコンテンツ

このページの先頭へ