HTML Entity Encoder/Decoder

This tool allows you to convert text with special characters to HTML entities and vice versa. HTML entities help display special characters correctly on web pages.

Mode

Text to Encode

Characters like <, >, &, " and ' will be converted to HTML entities

Encoded HTML

Common HTML Entities

Less than sign

Greater than sign

Ampersand

Double quotation mark

Single quotation mark

Registered trademark

HTML エンティティエンコーダー/デコーダーの使い方

1
テキストを入力する
変換したいテキストや HTML スニペットを入力ボックスに貼り付けます。
2
エンコードかデコードを選ぶ
「Encode」をクリックして特殊文字を HTML エンティティに変換するか、「Decode」でエンティティを文字に戻します。
3
結果を取得する
変換された出力が結果パネルに即座に表示されます。

4
出力をコピーする
「Copy Result」を使い、エンコードまたはデコードしたテキストをプロジェクト向けに取得します。

HTML エンティティ実践ガイド

HTML エンティティとは何か

HTML エンティティ、より正式には文字参照とは、HTML における1つの文字を代わりに表す短いコードです。すべてのエンティティはアンパサンド（&）で始まり、セミコロン（;）で終わります。エンティティを使うと、ブラウザが本来マークアップと誤って解釈してしまう文字、入力しにくい文字、キーボードにない文字を、ソースファイルを純粋な ASCII に保ったまま含められます。

エンティティが重要なのは2つの異なる理由からです。1つ目は、いくつかの文字は HTML 自体によって予約されており、正しく表示するにはエスケープしなければならないこと。2つ目は、記号、アクセント付き文字、通貨記号、矢印、絵文字といった広大な世界を、ファイルの文字エンコーディングにかかわらず参照として確実に書けることです。このツールは文字をエンティティにエンコードし、エンティティを、それが表す文字へとデコードします。

名前付き参照と数値参照

エンティティの書き方は2通りあり、生成されるものに関しては互換です。名前付き参照は、著作権記号の ©、アンパサンドの &、ノーブレークスペースの   のような、人間が読めるラベルを使います。HTML はこれらの名前の固定リストを定義しているので、割り当てられた名前を持つ文字だけがこの方法で書けます。

数値参照は、名前の代わりにその文字の Unicode コードポイントを使い、あらゆる文字を表現できます。10進形式は、アンパサンド、ハッシュ、10進数のコードポイント、セミコロンです。たとえば © です。16進形式はハッシュの後に x を加え、コードポイントを16進数で与えます。たとえば © です。©、©、© の3つはすべて同一の © 記号を描画します。10進数の169は16進数の A9 と等しく、それが著作権のコードポイントだからです。

常にエスケープが必要な5文字

ほとんどの文字はエンコードしてもしなくてもよいのですが、ごく一部のグループは HTML ソースで実質的に必須です。アンパサンド &（&）は、すべてのエンティティを開始するためエスケープしなければなりません。単語の隣に生のまま置くと、ブラウザがそこにないエンティティを解析しようとすることがあります。小なり記号 <（<）と大なり記号 >（>）は、タグを区切るのでテキスト内でエスケープしなければなりません。属性値の内部では、二重引用符 "（"）とアポストロフィ '（'）が、属性を早く閉じてしまわないようにエスケープが必要です。

それ以外はすべて便宜上のものです。é は UTF-8 ファイルに直接書いても、é や é と書いてもかまいません。どれも正しいです。予約された5文字は違います。これらを誤ると壊れたマークアップになり、信頼できない入力があればクロスサイトスクリプティングの穴になります。だからこそ、間違った場所で決してエスケープせずに残してはならない文字なのです。

実例：記号とアクセント

名前付きか数値かの選択

名前付きエンティティは可読性で勝ります。© や — は、その文字が何であるかを将来の読み手に正確に伝えるので、数値コードの羅列よりもソースが保守しやすくなります。トレードオフはカバー範囲です。割り当てられた名前を持つ文字だけが名前で書け、そのリストは大きいとはいえ、すべてを含んでいるわけではありません。

数値参照は普遍性と正確性で勝ります。Unicode コードポイントを直接指すので、名前のないものや絵文字を含め、存在するあらゆる文字をエンコードできます。曖昧さもないので、ありふれない記号について確信を持ちたいときに便利です。よくある慣行は、おなじみのひとにぎり（©、&、 、—）には名前付きエンティティを使い、変わったものには数値参照を使うことです。

絵文字と基本範囲を超える文字

絵文字や多くの記号は Unicode 範囲の高い位置、つまり1つの旧式コード単位が保持できる値を超えたところにありますが、数値参照は単にコードポイントを指すだけなのでこれらをきれいに扱えます。にっこり笑った顔の絵文字はコードポイント U+1F600 を持つので、10進参照の 😀 または16進参照の 😀 として書け、どちらも同じグリフを生み出します。

実際には、ファイルを UTF-8 として保存して絵文字を直接貼り付けるほうが通常は簡単で、しかも同じくらい正しいです。数値参照が価値を持つのは、パイプラインが生のバイトを保持すると信頼できないとき、すなわちメールテンプレート、ASCII に平坦化するシステム、正確なコードポイントを曖昧さなく記録したい文脈です。いずれにせよ、表示される文字はそのコードポイントによって完全に決まります。

文字化けしたエンティティテキストのデコード

現実によくある作業は、目に見えるエンティティコードで埋め尽くされたテキストを整えることです。ウェブページやデータベースのエクスポートから段落をコピーすると、ふつうの句読点の代わりに &、'、"、’ があちこちに散らばっています。これは、テキストが上流のどこかで HTML エンコードされ、表示のためにデコードされなかったことを意味します。それをここのデコードモードに貼り付けると、それらの参照が本物の &、'、"、丸まったアポストロフィの文字に戻ります。

二重エンコードに注意してください。テキストが2回エスケープされ、&amp; や &#39; のような並びが見える状況です。ここではリテラルの文字 &amp; が & になり、それから & になるべきなので、修正はエンティティが残らなくなるまで複数回デコードすることです。1回のデコードでも出力に & が残るなら、結果をもう一度デコードに通して2層目を取り除いてください。

よくある落とし穴

最も頻繁な間違いはセミコロンの欠落です。エンティティは終端されているときだけ有効なので、セミコロンのない &copy は著作権記号として描画されないことがあります。関連する誤りは、手作業でエスケープするときにアンパサンドを最初ではなく最後にエンコードしてしまうことで、これはほかのエンティティを &lt; のようなリテラルのテキストに変えてしまいます。

また、エンティティはそれ自体が HTML の概念であって、セキュリティの境界ではないことを覚えておきましょう。信頼できない入力をエンティティにエンコードすることは、壊れたマークアップや XSS を防ぐ一部ですが、正しい文脈で、出力時に行わなければならず、万能薬として頼ってはいけません。最後に、ふつうのコンテンツの中で必要のない文字をエンコードしないこと。過剰なエンコードはソースを読みにくくし、ファイルがすでに UTF-8 なら何の利点もありません。

よくある質問

HTML エンティティとは何で、なぜ使うのですか?

HTML エンティティは、HTML 内の予約文字を表すコードです。たとえば < は <、> は > で表します。これを使うと、ブラウザにマークアップとして解釈させずに、これらの文字をテキストとして表示できます。

エンコーダーはどの文字を変換しますか?

小なり記号 (<)、大なり記号 (>)、アンパサンド (&) など、HTML の予約文字・特殊文字を、ページ上で安全に表示できる名前付きエンティティに変換します。

エンティティを通常の文字に戻せますか?

はい。「Decode」モードに切り替えて & や < などのエンティティを含むテキストを貼り付けると、ツールが元の読める文字を返します。

壊れた HTML や XSS の防止に役立ちますか?

ユーザーが入力したテキストをエンティティにエンコードすると、特殊文字が HTML 構造を壊すのを防げます。信頼できない内容を安全にページ上へ表示する際の一般的な手順です。

テキストはサーバーに送信されますか?

いいえ。エンコードとデコードはすべてブラウザ内で行われるため、テキストはデバイス上に留まります。ツールは登録不要で無料です。