HTML5での<em>と<strong>の違い
いつも使うたびに迷って調べたり、聞かれる機会も増えてきたのでまとめました。
多分もう覚えられたと思います！
目次
- em要素
- strong要素
- まとめ
- 参考サイト
Advertising
em要素
emは強調を表すテキストに使用します。強勢と言っているサイトもあります。
文章の中でどこを強調するかでニュアンスが変わる時なんかに使うと良いのではないかと思っています。
<p>私はブログを半年ぶりに更新しました。</p>
これはプレーンな文章。
<p>私はブログを<em>半年ぶり</em>に更新しました。</p>
半年ぶりに！更新しました。というイメージ。
<p>私はブログを半年ぶりに<em>更新しました</em>。</p>
ブログ、更新したよ！というイメージ。
どちらも文章は変わらないけど、前者は前回の更新からどのくらい間が空いたか、後者はブログを更新したという事実が強調されています。
強調する場所によって文章の意味（ニュアンス？）が変わってくるような場所に使用します。emの入れ子にすることによって、強調の度合いを高めることができます。
googleで「強勢」を調べると「つよいいきおい。言語学では、語の中のある音節（拍）を際立たせるための力の程度。強弱・高低などで示される。」とのことですので、強勢の方が要素の使い所の目安になるかもしれませんね。
strong要素
strongは強力な重要性・深刻性・緊急性を表すテキストに使用します。strongの入れ子にすることによって重要性の度合いを高めることができます。
注意書きやコンテンツの中で大事なところをstrongで囲むというイメージで使っています。
<strong>液体スープは<strong>お召し上がりの直前</strong>に入れてください。先に入れてしまうと麺がほぐれません。</strong>
カップ麺の作り方に書いてあるような文章だとこんな感じになるかと。。。
まとめ
HTML4では強調と重要性の区別がなく、em・strongのどちらも使えたけれど、HTML5からは強調はem、重要性はstrong。
私の中での意識付けとしては、下記のようなイメージです。
em要素は、会話の中で声を張って強調するような所に使う。strong要素は、注意書きや但し書きなど閲覧者に特に知っておいて欲しいこと、大事な事を示すのに使う。
私が普段仕事として制作しているようなサイトでは、em要素を使用する場面はほとんどないような気がしています。
