HTML エンティティ

HTML で特殊文字を表現するための文字参照。& で始まり ; で終わる記法。

HTML エンティティとは、HTML 文書内で特殊文字を安全に表現するための文字参照です。HTML の構文で特別な意味を持つ文字 (<>& など) をそのまま記述するとブラウザがタグや構文として解釈してしまうため、エンティティを使って「文字としての表示」を明示します。代表的なものに &amp; (&)、&lt; (<)、&gt; (>)、&quot; (")、&apos; (') があります。

HTML エンティティには名前参照と数値参照の 2 種類があります。名前参照は &amp; のように人間が読みやすい形式で、HTML 仕様で定義された約 2,200 個の名前付きエンティティが利用できます。数値参照は 10 進数 (&#38;) または 16 進数 (&#x26;) で Unicode コードポイントを直接指定する形式で、名前が定義されていない文字でも表現できます。HTML/CSS 入門の書籍で基礎から学べます。

Web セキュリティの観点では、HTML エンティティへの変換 (エスケープ) は XSS (クロスサイトスクリプティング) 対策の基本です。ユーザー入力を HTML に出力する際、<>&"' の 5 文字を必ずエンティティに変換しなければなりません。この処理を怠ると、悪意のあるスクリプトが注入されるリスクがあります。多くの Web フレームワークはテンプレートエンジンで自動エスケープ機能を提供していますが、innerHTMLdangerouslySetInnerHTML を使う場面では開発者が明示的にエスケープする必要があります。

実務でよく使われるエンティティには、ノーブレークスペース (&nbsp;)、著作権記号 (&copy;)、商標記号 (&trade;)、矢印 (&rarr;)、数学記号 (&times;&divide;) などがあります。特に &nbsp; は連続するスペースを表示したい場合や、テーブルの空セルに内容を持たせたい場合に頻繁に使用されます。

よくある誤解として、「UTF-8 を使っていればエンティティは不要」というものがあります。確かに UTF-8 であれば日本語や絵文字をそのまま記述できますが、HTML の構文文字 (<>&) のエスケープは文字エンコーディングに関係なく必須です。また、HTML 属性値内のダブルクォート (") も &quot; に変換する必要があります。Web フロントエンドの書籍も参考になります。

文字数カウントの観点では、HTML エンティティはソースコード上の文字数とブラウザ表示上の文字数に乖離を生じさせます。&amp; はソースコードでは 5 文字ですが、ブラウザでは 1 文字の「&」として表示されます。&nbsp; は 6 文字が 1 文字のスペースになります。HTML ソースの文字数を数える場合と、レンダリング後のテキストの文字数を数える場合では結果が大きく異なるため、文字数カウントツールがどちらを対象としているかを意識することが重要です。