文章の一部を太字にしたい、目立たせたい——そんなとき何となく strong や b を使っていませんか。HTML には文章中の言葉に「意味」を付けるインライン要素がいくつもあり、見た目が似ていても役割はそれぞれ違います。この記事では strong・em・mark・b・i・small・abbr・kbd といった代表的なテキストレベル要素の意味と使い分けを、初心者にも分かるように解説します。
目次
テキストレベルの要素とは
段落（p）や見出し（h2）が「文章のかたまり」を表すのに対し、ここで扱うのは文章の中の 一部の語句に意味を付ける要素です。改行を伴わず、文の流れの中にそのまま収まるため「インライン要素」とも呼ばれます。
重要なのは、これらが単なる見た目の装飾ではなく「その言葉がどういう性質か」を伝える点です。たとえば太字に見える strong は「重要である」という意味を持ちます。意味に合った要素を選ぶと、画面読み上げソフトが声色を変えて読んだり、検索エンジンが内容を理解しやすくなったりと、見た目以上の効果があります。まずは実際の表示を見てみましょう。
<p>セールは<strong>本日23時59分まで</strong>です。</p>
<p>この関数は<em>非同期</em>で実行されます。</p>
<p>検索結果：明日の天気は<mark>晴れ</mark>でしょう。</p>
<p>当社は<abbr title="HyperText Markup Language">HTML</abbr>の教材を提供しています。</p>
<p>保存するには<kbd>Ctrl</kbd> + <kbd>S</kbd>を押します。</p>
<p>価格：5,000円<small>（税込・送料別）</small></p>
strong と em｜重要性と強調
もっともよく使うのが strong と em です。どちらも内容を「強める」要素ですが、強め方の種類が違います。
strong は「内容の重要性・深刻さ」を表します。警告や締め切り、見落としてほしくない注意書きなど、その部分が周囲より重要であることを示すときに使います。多くのブラウザでは太字で表示されます。
em（emphasis）は「文の中での強調」を表します。話し言葉でいう、声の調子を変えて読む部分です。同じ文でもどこを em にするかで、伝わるニュアンスが変わります。多くのブラウザでは斜体で表示されます。
<!-- 重要性：見落としてほしくない情報 -->
<p><strong>期限を過ぎると登録は無効になります。</strong></p>
<!-- 強調：読むときの調子が変わる部分 -->
<p>それは<em>あなた</em>の問題ではありません。</p>画面読み上げソフトは、em や strong を声のトーンを変えて読み上げることがあります。単に太字や斜体にしたいだけで意味的な重要性がない場合は、後述の b や i、あるいは CSS を使うのが適切です。
b・i と strong・em の違い
見た目だけ見ると、b は太字、i は斜体で、strong・em とそっくりです。違いは「意味を持つかどうか」にあります。b と i は、特別な重要性や強調の意味を持たせずに、慣習的に見た目を変えたいときに使う要素です。
b（bold）は、重要だからではなく「実用上そこだけ目立たせたい」語句に使います。記事のリード文中のキーワードや、製品名などが例です。i（italic）は、声の強調ではなく「種類が違う語」を表すのに使います。専門用語、外国語、学名、心の中の声などが典型です。
| 要素 | 意味 | 主な見た目 |
|---|---|---|
strong | 内容が重要・深刻である | 太字 |
b | 意味は変えず、慣習的に目立たせる | 太字 |
em | 文中で強調して読む部分 | 斜体 |
i | 専門用語・外国語など種類の違う語 | 斜体 |
迷ったときは「読み上げソフトがトーンを変えて読むべきか」を基準にすると選びやすくなります。変えるべきなら strong・em、見た目だけ整えたいなら b・i、と覚えておきましょう。
mark｜ハイライトで関連箇所を示す
mark は、文章の中で「いま注目してほしい箇所」を蛍光ペンのようにハイライトする要素です。多くのブラウザでは黄色い背景で表示されます。代表的な使い道は、検索結果ページで検索キーワードに一致した部分を強調するケースです。
<!-- 「HTML」で検索した結果の一節 -->
<p><mark>HTML</mark>はウェブページの骨組みを作る言語です。</p>strong が「もともと重要な部分」を示すのに対し、mark は「読み手の今の関心ごとに照らして注目に値する部分」を示します。文章そのものの重要度とは別に、外から見て関連がある箇所を浮き上がらせる、という違いです。
small・abbr・kbd など覚えておきたい要素
使用頻度はやや下がりますが、知っておくと便利な要素もあります。それぞれ役割がはっきりしているので、場面に合えば積極的に使えます。
| 要素 | 意味・用途 |
|---|---|
small | 注釈・免責事項・著作権表示などの「細かい但し書き」 |
abbr | 略語。title 属性に正式名称を入れる |
kbd | キーボード入力。Ctrl + S のようなショートカット |
code | プログラムのコードや関数名などのソースコード片 |
cite | 作品名（書籍・映画・記事など）のタイトル |
abbr は title 属性に正式名称を書いておくと、その語にマウスを重ねたときに正式名称がツールチップで表示されます。略語が初めて出てくる箇所で使うと親切です。
<!-- 略語に正式名称を添える -->
<p><abbr title="Cascading Style Sheets">CSS</abbr>で見た目を整えます。</p>
<!-- キー操作を示す -->
<p>コピーは<kbd>Ctrl</kbd> + <kbd>C</kbd>です。</p>
<!-- 細かい但し書き -->
<p>月額1,000円<small>（税込・初月無料）</small></p>small は「文字を小さくする」ための装飾ではなく、あくまで「細かい但し書きである」という意味の要素です。結果として小さく表示されますが、単にサイズを変えたいだけなら CSS の font-size を使います。
見た目を変えたいだけのときは CSS を使う
ここまで見てきたように、これらの要素はすべて「意味」を持っています。意味がないのに見た目のためだけにタグを選ぶと、文書の構造がちぐはぐになります。たとえば「太字にしたいから strong」「斜体にしたいから em」と機械的に選ぶのは避けたいところです。
純粋に見た目だけを整えたい場合は、span にクラスを付けて CSS でスタイルを当てるのが正攻法です。意味は持たせず、装飾だけを行えます。
<!-- 意味は持たせず、見た目だけ変える -->
<p>価格は<span class="price">3,000円</span>です。</p>.price {
color: #d6336c;
font-weight: bold;
}「その語句が文章の中でどういう性質を持つか」で要素を選び、「どう見せるか」は CSS に任せる。この役割分担を意識すると、意味の通った読みやすい HTML になります。
まとめ
テキストレベルの要素は、見た目が似ていても意味で使い分けます。要点を振り返ります。
strongは重要性、emは文中の強調を表す- 意味を持たせず見た目だけ整えたい太字・斜体は
b・iを使う markは読み手の関心に照らして注目すべき箇所をハイライトするsmallは但し書き、abbrは略語、kbdはキー入力を示す- 純粋な装飾だけが目的なら
span＋ CSS を使う
「読み上げソフトや検索エンジンにどう伝わるか」を意識して要素を選ぶと、見た目を超えて伝わる HTML になります。まずは strong と em の違いから押さえていきましょう。