HTML のエンティティ名と番号参照の違い - & と & はどう使い分けるか

HTML で特殊文字を表示するには、& のようなエンティティ名と、& のような番号参照の 2 つの書き方があります。どちらも同じ文字を表示できますが、それぞれに特徴と使いどころがあります。

文字参照とは何か

HTML のソースコードには直接書けない文字や、タグと誤認される文字があります。たとえば < をそのまま書くとブラウザはタグの開始と解釈してしまいます。こうした文字を安全に表示するための仕組みが「文字参照」です。

文字参照には 2 種類の記法があります。

エンティティ名（名前参照）

& や < のように、& と ; の間に人間が読みやすい名前を入れる書き方。覚えやすく、ソースコードの可読性が高い。

番号参照（数値参照）

& や < のように、&# と ; の間に Unicode のコードポイント番号を入れる書き方。すべての Unicode 文字を表現できる。

どちらの記法もブラウザ上ではまったく同じ文字として描画されます。違いがあるのはソースコードの書き方だけです。

エンティティ名の書き方

エンティティ名は & で始まり、名前を挟んで ; で終わります。

<p>&amp; は「アンパサンド」と呼びます</p>
<p>&lt; と &gt; は山括弧です</p>
<p>&quot; はダブルクォーテーションです</p>

名前は仕様で定められた文字列を使う必要があり、自分で自由に名前を付けることはできません。HTML で定義されているエンティティ名は約 2,000 種類ありますが、日常的に使うのはごく一部です。

エンティティ名	表示される文字	用途
&	&	アンパサンド
<	<	小なり（タグ開始）
>	>	大なり（タグ終了）
"	"	ダブルクォーテーション
'	'	シングルクォーテーション

これらは HTML の構文と衝突する文字なので、特に使用頻度が高くなります。& はエンティティの開始記号そのものであるため、文字として表示したいときは必ず & と書く必要があります。

番号参照の書き方

番号参照は &# で始まり、Unicode コードポイントの番号を挟んで ; で終わります。10 進数と 16 進数の 2 つの記法があります。

10 進数の番号参照

& のように &# のあとに 10 進数を書きます。アンパサンドの Unicode コードポイントは U+0026 なので、10 進数では 38 になります。

16 進数の番号参照

& のように &#x のあとに 16 進数を書きます。x は 16 進数であることを示す接頭辞です。大文字の X でも動作しますが、小文字が一般的です。

<!-- 10進数 -->
<p>&#38; は「アンパサンド」です</p>

<!-- 16進数 -->
<p>&#x26; は「アンパサンド」です</p>

<!-- どちらも同じ & が表示される -->

番号参照の大きな利点は、Unicode に収録されているすべての文字を表現できることです。エンティティ名が定義されていない文字でも、コードポイントさえわかれば表示できます。

<!-- エンティティ名がない文字も表示できる -->
<p>&#9834; は音符記号です</p>
<p>&#x2603; は雪だるまです</p>
<p>&#128073; は右向き指差しです</p>

実際の表示を確認する

エンティティ名と番号参照で同じ文字が表示されることを確認してみましょう。

HTML

CSS

JavaScript

<table id="ref-table">
    <tr>
        <th>記法</th>
        <th>ソース</th>
        <th>表示</th>
    </tr>
</table>

table {
    border-collapse: collapse;
    font-size: 14px;
}
th, td {
    border: 1px solid #ccc;
    padding: 6px 12px;
    text-align: left;
}
th {
    background: #f0f0f0;
}
.source {
    font-family: monospace;
    color: #c7254e;
    background: #f9f2f4;
    padding: 1px 4px;
    border-radius: 3px;
}

const data = [
    ['エンティティ名', '&amp;amp;', '&'],
    ['10進数', '&amp;#38;', '&'],
    ['16進数', '&amp;#x26;', '&'],
    ['エンティティ名', '&amp;lt;', '<'],
    ['10進数', '&amp;#60;', '<'],
    ['16進数', '&amp;#x3C;', '<'],
    ['エンティティ名', '&amp;hearts;', '♥'],
    ['10進数', '&amp;#9829;', '♥'],
    ['16進数', '&amp;#x2665;', '♥']
];
const table = document.getElementById('ref-table');
data.forEach(row => {
    const tr = document.createElement('tr');
    tr.innerHTML = '<td>' + row[0] + '</td><td class="source">' + row[1] + '</td><td>' + row[2] + '</td>';
    table.appendChild(tr);
})

このように、どの記法で書いてもブラウザ上で表示される文字は同じです。

どちらを使うべきか

基本的にはエンティティ名を使い、名前がない文字には番号参照を使うのが実用的な方針です。

可読性を重視するならエンティティ名

& と書けば「アンパサンド」だとすぐにわかりますが、& だとコードポイント表を確認しなければ何の文字かわかりません。チームで開発するときはソースの読みやすさが重要になります。

網羅性を重視するなら番号参照

エンティティ名は HTML 仕様で定義された文字にしか使えません。絵文字や記号など、名前が定義されていない文字には番号参照を使う必要があります。

XML との互換性に注意

XML では &、<、>、"、' の 5 つしかエンティティ名が定義されていません。XHTML や SVG を扱うときは、この 5 つ以外は番号参照で書くほうが安全です。

よくある間違い

文字参照を書くときに起きやすいミスがいくつかあります。

最も多いのはセミコロンの書き忘れです。&amp と書いてしまうと、ブラウザによっては正しく解釈される場合もありますが、仕様上はセミコロンを省略すべきではありません。

& の末尾の ; を省略すると、後続の文字列と結合して意図しないエンティティとして解釈される危険がある。

<!-- 悪い例：セミコロンなし -->
<p>&amp Copyright 2024</p>

<!-- 良い例：セミコロンあり -->
<p>&amp; Copyright 2024</p>

<!-- 悪い例：# を忘れている -->
<p>&38;</p>

<!-- 良い例 -->
<p>&#38;</p>

番号参照で &# の # を忘れると、ブラウザはエンティティ名として解釈しようとして失敗します。10 進数か 16 進数かに関わらず、番号参照には必ず # が必要です。

UTF-8 時代の文字参照

現在のほとんどの Web ページは UTF-8 でエンコードされており、日本語や絵文字をソースコードに直接書けます。そのため、文字参照を使う場面は以前より減っています。

それでも &、<、>、" の 4 つは HTML の構文と衝突するため、今後も文字参照で書く必要があります。これらを正しく使い分けることが、壊れにくい HTML を書くための基本になります。

HTML のエンティティ名と番号参照の違い - &amp; と &#38; はどう使い分けるか