PR

【HTML】強調したい時に!emタグ、strongタグの使い方のご紹介!サンプル付き!

WEB制作技術系

文中の特定の箇所を強調したいというシーンありますよね?

そんな時、HTMLでは、emタグstrongタグを使用します。

今回は、emタグ、strongタグの違いや使い方について解説していきます。

emタグ、strongタグとは?

emタグ、strongタグは、テキストを強調したい時に使用しますが、若干意味が違います

では、順番に見ていきましょう。

emタグについて

emタグは、「強調」を意味するタグです。「イーエム」と読みます。

<p>私は昨日、キーボードに<em>ジンジャエールをこぼして</em>しまいました。</p>

上記のサンプルのように、強調したい部分を、<em></em>で囲んで使用します。

デフォルトの状態では、emタグで囲んだテキストは、斜体(イタリック)で表示されます。

日本語の場合だと、斜体を使うケースはそれほど多くありませんので、emタグを使う場合は、下記のようにCSSで変更してあげましょう。

em {
  font-weight: bold;
  font-style: normal;
}

上記の指定で、emタグで囲んだ部分が、太字で表示されるようになります。

ついでに知っておく、iタグについて

HTMLには、囲んだテキストを斜体にするiタグというものもあります。「アイタグ」と読みます。このタグは、特別な意味を持たない装飾だけが目的のタグです。

<p>私は昨日、キーボードに<i>ジンジャエールをこぼして</i>しまいました。</p>

そもそも、日本語の場合、斜体を使うケースが少ないので、このタグはあまり使う機会がありません。

emタグ→強調を意味するタグ。テキストは、斜体で表示される。
iタグ→特別な意味を持たないタグ。テキストは、斜体で表示される。

strongタグについて

strongタグは、「重要」を意味するタグです。「ストロング」と読みます。

<p>試験日時は<strong>2023年2月20日(月)</strong>です。</p>

上記のサンプルのように、重要だと思う部分を、<strong></strong>で囲んで使用します。

デフォルトの状態では、strongタグで囲んだテキストは、太字で表示されます。

ついでに知っておく、bタグについて

HTMLには、囲んだテキストを太字にするbタグというものもあります。「ビー」と読みます。このタグは、iタグ同様、特別な意味を持たない装飾だけが目的のタグです。

<p>試験日時は<b>2023年2月20日(月)</b>です。</p>

使い方は、strongタグと同じで、太字にしたい箇所を囲むだけです。

どちらのタグを使っても、テキストは太字になりますが、strongタグを使う方が、SEO的に良いと言われていますので、太字にしたい場合は、基本strongタグを使用するようにしましょう。

strongタグ→重要を意味するタグ。テキストは、太字で表示される。
bタグ→特別な意味を持たないタグ。テキストは、太字で表示される。

emタグ、strongタグの使い分けは?

お悩みさん
お悩みさん

強調?重要?なんか、使い分けピンと来ないです。具体的な使い分け方法を教えてください。

実は、HTMLあるあるで、emタグは「強調」、strongタグは「重要」という意味はあるのですが、具体的な使い分けは曖昧です。

こちらの記事でご紹介した、引用の際に使用する、qタグ、blockquoteタグと同じように具体的な使い分けが定義されていないんです。

なので、あまり使い分けについては意識する必要はありませんが、strongタグの方がよく使われる印象です。

お助け猫
お助け猫

HTMLって似たような意味、定義が曖昧なタグがある場合があるので、混乱しますが、そういうものだと思っていただければ大丈夫です。このタグを使うと、SEOで特別不利になるとか聞いた事は無いので、使い分けに関しては、あまり気にする必要はありません。

まとめ

今回は、emタグ、strongタグについて書いてみました。

ちらっと、iタグ、bタグも出てきましたが、HTMLは、似たような意味を持つタグ、定義が曖昧なタグが存在しています。

初めのうちは、混乱してしまいますが、慣れれば大丈夫です。自分なら、どのタグを使うか、決めておくのもアリかもしれませんので、今回の記事が、参考になれば幸いです。

コメント

タイトルとURLをコピーしました