HTMLエンティティエンコード・デコード

文字参照でHTML記号を文字として扱う

HTMLエンコード・デコードは、テキストに含まれる記号とHTMLの文字参照を相互に変換する処理です。たとえば < はタグの開始に使われるため、コード例としてそのままHTMLに置くと、文字ではなくマークアップとして解釈されることがあります。エンコードすると < のような表記になり、HTMLソースや説明文の中で記号を文字として示しやすくなります。

「HTMLエンティティ」と呼ばれることもある文字参照には、< のような名前付き参照、< のような10進数参照、< のような16進数参照があります。どれもHTML上で特定の文字を表す書き方です。このツールはエンコードまたはデコードのモードを選び、入力を変えると結果を自動表示します。

この変換で出力されるもの

エンコードでは、主にアンパサンド、山括弧などHTMLテキストの解釈に関わる記号を文字参照へ変換します。日本語や絵文字をすべて数値参照に置き換える設定はありません。入力に応じた通常の変換結果を確認し、出力欄からコピーしてください。

これは文字列の表記変換です。HTML文書を検査して危険な要素を取り除くサニタイザーでも、暗号化でもありません。WHATWGのHTML仕様は文字参照を含むHTMLの解析規則を定めています。文字参照の具体的な表記を確認したい場合は、HTML Standard と MDNの文字参照解説を参照できます。

モードを選び、変換結果をコピーする

1. 目的に合わせてモードを選択：通常の文字やタグ記法を文字として表示したい場合はエンコード、< などの参照表記を文字に戻したい場合はデコードを選びます。

2. 入力して結果を確認：テキストを入力欄へ貼り付けます。入力の変更に合わせて結果が更新されます。サンプル表示、貼り付け、入力の消去も利用できます。

3. 出力をコピー：読み取り専用の結果欄で、意図した記号や文字になっているか確認してからコピーします。必要ならモードを切り替え、変換方向を変えて確認してください。

変換を見比べる例

次のHTML断片をエンコードすると、タグ記号が文字参照になります。

<p>A & B</p>
→
&lt;p&gt;A &amp; B&lt;/p&gt;

反対に、<strong>重要</strong> をデコードすると、タグを含む文字列ではなく、HTMLとして解釈したときのテキスト 重要 が結果になります。タグ構造を保ったまま変換する作業とは異なるため、用途に合うか短い入力で確かめてください。

コード例を説明文に載せる

HTMLの教材や作業メモで <div> のような記法を紹介するとき、エンコード結果を使えば、タグとして解釈されず文字列として示すための表記を確認できます。貼り付け先のエディターが追加で変換する場合もあるので、公開前に表示を見直します。

文字参照を含む文章を読みやすくする

CMSの書き出しやテキストログに &、© のような表記が含まれているとき、デコードして元の記号や文字を確認できます。変換結果を原データへそのまま上書きせず、保存先が期待する形式も確認しましょう。

文字参照の表記を学ぶ

HTMLを学び始めた人は、© のような名前付き表記や、© のような数値表記を入力して結果を観察できます。入力前の表記と変換後の文字を並べると、ソース上の記述と画面に現れる文字の関係をつかみやすくなります。

変換前後で迷いやすい点

貼り付け先に合わせて結果を確認

文字参照への変換だけで、入力内容が安全なHTMLになるわけではありません。特にユーザー入力をウェブページへ出す場合は、出力位置に合ったエンコード、入力検証、必要に応じたサニタイズを行ってください。

• 二重変換に注意：すでに参照化された文字列を再度エンコードすると、アンパサンドも変換され、意図より多くの & が現れることがあります。
• タグや空白の保持を期待しない：デコードはHTMLとしての読み取りを伴うため、タグや改行などの構造を元のソースどおりに保つ処理ではありません。
• 変換結果を実行しない：デコードした文字列にタグやスクリプト記法が含まれていても、そのままウェブページへ挿入したり実行したりしないでください。