SS-Infra ← ポータルに戻る

実体参照

1. 実体参照の概要と目的

実体参照(文字実体参照:Character Entity Reference)は、HTMLなどのマークアップにおいて、そのまま書くと別の意味に解釈されてしまう文字や、直接入力しにくい文字を、& で始まり ; で終わる決められた名前に置き換えて記述する仕組みです。

Webページを作成していると、「< や > を文字として表示したいのにタグとして解釈されてしまう」「& を含むURLがうまく動かない」といった問題に遭遇することがあります。実体参照を利用すると、こうした文字をマークアップの構文と区別して、意図したとおりに表示できます。

この章では、実体参照がどのようなものなのか、また、なぜ知っておく必要があるのかを確認します。

実体参照とは?

実体参照とは、特定の文字をあらかじめ決められた名前で表現する記述方法です。& (アンパサンド)で始まり、文字の名前、; (セミコロン)で終わる形式で記述します。

例えば、次のような記述を考えてみます。

<p>a<b のときに処理を中断します</p>

この場合、<b がタグの開始として解釈されてしまい、以降の文章が意図しない形で表示されてしまいます。

しかし、次のように実体参照を用いると、< が文字そのものとして扱われます。

<p>a&lt;b のときに処理を中断します</p>

これにより、ブラウザの画面には「a<b のときに処理を中断します」と正しく表示されます。

なお、< の直後が英字以外(5 < 10 のように空白や数字が続く場合)は、ブラウザが文字として扱って結果的に正しく表示されることもあります。ただし、これは仕様上正しい記述ではなく、後から文章を編集した際に突然壊れる原因にもなるため、文字として表示したい < は常にエスケープするのが確実です。

このように、マークアップの構文として特別な意味を持つ文字を、文字そのものとして安全に表示できる点が実体参照の大きな特徴です。

なお、HTMLの仕様上は、実体参照は「文字参照(Character Reference)」という大きな枠組みの一部にあたります。文字参照には、名前で指定する実体参照(名前付き文字参照)と、文字コードの番号で指定する数値文字参照の2種類があります。

実体参照はどのような場面で登場するのか?

実体参照は、主にHTMLのコーディングや、CMSでのコンテンツ入稿、プログラムからHTMLを出力する処理などで利用されます。

例えば、次のような場面が代表的な利用例です。

Web開発者やマークアップエンジニアにとって、実体参照は表示崩れやセキュリティ事故を防ぐための基礎的な知識です。

2. 実体参照の仕組み・規格・主な特徴

実体参照は、HTMLやXMLのパーサー(解析処理)が、& から ; までの文字列を1つの文字に置き換えて解釈する仕組みです。

HTMLの構文上、< はタグの開始、& は文字参照の開始として扱われます。そのため、これらを文字そのものとして表示したい場合は、構文と区別できる形で記述する必要があります。

ここでは、実体参照の種類や、実際の記述例を確認します。

名前付き文字参照と数値文字参照の違い

文字参照には、主に次の2種類があります。

HTMLでは2,000種類以上の名前が定義されており、記号や各国語の文字、数学記号などを名前で記述できます。

一方、XMLで標準的に定義されている実体参照は &amp; &lt; &gt; &quot; &apos; の5つのみです。そのため、XMLやXMLベースの形式を扱う場合は、&nbsp; などHTML固有の名前が使えない点に注意が必要です。

また、&apos;(シングルクォート)はHTML4では定義されておらず、HTML5以降で使用できるようになった名前です。古い環境との互換性が求められる場合は、数値文字参照の &#39; を使うほうが確実です。

必ずエスケープすべき文字

すべての記号を実体参照にする必要はありません。文字コードがUTF-8であれば、© や → はそのまま書いても正しく表示されます。

一方で、構文上の意味を持つ次の文字は、文字として表示したい場合に必ずエスケープする必要があります。

厳密には、仕様上 & のエスケープが必須となるのは、後続の文字列が文字参照と紛らわしくなる場合(曖昧なアンパサンド)に限られます。ただし、どの文字列が該当するかを都度判断するのは現実的ではないため、実務では & は常にエスケープすると決めておくほうが安全です。

HTMLでの記述例

HTML文書内では、次のように記述します。

【記述・構造の具体例】

HTML内で実体参照を使用して、構文上の意味を持つ文字を表示する例です。

<!-- タグを文字として表示する -->
<p>段落は &lt;p&gt; タグで記述します。</p>

<!-- URLのクエリ文字列を正しく記述する -->
<a href="/search?q=html&amp;page=2">検索結果の2ページ目</a>

<!-- 属性値の中でダブルクォートを表示する -->
<img src="sample.png" alt="&quot;引用符&quot;を含む説明文">

<!-- 記号を名前で記述する -->
<p>&copy; 2026 Example Inc.</p>

このように、構文と紛らわしい文字を実体参照に置き換えることで、意図したとおりの表示と正しい文書構造を両立できます。

ただし、<script> や <style> の内部では実体参照は解釈されません。これらの要素の中では &lt; と書いても < にはならず、文字列としてそのまま扱われます。JavaScriptのコード内で特殊文字を扱う場合は、実体参照ではなくJavaScript側のエスケープ(\u003C など)を使用します。

3. 実体参照が使われる理由・メリットと活用シーン

実体参照が利用される大きな理由は、マークアップの構文と、表示したい文字そのものを明確に区別できることです。

特に、ユーザーが入力した文字列を扱う場面や、ソースコードを掲載する場面で欠かせません。

実体参照を使うメリット

構文上の意味を持つ文字をそのまま記述した場合、次のような問題が発生することがあります。

実体参照を適切に使用することで、こうした表示崩れや構造の破綻を防ぎ、文書の正しさを保てます。

さらに、ユーザーの入力値を出力する際にエスケープを行うことは、クロスサイトスクリプティング(XSS)への基本的な対策としても機能します。

ただし、実体参照はあくまで「HTMLとして解釈させない」ための仕組みです。すべての文字を実体参照に置き換えればよいというものではなく、必要な文脈で必要な文字に対して行うことが重要です。

特殊文字の表示やエスケープで活用する

実際のWeb制作やドキュメント作成では、以下のような場面で活用されます。

このように、文書の正しさと安全性を保つための基本的な手段として役立ちます。

関連技術・関連用語との違い

実体参照と混同されやすい関連用語として、次のようなものがあります。

実体参照がHTMLのパーサーに対して「これは構文ではなく文字である」と伝えるための仕組みであるのに対し、URLエンコードやバックスラッシュによるエスケープは、それぞれ別の処理系に向けた記法です。

同じ「エスケープ」という言葉で呼ばれますが、どの処理系に向けた変換なのかを区別して扱う必要があります。

4. 実体参照の導入・運用時の注意点と課題

実体参照は文書の正しさを保つうえで便利な仕組みですが、使い方を誤ると、かえって表示崩れや脆弱性の原因になります。

また、変換処理を重ねて適用してしまうミスも起こりやすいため、実務上は注意が必要です。

ここでは、注意すべきポイントを説明します。

よくあるミス・設定ミス

よくある問題の一つが、すでにエスケープ済みの文字列に対して、もう一度エスケープ処理を適用してしまう「二重エスケープ」です。

<!-- 悪い例:エスケープ済みの文字列を再度エスケープしてしまう -->
<p>&amp;lt;p&amp;gt;</p>

この記述は、画面上に <p> ではなく &lt;p&gt; という文字列が表示されてしまいます。CMSやテンプレートエンジンの自動エスケープ機能と、アプリケーション側の手動エスケープが重複した場合に発生しやすいミスです。

また、セミコロンを省略して &amp &copy のように記述してしまうケースもあります。互換性の都合で解釈される場合もありますが、仕様に沿った書き方ではないため、必ずセミコロンまで記述してください。

逆に、& をエスケープし忘れた結果、意図せず実体参照として解釈されてしまうこともあります。

データ処理やセキュリティ上の注意点

& をエスケープしないまま記述すると、後続の文字列が文字参照と解釈され、表示やリンク先が変わってしまう場合があります。

【よくある失敗・注意点の例】

本文中の & をエスケープせず、意図しない文字に変換されてしまう例です。

<!-- 誤り:& をエスケープしていない -->
<p>対象は A&copy B です。</p>
<!-- → 画面には「対象は A© B です。」と表示される -->

<!-- 正しい:& を &amp; にエスケープする -->
<p>対象は A&amp;copy B です。</p>

この例では、&copy がセミコロンなしでも著作権マークとして解釈されるため、意図しない表示になります。

なお、セミコロンのない名前が解釈されるかどうかは文脈によって変わります。属性値の中では、直後に = や英数字が続く場合に限って文字参照として解釈されない、という例外規則が設けられています(href="?a=1&copy=2" などが壊れないようにするための配慮です)。逆に言えば、属性値の中でも直後が空白や記号であれば解釈されてしまいます。こうした条件を都度判断するのは現実的ではないため、& は常にエスケープすると考えたほうが安全です。

セキュリティの観点では、エスケープは出力先の文脈ごとに適切な方法を選ぶ必要がある点に注意してください。HTML本文向けのエスケープを行っただけでは、属性値やJavaScript内、URL内に値を埋め込む場面での問題を防ぎきれない場合があります。

そのため、エスケープ処理を自前で実装するのではなく、利用しているフレームワークやテンプレートエンジンが提供する、文脈に応じた機能を使うことが推奨されます。

安全に利用するための対策

実体参照を適切に運用するためには、以下の対策が有効です。

特に、エスケープ処理が複数の層で行われている場合は、どこで変換されているのかを把握しておくことが、表示崩れを防ぐうえで重要です。

5. まとめと関連ツールのご案内

ここまで解説した実体参照について、重要なポイントを振り返ります。

【お役立ちツールのご案内】

ここまで解説したHTMLの文字や構造の扱いを踏まえ、当サイトでは、HTMLコードの構造解析やエスケープが推奨される文字の確認に役立つ HTML構造解析・エスケープ監査ツール を提供しています。

HTMLコード内の構造やエスケープが推奨される文字を確認する際に、ぜひご活用ください。