【HTML5】目立たせる要素(em・strong・mark・b)の違いや使い方

HTMLにはテキストを強調する要素として、em要素、strong要素、mark要素、b要素があります。

この4つの使い分けについて迷ってしまいますよね。

これらの要素にはきちんと意味があり、きちんと使い分けることで正しいHTML構造をつくることができます。

それぞれの要素の意味や使い方について解説します！

em要素

em要素は文章の中で強調されている部分に使用します。

たとえば、以下の例文では「私は」にem要素を指定しています。

<p><em>私は</em>白米を食べます。</p>

この場合、私は(誰が何を食べようと)白米を食べますという意味になります。

続いて、「白米」を強調してみます。

<p>私は<em>白米</em>を食べます。</p>

この場合、私は(他の食べ物ではなく)白米を食べますという意味になります。

このようにem要素をマークアップする箇所によって文章の意味合いが変わります。

strong要素

strong要素はその内容が「緊急」「重大」「緊急」「深刻」のいずれかであることを示す要素です。

もちろん緊急の連絡や警告などにも使用しますし、見出しや文章の重要な部分に使用することもできます。

<h2>ガンコな汚れは<strong>重曹</strong>で落とせます！</h2>

strong要素については以下記事で詳しく解説していますのでご参考ください。

コーディング

2021.12.24

【HTML5】目立たせる要素(em・strong・mark・b)の違いや使い方

HTMLにはテキストを強調する要素として、em要素、strong要素、mark要素、b要素があります。 この4つの使い分けについて迷ってしまいますよね。 これら…

mark要素

mark要素は、元々は目立っていなかったテキストの一部を参照してもらいやすいように目立たせる場合に使用します。

たとえば、引用文の中で使用する場合、引用元では特に目立っていなかったけど、引用した人が特に注目してもらいたい部分に指定します。

もっとわかりやすい例として、検索結果の一覧で、検索に使用した単語を目立つようにしたい時に使用します。

重要であるなどの意味は持たず、あくまで見た目的に目立たせたい時に使用する要素です。

<p>人間失格の冒頭の文章はとても有名です。</p>

<blockquote>
  <p><mark>恥の多い生涯を送って来ました。</mark>自分には、人間の生活というものが、見当つかないのです。自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした。</p>
</blockquote>

b要素

b要素は、指定したテキストに意味合いを持たせることなく、あくまで実用的な目的で目立たせるための要素です。

例えば文章内の製品名やキーワードなどを目立たせたい時に使用します。

重要であるなどの意味合いは持ちません。もし意味的にも重要であることを示したい場合はstrong要素やem要素を使用するべきです。

また、オリジナルの文章がありそれに手を加えて目立たせる場合はmark要素が適切です。

strong要素、em要素、mark要素いずれにも適さなかった場合に使用する、というように思っておけばいいでしょう。

<p>日本人の朝食は大体<b>食パン</b>か<b>ご飯</b>のどちらかだ。</p>

目立たせる要素(em・strong・mark・b)の違いや使い方まとめ

目立たせる要素だけでも4つもあって混乱してしまいますね。

この記事でこの4つの意味や使い方について知っていただけたら幸いです！

こちらの記事もおすすめ

コーディング

2021.12.24

【HTML5】目立たせる要素(em・strong・mark・b)の違いや使い方

HTMLにはテキストを強調する要素として、em要素、strong要素、mark要素、b要素があります。 この4つの使い分けについて迷ってしまいますよね。 これら…