HTML <em>

HTMLの<em>タグは、語句を強調します。

構文

開始タグ <em> と終了タグ </em> に囲まれた文字列を強調します。

<em>
  <!-- phrasing content -->
</em>

開始タグと終了タグの間にはインライン要素を含めることができます。終了タグは省略できません。属性はすべて省略可能です。

HTMLタグ <em> の使用例と表示サンプルを次に示します。

The <em>quick brown</em> fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

日本語の強調

英語では強調する語句をイタリック体で表記する習慣がある。そのため、英語のフォントでは強調する語句がイタリック体で表示される。

日本語のフォントにはイタリック体が用意されていないことが多い。そのため、日本語の語句を強調しても、表示上変わらないことがある。

語句を<em>強調</em>することができます。

語句を強調することができます。

日本語では強調する語句に傍点を打ったり、太字で表記する習慣がある。

太字で強調する

太字で表示するには、font-weight CSSプロパティを使用する。

語句を<em style="font-weight: bold;">強調</em>することができます。

語句を強調することができます。

傍点で強調する

語句に傍点を打つには、text-emphasis または -webkit-text-emphasis CSSプロパティを使用する。

語句を<em style="text-emphasis: dot; -webkit-text-emphasis: dot;">強調</em>することができます。

語句を強調することができます。

属性

em要素には次に示す属性を指定できる。

class

CSSのクラスを指定する。空白で区切って、複数のクラスを指定することができる。

dir

テキストを記述する方向を指定する。

id

HTML文書内で一意な識別子を指定する。

lang

この文書が何語で記述されているかを指定する。

ondblclick

マウスのボタンがダブルクリックされたときに実行するJavaScriptを指定する。

onmousedown

マウスのボタンが押下されたときに実行するJavaScriptを指定する。

style

CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定することができる。

title

ツールチップに適した要素のアドバイザリ情報を指定する。

カテゴリ

em要素は次に示すカテゴリに属する。

• フロー・コンテンツ
• フレージング・コンテンツ
• パルパブル・コンテンツ

コンテンツ・モデル

em 要素の開始タグと終了タグの間には、フレージング・コンテンツを含めることができる。具体的には、以下に示す要素である。

• テキスト
• <a>
• <abbr>
• <area>（マップ要素の子孫である場合）
• <audio>
• <b>
• <bdi>
• <bdo>
• <br>
• <button>
• <canvas>
• <cite>
• <code>
• <data>
• <datalist>
• <del>
• <dfn>
• <em>
• <embed>
• <i>
• <iframe>
• <img>
• <input>
• <ins>
• <kbd>
• <label>
• <link>（本文中で許可されている場合）
• <map>
• <mark>
• <math>
• <meta>（itemprop 属性が存在する場合）
• <meter>
• <noscript>
• <object>
• <output>
• <picture>
• <progress>
• <q>
• <ruby>
• <s>
• <samp>
• <script>
• <select>
• <slot>
• <small>
• <span>
• <strong>
• <sub>
• <sup>
• <svg>
• <template>
• <textarea>
• <time>
• <u>
• <var>
• <video>
• <wbr>
• 自律型カスタム要素

タグの省略

em要素はタグを省略できない。

JavaScript

JavaScriptからは HTMLElement インタフェースを通じてem要素へアクセスできる。

accessKey

HTML 要素の accessKey 属性

accessKeyLabel

HTML 要素に割り当てられたアクセスキー（読取り専用）

autocapitalize

HTML 要素の autocapitalize 属性

contentEditable

HTML 要素の contenteditable 属性

dataset

HTML 要素のカスタムデータ属性

dir

HTML 要素の dir 属性

let dir = document.getElementById('em1').dir;

draggable

HTML 要素の draggable 属性

hidden

HTML 要素の hidden 属性

inert

HTML 要素の inert 属性

innerText

HTML 要素のテキストをレンダリングされた状態で返す。値を代入する場合は、テキストのみを置き換える。

isContentEditable

HTML 要素が編集できるかどうか（読取り専用）

lang

HTML 要素の lang 属性

let lang = document.getElementById('em1').lang;

outerText

HTML 要素のテキストをレンダリングされた状態で返す。値を代入する場合は、コンテンツ全体を置き換える。

spellcheck

HTML 要素の spellcheck 属性

style

HTML 要素の style 属性

tabIndex

HTML 要素の tabIndex 属性

title

HTML 要素の title 属性

let title = document.getElementById('em1').title;

translate

HTML 要素の translate 属性

参考文献

Web Hypertext Application Technology Working Group 2023. Text-level semantics. HTML Living Standard