<em>

強調を表す

HTML4.01 ~ 利用可能

最終更新日: 2021.05.20

どんなタグ?
強調を表したい場合に
<em>タグを使う

コードサンプル
<p>
  応募の締め切りは、<em>5月末まで<em>です
</p> 

em (イーエム)要素は <em></em> タグで挟むことで、特定箇所の強調を表すことができます。

HTML4.0.1では、強調を表すタグとしてemタグとstrongタグのどちらも使用できましたが、HTML5からは、強調を表すタグは、emタグのみです。
※strongタグは、HTML5では重要性を表すタグです。

どのカテゴリに属しているの?
em要素は フロー・コンテンツ, フレージング・コンテンツ というコンテンツ・カテゴリに属しているタグです。
梱包できるタグは?
emタグに梱包できる要素コンテンツ・モデルは、フレージング・コンテンツ です。

teru 特定の文字や文章を強調したい時によく利用するタグです。

どうやって使うの?
強調したい文章や単語を、
<em> タグで挟んで使います。

em要素は文章の中で、強調したい箇所を<em></em>で挟むだけです。

使い方
<em>強調したいテキスト</em>
コードサンプル
<p>
  海賊王に、<em>おれは</em>なる
</p>
  
ブラウザでの表示例
https://codehero.shibajuku.net/html/em/sample01/
どこでも使えるの?
emタグは フレージング・コンテンツ が配置できるところならどこでも使えます。
気をつけることは?
emタグは、文章の一部を強調するために使用し、強調する箇所によって意味やニュアンスが変わります。重要性を伝えたい箇所にはemタグではなくstrongタグを使いましょう。

TERUemタグとstrongタグを意識して使い分けれるようにしましょう

使える属性は?
グローバル属性のみ使えます。

<em>タグには、どの要素にでも使えるグローバル属性のみ使えます。

TERU使えるのはグローバル属性のみです。

サンプルが見たい
<em>タグを使ったサンプルを
いくつか紹介。

<em> タグを使ったサンプルを紹介します。

基本的な<em>タグのサンプル

コードサンプル
<p>
 一番大事にしていることは<em>仕事を楽しむこと</em>です。
</p> 
ブラウザでの表示例
https://codehero.shibajuku.net/html/em/sample02/

<em>タグを入れ子で使用するパターンのサンプル

コードサンプル
<p>
 新サービスは<em><em>5月末</em></em>に開始予定です
</p> 
ブラウザでの表示例
https://codehero.shibajuku.net/html/em/sample03/
入れ子にすることで、より強い強調を表すことができます。

TERU入れ子はほとんど使用する機会ないので基本的な使い方だけ覚えれば大丈夫です。

デフォルトスタイルは?
斜体文字(イタリック体)で表示されます。

一般的なブラウザでem要素を表示した場合、斜体文字(イタリック体)で表示されます。
具体的には、下記のCSSと同等のスタイルが適用されます。

em要素のデフォルトスタイル
em { font-style: italic; }

TERUCSSでデザインに合わせた文字スタイルの指定が必要です。

対応ブラウザは?
基本的にどのブラウザでも
大丈夫。

<em>タグは主に以下のブラウザが対応しています。

Internet Explorar
Internet Explorar 有り
Edge
Edge 12 ~
Google Chrome
Google Chrome 4 ~
Firefox
Firefox 2 ~
Safari
Safari 有り
Opera
Opera 有り

TERUどのブラウザでも問題ありません。

このリファレンスを書いた人

TERU

TERU

フリーランスのWEBエンジニア。 インフラSE10年→ITベンチャーへ転職→1年後にフリーランス(2019年8月~) WordPress、Shopifyを中心にサイト制作を行っています。 今はフリーランスチームでの活動に注力してます。

About サロンメンバーで作った
リファレンスサイト

Shibajuku

Webのスキルを
ワイワイ学んで、
ガンガン活用
するサロン。

このサイトはWebクリエーター養成所
「Shibajuku」のメンバーが作った、
初心者でもわかりやすいHTML + CSSのリファレンスサイトです。

このサイトについて