SYNCER

SYNCER

<em要素> - 強調

公開日:

em要素は、テキストが文脈上、強調されていることを表す要素です。強調の度合いを強めるために、em要素を重ねてマークアップすることもできます。重要とは意味が違うのでご注意下さい。

概要

名前
em (Emphasis)
カテゴリー
Flow content
Phrasing content
Palpable content
配置できる場所
Phrasing contentが期待される場所。
コンテンツモデル
Phrasing content。
タグの省略
開始タグも終了タグも省略できません。
DOM Interface
HTMLElement
デフォルトのスタイル
em {
	font-style: italic;
}
仕様書
https://html.spec.whatwg.org/multipage/semantics.html#the-em-element

属性

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

説明

強調とは?

em要素は「強調」という意味を持ちます。どの部分を強調するかによって文章の意味は大きく変わります。次の一文を見て下さい。

HTML

<p>黒柴は可愛い犬ですよね。</p>

例えば、em要素で「黒柴」の部分をマークアップしてみます。すると「黒柴」という言葉が強調され、この文章は「(犬の中でも特に)黒柴、は可愛い犬ですよね」という意味で読むことができます。

HTML

<p><em>黒柴</em>は可愛い犬ですよね。</p>

今度は「犬」の部分をマークアップしてみましょう。すると先ほどとはニュアンスが変わって、「黒柴は可愛い(猫でもカバでもライオンでもなく)犬(という種類)、ですよね」と解釈することができます。

HTML

<p>黒柴は可愛い<em>犬</em>ですよね。</p>

「可愛い」の部分をマークアップすれば、「黒柴は(怖いでも醜いでもなく)可愛い、犬ですよね」という意味になってきます。このように、文章の中で強調して伝えたい部分をマークアップするのがem要素の役割です。

HTML

<p>黒柴は<em>可愛い</em>犬ですよね。</p>

全体のマークアップ

全体をマークアップすることで、文章の中でも特にその一文を強調したい、というメッセージになります。

HTML

<p><em>黒柴は可愛い犬ですよね。</em></p>

入れ子でマークアップ

em要素は重ねてマークアップすることで、強調の度合いを高めることができます。特に強調したい時は次のように重ねてみるのもいいと思います。

HTML

<p>黒柴は<em><em><em>可愛い犬</em></em></em>ですよね。</p>

重要という意味はない

em要素には「強調」という意味がありますが、「重要」という意味はありません。ニュアンスの違いを意識しましょう。ドキュメントの中で重要な部分であることをアピールしたい場合は、em要素ではなく、strong要素を用いるのが適切です。例えば、注意喚起を例に出すなら次の通りです。

HTML

<p>この地域では車の盗難が相次いでいます。その...%が鍵のかけ忘れだったことが原因です。<strong>車から出る時は、鍵をかけるのを忘れないようにして下さい。</strong></p>

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】<em要素> - 強調</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/em/">
		<style>
			body {
				background-color: #fff ;
			}
		</style>
	</head>
	<body>

<p>em要素は、テキストの中で強調したい部分をマークアップする要素です。</p>

<p>黒柴は、<em>可愛い犬</em>だ。</p>

	</body>
</html>

デモを開く

デモ

</head><body>までを含めて下さい。

<body> <div id="___body">

</div> <script>...</script> </body> </html>

<style>

</style>

<script>

</script>