HTMLにおいて「特殊文字」は、そのまま記述するとHTMLの構文として解釈されてしまったり、環境によって正しく表示されなかったりする文字を指します。これらを安全かつ確実に表示するために「実体参照(エンティティ参照)」という記述方法を使用します。
実体参照には、主に以下の2種類があります。
文字実体参照(名前実体参照): 文字の名前を使った形式。
&名前;
のように記述します。覚えやすく、一般的に推奨されます。数値文字参照: 文字のUnicodeコードポイント(数値)を使った形式。
&#数値;
または進数;
のように記述します。文字実体参照がない文字や、より確実に表示させたい場合に使われます。
以下に、比較的よく使用する特殊文字の実体参照を解説します。
1. HTML構文と衝突する文字(特に重要!)
これらの文字は、HTMLのタグや実体参照の開始・終了を示す記号なので、テキストとして表示したい場合は必ず実体参照を使います。
<
(小なり記号 / Less-than sign)意味: HTMLタグの開始を示します。
実体参照:
<
または<
使用例:
<p>これは <p> タグです。</p>
表示: これは
<p>
タグです。
>
(大なり記号 / Greater-than sign)意味: HTMLタグの終了を示します。
実体参照:
>
または>
使用例:
<p>これは <p> タグです。</p>
表示: これは
<p>
タグです。
&
(アンパサンド / Ampersand)意味: 実体参照の開始を示します。
実体参照:
&
または&
使用例:
<p>「A & B」と表示したい。</p>
表示: 「A & B」と表示したい。
注意: URLのクエリパラメータ(例:
?param1=value1¶m2=value2
)をHTML内で表示する場合も&
に置き換えるのが正しい記述です。
"
(二重引用符 / Double quotation mark)意味: HTML属性値の開始・終了を示します。
実体参照:
"
または"
使用例:
<p>彼女は「こんにちは」と言いました。</p>
表示: 彼女は"こんにちは"と言いました。
注意: 属性値で引用符を使う場合は、属性値を別の引用符(シングルクォーテーション)で囲むか、実体参照を使います。
良い例:
<p title='She said "Hello"'>タイトル</p>
良い例:
<p title="She said 'Hello'">タイトル</p>
'
(アポストロフィ / Single quotation mark)意味: HTML属性値の開始・終了を示す場合があります。
実体参照:
'
または'
使用例:
<p>It's a beautiful day.</p>
表示: It's a beautiful day.
注意:
'
はHTML5から正式にサポートされました。古い環境を考慮する場合は数値文字参照'
がより確実です。
2. 空白文字
HTMLでは連続する半角スペースは一つにまとめられたり、改行が無視されたりします。これを制御するために使用します。
意味: 通常の半角スペースですが、途中で改行されず、複数の連続したスペースもそのまま表示されます。
実体参照:
または 
使用例:
<p>文章の途中に スペースを入れる。</p>
表示: 文章の途中に スペースを入れる。
注意: レイアウト目的で
を多用するのは推奨されません。CSSのmargin
やpadding
、white-space
プロパティを使うべきです。
3. 一般的によく使う記号
キーボードから直接入力しにくい記号や、表示環境による文字化けを防ぎたい場合に使用します。
©
(著作権記号 / Copyright sign)実体参照:
©
または©
使用例:
<p>© 2025 Your Company</p>
表示: © 2025 Your Company
®
(登録商標記号 / Registered sign)実体参照:
®
または®
使用例:
<p>商品名®</p>
表示: 商品名®
™
(商標記号 / Trademark sign)実体参照:
™
または™
使用例:
<p>商品名™</p>
表示: 商品名™
—
(エムダッシュ / Em dash)意味: 文章中の区切りや付加的な情報を挿入する際に使われる、比較的長いダッシュ。
実体参照:
—
または—
使用例:
<p>彼女は懸命に努力した—そして成功した。</p>
表示: 彼女は懸命に努力した—そして成功した。
–
(エヌダッシュ / En dash)意味: 範囲(例: 日付や数字)を示す際に使われる、エムダッシュより短いダッシュ。
実体参照:
–
または–
使用例:
<p>2020–2025年</p>
表示: 2020–2025年
…
(三点リーダー / Horizontal ellipsis)実体参照:
…
または…
使用例:
<p>続きはウェブで…</p>
表示: 続きはウェブで…
実体参照を使用する際のヒント
可読性: 文字実体参照(
<
など)は、数値文字参照(<
など)よりも直感的で分かりやすいため、可能な限り文字実体参照の使用が推奨されます。UTF-8エンコーディング: 現代のウェブサイトでは、ほとんどの場合、文字エンコーディングにUTF-8が使用されています。UTF-8は非常に多くの文字を直接表現できるため、昔ほど多くの特殊文字を実体参照にする必要はなくなりました(例えば、©や®などは直接入力してもほとんどの環境で正しく表示されます)。しかし、**HTML構文と衝突する5つの文字(
<
,>
,&
,"
,'
)**は、文字化けや構文エラーを防ぐために常に実体参照を使用するべきです。アクセシビリティと意味: 実体参照は、その文字が持つ意味を伝える上でも役立ちます。例えば、視覚的にスペースに見えても、それが「改行してはいけないスペース」であることを
が示します。
これらの特殊文字と実体参照の知識は、正確で堅牢なHTML文書を作成するために非常に重要です。