概要

<em> および <i> は、テキストを斜体（イタリック）で表示するためのHTMLタグです。
どちらも見た目は似ていますが、<em> は意味的な強調を表し、<i> は装飾目的に使用されます。

基本的な使い方

See the Pen <strong> / <b>タグについて by 西野, WEBデザイン (西野 誠) (@-WEB-the-vuer) on CodePen.

<p>これは <em>重要なキーワード</em> です。</p>

<p>これは <i>書籍名や外国語など</i> に使われます。</p>

<em> は「文章内での意味的な強調」を意図しており、スクリーンリーダーなどでも強調されて読み上げられることがあります。
一方、<i> は「慣習的に斜体が使われる文脈（例：技術用語・外国語・書籍名など）」で用いられます。

出力される内容の例

これは 重要なキーワード です。
これは 書籍名や外国語など に使われます。

役割とメリット（定義リスト形式）

意味的強調（<em>）

文章の中で特に注目させたい語句を示すのに適しています。

視覚的装飾（<i>）

外国語・技術用語・書籍名などの慣習的な斜体表現に利用されます。

アクセシビリティ

<em> は音声読み上げ時にも強調されるため、視覚だけでなく聴覚にも配慮できます。

注意点

• <em> と <i> は見た目は同じでも、意味が異なるため使い分けが必要です。
• 見た目だけの調整を目的とする場合は、CSSで font-style: italic; を使うのも適切です。
• 意味的な強調をしたい場合には、必ず <em> を使用しましょう。

まとめ

<em> と <i> はどちらも斜体表示をしますが、意味は異なります。
<em> は意味的な強調、<i> は慣習的・装飾的な用途です。
セマンティックHTMLの観点からも、適切に使い分けることがアクセシビリティの向上にもつながります。