HTML MEMO

HTMLのエスケープ（実体参照）

HTMLソース内で特別な意味を持つ文字（< や > など）を、
ブラウザが誤解せずに正しく文字として表示させるための記述方法です。
HTMLでは <tag> のように文字を解釈するため、本文中に「<」と書くとタグの開始と勘違いされ、
表示が崩れたりセキュリティ上の問題（XSS）が発生したりします。

文字	エスケープ文字	説明
<	<	タグの開始（Less Than）と区別するため
>	>	タグの終了（Greater Than）と区別するため
&	&	エスケープ自体の開始（Ampersand）と区別するため
"	"	属性値の囲い（Quotation）と区別するため
'	'	属性値の囲い（Apostrophe）と区別するため

その他のエスケープ対策の文字について

文字	エスケープ文字	説明
半角スペース( )		改行を防ぐスペース
著作権マーク(©)	©
円記号(¥)	¥
バックスラッシュ(\)	\	バックスラッシュには 'lt; のような名前付きの参照はありません。

[記述のルール]

必ず &（アンパサンド）で始まり、;（セミコロン）で終わります。
大文字・小文字は区別されます。

[数値文字参照]

HTMLのエスケープ（文字参照）には、名前で指定する文字実体参照のほかに、
Unicodeのコードポイント数値を直接使う数値文字参照（10進数・16進数）があります。
(例)
「<（小なり記号）」を表示する場合の書き方

種類	書式	例	補足
10進数参照	&#数値;	<(<)	全ての文字（Unicode）を指定可能
16進数参照	&#x数値;	<(<)	xを付ける。文字コード表の値をそのまま使いやすい。

[10進数と16進数の主な違い]

「x」の有無

16進数の場合は、数字の前に小文字の x（hexadecimalの略）を入れます。

10進数

&# + 数字 + ;

16進数

&#x + 数字 + ;

使える文字

16進数では 0-9 に加えて A-F（または a-f）のアルファベットを使用します。

用途

一般的な文字コード表（Unicode表など）は16進数で記載されていることが多いため、
特殊な記号や絵文字（例：✅ は ✅）を調べる際は16進数の方がコピー＆ペーストしやすく便利です。

使い分けの目安

基本の5文字（< > & " '）
覚えやすい「文字実体参照（< など）」が推奨されます。
特殊な記号・絵文字: 文字コード表から探す場合は「16進数」がスムーズです。
確実性: 文字実体参照は一部の古いブラウザやXML環境で定義されていない名前があるため、
あらゆる環境で確実に表示させたい場合は
「数値文字参照（10進数・16進数）」がより堅実です。