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では強調と重要性の区別がなく、emstrongのどちらも使えたけれど、HTML5からは強調はem、重要性はstrong

私の中での意識付けとしては、下記のようなイメージです。

  • em要素は、会話の中で声を張って強調するような所に使う。
  • strong要素は、注意書きや但し書きなど閲覧者に特に知っておいて欲しいこと、大事な事を示すのに使う。

私が普段仕事として制作しているようなサイトでは、em要素を使用する場面はほとんどないような気がしています。

参考サイト

HTML Standard 日本語訳

HTML 5.1: 4.5. Text-level semantics

em 要素 – HTML | MDN

strong 要素 – HTML | MDN

Author

すずき のりえ
@planbworks

Webデザイナー / グラフィックデザイナー / エイチレフ合同会社 業務執行社員
コーポレートサイト・リクルーティングサイト、会社案内・入社案内がメインです。最近では医療・福祉系のお客様が多いです。
母校の専門学校で非常勤講師(DTP / 2015年10月〜, Web / 2021年10月〜)。2017年3月よりお茶のお稽古に通っています(裏千家)。

関連記事