HTML エンティティ エンコーダー＆デコーダー

なぜ HTML をエスケープするのか？

HTML では 5 つの文字が特別な意味を持ちます。& はエンティティの開始、< と > はタグの区切り、" と ' は属性値の終わりです。これらを含むユーザー入力をエスケープせずにページへ挿入すると、レイアウトが崩れたり、最悪の場合スクリプトが注入されたり（クロスサイトスクリプティング、XSS）します。エスケープするとこれらは &、<、>、"、' になり、ブラウザはテキストとして表示します。

名前付き・10 進・16 進エンティティ

すべての Unicode 文字は数値参照で書けます。€ なら 10 進数の € または 16 進数の € です。よく使う文字の多くには、€、©、  のような読みやすい名前もあります。数値参照は、名前付きエンティティを 5 つしか定義していない XML を含め、どこでも使えます。名前付きエンティティはソースコード上で読みやすいのが利点です。

非 ASCII 文字もエンコードが必要？

ページが UTF-8 で配信されていれば不要です。現代のほぼすべてのサイトがそうです（<meta charset="utf-8">）。é、ü、日本 のような文字はそのまま書けます。エンコードが役立つのは、レガシーシステムやメールテンプレート、処理の途中で非 ASCII テキストが壊れる場合です。

エスケープは文脈ごとに異なる

HTML エンティティのエスケープが守るのは、要素の内容や引用符で囲んだ属性値に置くテキストです。<script> ブロック内の値、インラインのイベントハンドラー、CSS、URL にはそれぞれ専用のエンコードが必要で、これだけでは不十分です。手作業で文字列を組み立てるより、フレームワークの自動エスケープ（React、Vue、Jinja、Blade）を使いましょう。