HTMLエスケープとは：< や &amp; に置き換える5つの文字

HTMLの中に < をそのまま書くと、そこからタグが始まったと解釈されます。文字として表示したいときは置き換えが必要です。

対象になる5つの文字

文字	置き換え後	なぜ必要か
&	&	実体参照の開始とみなされる
<	&lt;	タグの開始とみなされる
>	&gt;	タグの終了とみなされる
"	&quot;	属性値の区切りとみなされる
'	&#39;	同上（シングルクォート）

本文中では & < > の3つで足りますが、属性値の中に入れる場合は引用符も置き換えが必要になります。

実際に変換すると

エスケープ後の文字列をHTMLに書くと、画面には元の文字列がそのまま表示されます。タグとしては解釈されません。

& を最初に置き換える

実体参照と数値文字参照

置き換え先の書き方には2通りあります。

種類	書き方	例（あ）
名前付き実体参照	&名前;	（「あ」には名前がない）
数値文字参照（10進）	&#番号;	あ
数値文字参照（16進）	&#x番号;	あ

名前付きは <   © など、決まった文字にだけ用意されています。数値文字参照はどの文字にも使えます。

日本語をすべて数値文字参照にすれば、文字コードに関係なく表示できます。ただし文字数が大幅に増えるため、UTF-8 が標準になった現在では使う場面が減っています。

どこで使うか

• ユーザーが入力した文字列を画面に表示するとき
• HTMLのソースコードを記事の中で見せるとき
• データベースから取り出した値をページに埋め込むとき

とくに1つ目は重要です。入力された文字列をそのままHTMLに埋め込むと、<script> のようなタグが動いてしまうことがあります。エスケープは、この種の問題を防ぐ基本的な処理として使われます。

戻すとき

< のような文字列を元の記号に戻すのがアンエスケープです。ログやメールに含まれるHTMLの断片を読むときに使います。

戻すときは逆に、& を最後に処理します。先に戻すと、生まれた & が別の実体参照の一部として再解釈されるためです。

まとめ

• HTMLで意味を持つ記号は、実体参照に置き換えて文字として表示する
• 対象は & < > " ' の5つ
• エスケープでは & を最初に、アンエスケープでは最後に処理する
• 数値文字参照はどの文字にも使えるが、文字数は増える