<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>