意外と知らないHTML5における「strong」と「em」の意味の違い

もはやHTML5なくしてサイトが作れなくなりつつある うかです、こんにちわ。

HTMLには「strong」と「em」というタグがあります。どちらも「強調」の意味を持つタグなんですが、HTML5では強調するものがそれぞれ違うって、ご存知でした?

strongタグとemタグ

ご存知の方にとっては今さら何をwwwというところですが、通常、strongタグで囲った部分は太字で、emタグは斜体で表示されるので、「太字と斜体の違い」としか思ってない方も多いんじゃないかと。

でも、太字だの斜体だのといった装飾はCSSで行うことが原則。それぞれのタグにはちゃんと意味があるんです。

HTML4以前のstrongタグ、emタグ

HTML4のstrongタグとemタグは、単に「強調」を示すタグとして使われていて、emタグが「強調」、strongタグが「より強い強調」、などと解説しているサイトがたくさんあります。

しかし、HTML5からタグの意味合いが変更され、次のようになりました。

HTML5におけるstrongタグの意味

strongタグは、文中の特定の語句が重要であることを示します。例えばこんな感じ。

【タイトル:三国志とは】
魏・呉・蜀の三国が覇権を争った三国時代のことを叙述した歴史書を三国志という。

「三国志とは」というタイトル対して重要になってくる語句は、もちろん「三国志」。なので、文中では「三国志」の部分をstrongタグで囲い、「この語句、重要だからネ!」ということを表します。

これはHTML4以前と同様に、「強調」を示すためのタグです。

HTML5におけるemタグの意味

emタグは、文章の意味合いとして強調すべき語句やフレーズを示します。例えばこんな感じ。

  1. ダイエット中なので夜にウォーキングをしている。
  2. ダイエット中なので夜にウォーキングをしている。
  3. ダイエット中なので夜にウォーキングをしている

上の3つは、それぞれ全く同じ文章ですが、強調すべき部分によって意味が変わってきます。

  1. 「なんで」夜にウォーキングをしているのか→「ダイエット中なので」
  2. 「いつ」ウォーキングをしているのか→「夜に」
  3. 「なにを」ダイエットのためにしているのか→「ウォーキングをしている」

このように、同じ文章でも複数の読み方ができるような場合、書き手が考える意味と違う捉え方をされないよう、強調すべきフレーズを明示してあげるためのタグ、それがemタグです。

あくまで文章のニュアンスを示すタグなので、emタグにはキーワードを強調するような効果はありません。

HTMLタグは意味を理解して適切に使いましょ

以上、知ってれば損はしないstrongタグとemタグの意味の違い、使い方の違いについてでした。

以前は「SEO効果がある」なんてこと言われていたstrong/emタグですが、現在、その効果は薄れているようです。

また、「装飾は全てCSSで」ってことでXHTMLで使用が禁じられているbタグ、iタグも、HTML5では「他と区別して太字、斜体にしたい部分」に使用できるので、単に太字・斜体にしたい場合はこちらを使ったほうがよろしいかと。

ちなみに、このブログでは、CSSでスタイルを変更して、strongもemも太字で表示するようにしてます。日本語の場合、そっちの方が見やすいし分かりやすいかなーと思って。

なんにせよ、HTMLタグはその意味通りに適切に使っていきたいものですネ。