HTMLで文章の一部を強調したいときは、文字を太くしたり、斜体にしたり、背景色を付けたりできます。ただし、見た目が似ているタグでも、HTMLとして伝える意味は異なります。
語調を強めるならem、重要性を示すならstrong、文脈上の関連箇所を目立たせるならmarkを使います。この記事では、iやCSSとの違い、文字サイズ・色を使った見やすい強調まで初心者向けに解説します。
HTMLの強調タグは意味で使い分ける
まずは、強調に使われる4つのタグの違いを確認しましょう。ブラウザの初期表示だけで選ばず、文章の中で何を伝えたいかを基準にします。
em：文の中で語調を強め、読み方や意味合いを変えるstrong：重要性、重大性、緊急性を示すmark：現在の文脈で関連する箇所をハイライトするi：別の語調、専門用語、他言語の言葉などを本文から区別する
文字を斜体にしたいだけならCSSのfont-style、太くしたいだけならfont-weightを使います。HTMLタグは意味を表し、CSSは見た目を担当すると考えると整理しやすくなります。
emタグで語調を強める
emタグは、周囲の言葉より強く発音するような「語調の強調」を表します。強調する場所によって、文の意味合いが変わる場面に向いています。
<p>この操作は<em>必ず</em>保存後に行ってください。</p>「必ず」を強く読むことで、保存後に行うという条件を強調しています。多くのブラウザではemが斜体で表示されますが、斜体にするためだけのタグではありません。
emを付ける場所で意味合いが変わる
同じ文でも、どの言葉を強く読むかで伝わり方が変わります。
<p><em>私が</em>このページを更新します。</p>
<p>私が<em>このページを</em>更新します。</p>
<p>私がこのページを<em>更新します</em>。</p>最初は「ほかの人ではなく私」、次は「別のページではなくこのページ」、最後は「確認するだけでなく更新する」という違いが生まれます。このような発話上の強調がemの役割です。
strongタグで重要性を示す
strongタグは、文章中の重要な内容、警告、期限などを表します。多くのブラウザでは初期状態で太字になります。
<p>
<strong>送信後は取り消せません。</strong>
内容を確認してから送信してください。
</p>ここでは、取り消せないという重大な注意をstrongで示しています。単に太字の見た目が必要なだけなら、CSSのfont-weightを使います。
emとstrongの違い
emは語調を強める要素、strongは重要性を示す要素です。「ここを強く読んでほしい」ならem、「ここは見落としてはいけない」ならstrongと考えます。
<em>今すぐ</em>確認してください：確認する時期を強く読む<strong>削除すると元に戻せません</strong>：重要な警告を示す
どちらも文章の意味を表すため、見た目が同じかどうかは判断基準になりません。サイトのデザインで斜体や太字を変更しても、HTMLの意味は残ります。
markタグで関連する箇所を目立たせる
markタグは、現在の文脈で関連性が高い部分をマーカーで塗ったように示します。検索結果の一致語や、引用文の中で読者に注目してほしい箇所などに使います。
<p>「HTML」の検索結果です。</p>
<p><mark>HTML</mark>はWebページの構造を作ります。</p>この例では、検索キーワードと一致したHTMLという文字をmarkで示しています。内容が重要だからではなく、検索した人の現在の目的と関係があるためハイライトしています。
markとstrongの違い
markは文脈上の関連性、strongは内容の重要性を表します。検索結果で一致した普通の単語にはmark、利用者が必ず読むべき警告にはstrongを使います。
markは多くのブラウザで黄色い背景になります。サイトの配色に合わせて変更できますが、背景色と文字色のコントラストを保ってください。
iタグは別の語調や用語を示す
iタグは、本文とは異なる語調・慣用句・専門用語・他言語の言葉などを区別します。多くのブラウザでは斜体ですが、emのような語調の強調を表すわけではありません。
<p>
<i class="term">レスポンシブデザイン</i>とは、
画面幅に合わせて表示を調整する考え方です。
</p>
<p>
ラテン語の<i lang="la">et cetera</i>は「その他」を意味します。
</p>専門用語はtermクラスで目的を補足しています。他言語の言葉にはlang属性を付けると、言語情報もHTMLへ伝えられます。
見た目を斜体にするだけならiではなくCSSのfont-style: italicを使います。作品名にはcite、用語の定義にはdfnなど、より目的に合う要素がないかも確認してください。
CSSで強調の見た目を整える
HTMLで意味を付けた後に、CSSで色・太さ・背景色を調整します。まず、次のHTMLを用意します。
<p>
<em>今すぐ</em>確認してください。
<strong>締め切りは本日です。</strong>
検索語は<mark>HTML</mark>です。
</p>次のCSSで、それぞれの意味に合う見た目へ整えます。
em {
color: #0f766e;
font-style: italic;
}
strong {
color: #991b1b;
font-weight: 700;
}
mark {
padding-inline: 0.2em;
color: #422006;
background: #fef08a;
border-radius: 0.2em;
}
i.term {
font-style: normal;
text-decoration: underline;
text-decoration-color: #fb7185;
text-underline-offset: 0.2em;
}CSSで見た目を変えても、emは語調、strongは重要性、markは関連性というHTMLの役割は変わりません。要素セレクターを使うとサイト全体へ適用されるため、必要に応じてクラスを追加して範囲を限定します。
文字サイズで目立たせる
文章の要点を視覚的に大きく見せたい場合は、HTMLへクラスを付け、CSSのfont-sizeを使います。サイズを変えること自体は、HTML上の重要性を表しません。
<p class="lead-text">
初心者向けのHTML入門講座です。
</p>.lead-text {
font-size: clamp(1.1rem, 2.5vw, 1.5rem);
font-weight: 600;
line-height: 1.7;
}clamp()を使うと、画面幅に合わせて文字サイズを調整しながら、最小値と最大値を設定できます。スマートフォンで大きくなりすぎないか、実際の文章で確認してください。
文字色で強調するときの注意点
CSSのcolorでも文字を目立たせられます。ただし、赤は重要、青は補足という意味を色だけに任せると、違いを判断できない人がいます。
<p class="error-message">
<strong>入力エラー：</strong>
メールアドレスを確認してください。
</p>.error-message {
padding: 12px 16px;
border-inline-start: 4px solid #b91c1c;
color: #7f1d1d;
background: #fef2f2;
}色に加えて「入力エラー」という文字と左側の線を使い、意味を複数の方法で伝えています。文字色と背景色には十分なコントラストを付けてください。
見出しタグを強調目的だけで使わない
h1〜h6は、多くのブラウザで大きく太い文字になります。しかし、見出しタグは文章の章立てを表す要素であり、文字を目立たせるためだけに使うものではありません。
h1：ページ全体の主要な見出しh2：大きな章の見出しh3：h2の中にある小見出し
見出しではないキャッチコピーを大きくしたい場合は、pやspanへクラスを付けてCSSで調整します。見た目ではなく、文書の構造で見出しレベルを選んでください。
強調と検索エンジンの考え方
意味に合うHTMLを使うと、ブラウザや支援技術などが文章の構造を扱いやすくなります。ただし、strongやemを増やすだけで検索順位が上がるとは限りません。
検索エンジン向けにキーワードを大量に囲むのではなく、読者が内容を理解しやすい文章、分かりやすい見出し、適切な内部リンクを優先します。強調タグは、本当に意味がある短い範囲へ使ってください。
強調タグのよくある間違い
- 斜体にするためだけにemを使う：見た目だけならCSSの
font-styleを使います。 - すべてをstrongで囲む：最も重要な箇所が分からなくなるため、短い範囲へ絞ります。
- 黄色い背景のためだけにmarkを使う：関連性を示さない装飾なら
spanとCSSを使います。 - 大きくするためにhタグを使う：見出しではない文章はクラスとCSSで大きくします。
- 色だけで状態を伝える：エラー名、アイコン、線なども組み合わせます。
開始タグと終了タグのつづりも確認します。範囲が意図せず広がる場合は、</em>、</strong>、</mark>が正しい位置にあるか見てください。
まとめ
語調を強めるときはem、重要性を示すときはstrong、文脈上の関連箇所を目立たせるときはmarkを使います。別の語調や専門用語にはiを検討します。
HTMLで意味を付けた後に、CSSで太さ、色、背景色、文字サイズを整えてください。まずは短い文章で4つのタグを使い分け、ブラウザの表示とコードの意味を一緒に確認してみましょう。