HTMLのエンコードとデコード
このツールは、テキストをHTML文字参照にエンコードし、元に戻すデコードを、すべてブラウザ内で行います。&や<のような名前付きエンティティが一般的なエスケープに対応し、AやAのような数値形式はあらゆるUnicode文字をカバーします。厳格デコードモードは、未知のエンティティをそのまま通す代わりに報告します。
HTMLのエンコードとデコードとは
HTMLでは2つの文字に構造的な役割があります：&は文字参照の開始で、<はタグの開始です。これらの文字がテキストとして現れる場合はエスケープが必要で、その仕組みが文字参照です。&のような短く曖昧でない表記で、パーサーはすべて元の文字に復元します。
標準で定められた名前付き参照リストは有限で閉じており、2,200以上の表記があります。そのうち5つがほとんどの作業を担います：&、<、>、"、'です。リストにないものは、数値参照でコードポイントを直接記述します：AとAはどちらも文字Aで、同じ手法でUnicodeのすべての文字に対応できます。
下のパネルは両方向に対応しています：一方のトグルでテキストをエンティティにエンコードし、もう一方でデコードします。スイッチで名前付きまたは数値の出力、厳格または寛容なデコードを選択できます。このサイトのすべてのツールと同様に、これはタブ内で完全に動作します。
ユーザーデータを運ぶリンクを構築する際に、この2つのエスケープ文法は出会います。そして、URLエンコーダとデコーダがパーセントエンコードの部分を処理します。
エンティティエスケープは文字とバイトのエンコードの家族の一員です。サイトのエンコードツール一覧がBase64からバイナリまで、残りを集めています。
ほとんどの作業を担う5つの名前付きエンティティ
どの文字をエスケープするかは文脈に依存します。テキストでは2つが必須です：リテラルの&は&と書く必要があります。なぜなら、&の後に文字とセミコロンが続くと参照の始まりだからです。また、リテラルの<は<と書く必要があります。さもなければタグを開始してしまうからです。残りの3つは文脈によるものですが、5つすべてを無条件にエスケープしても何も損はありません。
| エンティティ | 出力 | 必要な場合 |
|---|---|---|
| & | & | テキストでは常に必須――標準で要求されるエスケープ |
| < | < | テキストで、タグを開始する前 |
| > | > | テキストではほとんど必要ありません――習慣的にエスケープ |
| " | " | 二重引用符で囲まれた属性値内 |
| ' | ' | 一重引用符で囲まれた属性値内 |
名前付きと数値：一つの文字の二つの表記
数値参照はコードポイントそのものを記述します：AはAの10進数、Aは同じ文字の16進数です――HTML5ではセミコロンが必須で、xと16進数の大文字・小文字は区別されません。数値が直接コードポイントを指しているため、数値形式はUnicodeが定義するすべての文字、絵文字も含めてカバーします。
トレードオフはソースの可読性です：éは人間に何が描画されるか示しますが、éは示しません。ここでの名前付きモードは通常のポリシーに従います：一般的な文字には名前を付け（ 、—、éはé）、あまり使われないものには数値を付けます。どちらの表記もデコード後は同じ文字になるため、区別はなくなります。
デコードモードと、厳格モードが報告する内容
方向トグルでパイプラインを切り替えます：エスケープされたマークアップを貼り付け、プレーンな文字を取得します。3つの表記すべて――名前付き、10進数、16進数――がデコードされ、名前付きルックアップでは大文字・小文字を区別しません。実際のマークアップは自己一貫していないためです。
未知のエンティティは誠実に処理されます。変換器は&npsp;―― の典型的なタイプミス――を認識せず、デフォルトではそのままにします。なぜなら、テキストに legitimately なアンパサンドが含まれる可能性があるからです。厳格モードは完全にエスケープされていると主張されるマークアップ向けに存在します：そこでは未知のエンティティはバグであり、厳格デコードはタイプミスが生き残るのではなく、出力の上でそれぞれを報告します。
エスケープは装飾ではなく、セキュリティ境界です
この変換がタイポグラフィを超えて重要な理由は、インジェクションです。エスケープされずにページに表示されるユーザー提供のテキストはテキストとして表示されません：リテラルの<script>は実行され、エスケープされていない引用符は属性値から脱出します。エスケープはこれらのバイトを無力な文字に変えます――<script>は読み取り可能なテキストとして描画され、他には何も行いません。
これはURLエスケープとは別の仕事です：パーセントエンコーディングには独自の予約セットと文法があり、2つは交換可能ではありません――なぜなら別々のツールがあるからです。
よくある質問
エンコーダは私のテキストをサーバーに送信しますか？
いいえ。両方向とも、ページと一緒に読み込まれたJavaScriptが実行する文字列変換です。何も送信されません。サイトのContent-Security-Policyはconnect-src 'self'を設定しているため、ブラウザ自体が送信要求を拒否します。いずれにしても確認できます：DevToolsのネットワークパネルは沈黙を保ち、ツールはオフラインでも動作し続けます。
HTMLでは実際にどの文字をエスケープする必要がありますか？
テキストコンテンツでは2つが必須です：&を&に、<を<にします。テキストの>は許容されますが習慣的にエスケープされ、引用符は同じ引用符で区切られた属性値内でのみ意味を持ちます。このツールは5つすべてを無条件にエスケープするため、出力はどこでも安全です。
名前付きエンティティと数値エンティティの違いは何ですか？
名前付きエンティティは標準の閉じたリストからのラベルです――&、©、é。数値参照はコードポイントを直接記述し、10進数はA、16進数はAです。両方とも同一の文字にデコードされます。数値はすべてのUnicodeコードポイントをカバーし、名前付きの方が読みやすいです。違いはソースを読む人間のためだけのものです。
厳格デコードモードは何を検出しますか？
未知の名前と不可能な数値です。厳格デコードは&npsp;―― の典型的なタイプミス――や、有効な文字コードではない値を持つ数値参照を報告します。寛容モードは未知のエンティティをそのままにします。
エンティティはSEOやスクリーンリーダーに影響しますか？
いいえ。エンティティはHTMLパース中にデコードされ、検索インデックスやスクリーンリーダーがそれに気づく前です。DOMはいずれにしてもリテラルの文字を保持するため、éとéは同一にランク付けされ、同一にアナウンスされます。ページを消費する機械ではなく、ソースを読む人間のために表記を選択してください。
なぜ私のアポストロフィが'になりますか？
HTML5が'を定義しているからです――何年もXMLのみのものでした。それが古い参照がそれを危険と呼ぶ理由です。また、一重引用符で囲まれた属性内のアポストロフこそが、それをエスケープする必要がある場所です。HTML5以前のコンシューマー向けには、'という形式がすべてのパーサーが常に受け入れてきた形式です。