【HTML】emタグとは(結論: 文字を強調するためのタグです)

「HTMLのemタグを見かけたけど、どうやって使うのだろう…。」という疑問はありませんか？

emタグは頻繁に見かけるものではありませんが、せっかくなのでおさえておきたいですよね。

この記事では、emタグの意味と使い方、さらに派生してSEOのためのコーディングまで解説していきます。

それでは、まずemタグの意味を見ていきましょう。

emタグとは

emタグとは何かを明らかにするために、ここからは「emタグの意味」「iタグとの比較」「単位のem」の3つを解説していきます。

emタグの意味

結論からいうと、emタグは「文字を斜体にして強調するためのタグ」です。

ちなみに「em」は、「emphasis(強調)」の略です。

タグ自体は以下のように書きます。

<em>Hello</em>
<em>こんにちは</em>

出力すると下のようになります。

英語の方が斜体になっているのがわかります。

日本語でよく使われるフォントに関しては斜体になりません(斜体にしたいときは斜体になるフォントに設定する必要があります)。

日本語の方は斜体になりませんでしたが、emタグを用いることで、コードに強調の意味をあたえることができます。

強調の意味がつけ加えられるので、斜体になるだけではなくSEO(検索エンジン最適化)にも役に立ちます。

emタグは「文字を斜体にして強調するためのタグ」ということを覚えておきましょう。

iタグとの比較

emタグと似ているタグとして、iタグが挙げられます。

iタグも文字の見た目を斜体にするからです。

文字を斜体にするのは同じです。

しかし、emタグは「強調の意味をもつ」のに対して、iタグは「強調の意味をもたない」という違いがあります。

なので、見た目を斜体にするだけで、強調の意味をもたせたくないときは、iタグを使いましょう。

ちなみに「i」は、「italic(斜体)」の略です。

使い方は以下のようになります。

<i>Hello</i>
<i>こんにちは</i>

出力すると下のようになります。

見た目に関していうと、emタグと同じなのがわかります。よくある日本語のフォントは斜体になりません(斜体になるフォントも一部あります)。

emタグとiタグはにていますが、意味づけの点で異なるということを覚えておきましょう。

単位のem

emタグと名前が同じものとして、「単位のem」が挙げられます。

これはよく使われるものであり、頻繁に見かけます。

「emタグ」と「単位のem」は、名前こそ同じですが全く別のものになります。

確認のためにいうと、「emタグ」はタグであり、「em」は単位になります。

ちなみに単位のemは、「px」「%」と同様に要素の大きさを決める単位になります。

単位のemは、大きさを絶対指定する「px」と異なり、大きさを相対的に決めるものになります。

どういうことかというと、1文字当たりの大きさを1としてどれくらいの大きさか決めるということです。

例えば、1emだと「1文字分の大きさ」、1.5em「1.5文字分の大きさ」、 0.5em「0.5文字分の大きさ」になります。

1文字の大きさと比較をしてして相対的に大きさを指定します。

以上、emタグと表記が同じものとして、単位の「em」があるということを確認しておきましょう。

SEOのためのコーディング

最初のパートで、emタグはSEOに役に立つといいました。

それは、emタグが意味をもつタグであるからです。

意味をもつタグでコードを書くと、検索エンジンであるGoogleのAIがコードの意味を理解できるようになります。

意味をもつタグでコードを書くことを、セマンティックなマークアップと呼んだりします。

ここからは、意味を持つタグともたないタグの2種類をそれぞれ解説していきます。

意味をもつタグの例

意味をもつタグは例えば以下のものになります。

• header
• nav
• footer

などです(他にも色々なタグがあります)。

たとえば、ヘッダーをつくるときはheaderタグを使う、ナビゲーションバーをつくるときはnavタグを使う…という風にするとコードに意味づけが行えます。

コーディングを始める前に、使いそうな意味をもつタグを確認しておきましょう。

意味をもたないタグ

意味をもたないタグは「divタグ」と「spanタグ」になります。

divタグとspanタグは、それ自体には意味はなく、コードに区切りをあたえるだけのタグになります。

使いどころとしては、意味をもつ使えるタグがないときになります。

ちなみにdivタグはブロック要素、spanタグはインライン要素という違いがあります。

それ自体では意味をもたず、コードに区切りを与えるだけのタグとして、「divタグ」「spanタグ」があることをおさえておきましょう。

まとめ

いかがでしたか？

emタグは、文字を斜体にして強調するためのタグであることが分かりました。

くわえて、emタグと似たタグとしてiタグが挙げられます。

ただし、iタグは文字を斜体にするだけで強調の意味はありません。

また、意味をもつタグを使いコーディング(セマンティックなマークアップ)をすると、SEOに役立ちます。

以上の知識をもってぜひコーディングに役立ててください。