
em要素を使えば、文の中にアクセントを付けることができます。
目次
em要素の基本的な使い方
まずは、以下のプログラムと、ブラウザでの表示結果を見てください。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>em要素</title>
</head>
<body>
<p>スカイツリーの高さは<em>634m</em>である。</p>
</body>
</html>

body要素の中に、「文のかたまり(段落)」を示すp要素があります。
p要素の中には、「スカイツリーの高さは634mである。」と書かれた文章があります。
そして、「634m」と書かれたフレーズは、em要素でマークアップされています。
このため、ブラウザでの表示結果の通り、「634m」は、斜め文字のように表示されています。
つまり、この「斜め文字」のように表示された状態が、「強勢(アクセント)が付与された状態」を示してます。
全角文字に「強勢(アクセント)」を付与することはできる?
次に、全角文字(日本語)について、em要素でマークアップしてみましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>em要素</title>
</head>
<body>
<p>スカイツリーの高さは<em>634m</em>である。</p>
<p>スカイツリーの<em>高さ</em>は<em>634m</em>である。</p>
</body>
</html>

先ほどのプログラムに、もう一行、文章を追加しました。
追加した文章では、「高さ」と、全角文字として記載した「634m」について、em要素でマークアップしてあります。
そして、ブラウザでの表示結果の通り、「高さ」及び「634m」の両方のフレーズ共に、「強勢(アクセント)」を付与することができないことが確認できます。
英語(英文)ではどうなる?
では、英語(英文)について、em要素でマークアップしてみましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>em要素</title>
</head>
<body>
<p>スカイツリーの高さは<em>634m</em>である。</p>
<p>スカイツリーの<em>高さ</em>は<em>634m</em>である。</p>
<p><em>The height</em> of the Sky Tree is <em>634 meters</em>.</p>
</body>
</html>

先ほどのプログラムに、更にもう一行、英文を追加しました。
追加した英文では、「The height」と「634 meters」について、em要素でマークアップしてあります。
そして、ブラウザでの表示結果の通り、「The height」と「634 meters」の両方のフレーズ共に、「強勢(アクセント)」を付与できました。
em要素は、半角文字にのみマークアップが可能なのか?
さらに、半角のカタカナについて、em要素でマークアップを行いました。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>em要素</title>
</head>
<body>
<p>スカイツリーの高さは<em>634m</em>である。</p>
<p>スカイツリーの<em>高さ</em>は<em>634m</em>である。</p>
<p><em>The height</em> of the Sky Tree is <em>634 meters</em>.</p>
<p><em>スカイツリー</em>の高さは<em>634m</em>である。</p>
</body>
</html>

先ほどのプログラムに、半角カタカナのフレーズを含む日本語の文章を追加しました。
追加した英文では、「スカイツリー」と「634m」について、em要素でマークアップしてあります。
これについては、ブラウザでの表示結果の通り、「634m」については「強勢(アクセント)」を付与できましたが、半角カタカナの「スカイツリー」には、「強勢(アクセント)」を付与することができませんでした。
以上から、em要素は、「英文」及び「半角数字」に対してのみ、「強勢(アクセント)」を付与することが可能であることが、確認できました。
「強勢(アクセント)を付与する」の意味

そもそも『強勢(アクセント)を付与する』って、どういう意味?
2つの例文について、紹介します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>em要素</title>
</head>
<body>
<p>Web学習は、<em>HTML</em>を学習することで、CSSも同時に学習できる。</p>
<p>Web学習は、HTMLを学習することで、<em>CSS</em>も同時に学習できる。</p>
</body>
</html>

上の文章では、HTMLに強勢が付与されています。
下の文章では、CSSに強勢が付与されています。
つまり、上の文章では「HTMLを学習することで」との内容に強い意味を持たせています。
下の文章では「CSSも同時に学習できる」との内容に強い意味を持たせています。
すなわち、em要素は、文の中においてアクセントを付ける位置を設定することで、文章の意味(伝える意味)を変えることができます。
各種ブラウザでの表示結果
【HTML】 | Google Chrome | Microsoft Edge | Safari | Firefox | Opera |
em要素 | ○ | ○ | ○ | ○ | ○ |
以上、em要素の使い方について、ご参考になさってくださいね。