2024年2月9日金曜日

HTML の必須特殊文字一覧：見逃せない 6 つのエッセンシャルな文字

もう迷わない！HTML でエスケープが必要な文字は 6 つのみ。

<>&"' 

① や 🄫 は Shift-JIS の環境依存文字ですが、現代主流の UTF-8 ではエスケープは不要。

文字 文字実体参照 数値文字参照
10進 16進
< &lt; &#60; &#x3e;
> &gt; &#62; &#x3e;
& &amp; &#38; &#x26;
" &quot; &#34; &#x22;
' &apos; &#39; &#x27;
  &nbsp; &#32; &#x20;

公式の HTML Living Standard に ' は含まれていないが、通常エスケープする。

エスケープする理由

  • < と >

    HTML タグで使用。

  • " と '

    HTMLの属性の値を囲むために使用。

  • &

    HTML エンティティが & ではじまり ; で終わるため。(例 &ldquo;)

  •  (&nbsp;)

    公式にエスケープすると記載がある。

< と > 以外はブラウザが好意的に解釈して問題にならないことも多いですが、セキュリティ対策やプログラム処理など、表示以外でのトラブル防止の意味もありエスケープは必要。

&nbsp; は、改行を伴わない半角スペース。HTML において連続するスペースの代わりに使われることもある。また、WYSIWYG 利用で意図せず大量に挿入されることも多い。

他に &thinsp;(半角より細い)や &emsp;(ほぼ全角幅) などがある。

エスケープ文字の読み方

表示 読み
< 小なり
> 大なり
& アンパサンド、アンド
" ダブルクォーテーション、二重引用符
' シングルクォーテーション、一重引用符
  改行を伴わないスペース

シングルクォーテーションはアポストロフィとしても使われる。

プラットフォームの独自仕様には少し注意！

CMS などのプラットフォームによっては、記事本文やタイトルは自動判別され、エスケープ不要の場合もあります。

たとえば、Google Blogger の場合、タイトルの中に "" を入れても&quot;&quot; にエスケープしても同じです。エスケープすると一部ウィジットへの不具合も確認しているので、むしろそのまま書きたいところではあります。

blogger