HTMLエンティティとは｜< > &など特殊文字の実体参照をやさしく解説
HTMLエンティティ（実体参照）は、HTMLの記号として意味を持つ「<」や「&」などを、文字としてそのまま表示するための書き方です。本記事では、なぜ実体参照が必要なのか、名前付き参照と数値文字参照の違い、よく使うエンティティ一覧、属性値中のクォートの扱い、文字化けやXSSとの関係までをやさしく解説します。
HTMLを書いていて「<」や「&」のような、アンパサンドで始まりセミコロンで終わる記号の並びを見たことはないでしょうか。これがHTMLエンティティ（実体参照）です。一見すると面倒な書き換えに見えますが、これはHTMLという言語が記号を正しく解釈し、意図どおりに文字を表示するために欠かせない仕組みです。本記事では、HTMLエンティティとは何か、なぜ必要なのか、どんな種類があるのかを順を追って解説します。
HTMLエンティティとは何か
HTMLエンティティ（HTML entity、実体参照とも呼ばれます）とは、HTMLの文法上で特別な意味を持つ記号や、キーボードから直接入力しにくい文字を、安全に表記するための書き方です。「&」（アンパサンド）で始まり「;」（セミコロン）で終わるという共通の形を持ち、たとえば不等号の「<」は「<」、アンパサンド自体は「&」と書きます。
HTMLエンティティが必要になる最大の理由は、一部の記号がHTMLのタグや構文そのものに使われている点にあります。たとえば「<」はタグの開始を意味するため、文章中にそのまま書くとブラウザがタグの始まりだと誤解してしまいます。そこで、文字としての「<」を表示したいときには実体参照に置き換える必要があるのです。
実際にどんな文字列に変換されるのかは、HTMLエンティティ変換ツールに記号を入力して確かめてみるのが分かりやすいでしょう。変換前と変換後を見比べることで、どの文字がどのエンティティに対応するかを体感できます。
なぜ実体参照が必要なのか
HTMLでは、いくつかの記号が「文章の中身」ではなく「マークアップの命令」として扱われます。具体的には次の文字が代表的です。
- <（小なり）：タグの開始を示すため、そのままだとタグの一部と解釈されます。
- >（大なり）：タグの終了を示します。
- &（アンパサンド）：実体参照そのものの開始記号です。
- "（ダブルクォート）・'（シングルクォート）：属性値を囲む記号として使われます。
たとえば「2 < 3 は正しい」と画面に表示したい場合、HTMLにそのまま「2 < 3」と書くと、ブラウザは「< 3」以降を未完成のタグだと解釈し、表示が崩れたり一部が消えたりします。そこで「2 < 3」と書くことで、ブラウザはこれを記号の「<」として正しく描画します。
このように、実体参照は「マークアップとして解釈されるべき記号」と「文字として表示したい記号」を区別するための仕組みです。プログラムのコードやコマンドを記事中に掲載する場面では特に重要で、エスケープを怠るとレイアウト崩れや表示抜けの原因になります。文章を安全にHTMLへ埋め込みたいときは、HTMLエンティティ変換ツールでまとめて変換しておくと確実です。
名前付き参照と数値文字参照
HTMLエンティティには大きく分けて2つの書き方があります。名前付き文字参照と数値文字参照です。どちらも同じ文字を表せますが、表記の仕方が異なります。
| 種類 | 書き方 | 例（<の場合） |
|---|---|---|
| 名前付き文字参照 | & + 名前 + ; | < |
| 数値文字参照（10進） | &# + 数字 + ; | < |
| 数値文字参照（16進） | &#x + 16進数 + ; | < |
名前付き文字参照は、「lt」「gt」「amp」のように人間が読んで意味の分かる名前を使う方式です。覚えやすく可読性が高い反面、利用できる名前はHTMLの仕様であらかじめ定義されたものに限られます。代表的なものは数百種類あり、よく使う記号はほぼ網羅されています。
数値文字参照は、文字に割り当てられた番号（Unicodeのコードポイント）を直接指定する方式です。10進数なら「<」、16進数なら「<」のように書きます。名前が用意されていない記号や、絵文字のような特殊な文字も番号さえ分かれば表記できるのが強みです。たとえば著作権記号は名前付きの「©」でも、数値の「©」でも同じ「©」になります。
どちらを使うべきか迷う場合、よく使う記号は読みやすい名前付き、名前がない文字は数値、と覚えておくと実用上は十分です。
よく使うエンティティ一覧
実務で頻繁に登場するHTMLエンティティをまとめました。まずはこの基本のセットを押さえておけば、ほとんどの場面に対応できます。
| 表示される文字 | 名前付き参照 | 数値参照 | 意味・用途 |
|---|---|---|---|
| < | < | < | 小なり。タグの開始記号 |
| > | > | > | 大なり。タグの終了記号 |
| & | & | & | アンパサンド。実体参照の開始 |
| " | " | " | ダブルクォート。属性値の囲み |
| ' | ' | ' | シングルクォート。属性値の囲み |
| （空白） | |   | 改行されない空白（ノーブレークスペース） |
| © | © | © | 著作権記号 |
| ® | ® | ® | 登録商標記号 |
このうち特に重要なのは、最初の3つ（< / > / &）です。この3記号はHTMLの構文に直接関わるため、文章中に文字として登場する場合は必ずエスケープが必要です。 は通常の空白と違って自動で改行されないため、「10 kg」のように数値と単位をくっつけて表示したいときに便利です。これらの変換を手作業で行うのは手間がかかるため、HTMLエンティティ変換ツールを使うと正確かつ素早く処理できます。
属性値中のクォートの扱い
実体参照が特に重要になるのが、タグの属性値の中です。属性値は通常ダブルクォート（"）かシングルクォート（'）で囲みますが、囲みに使っている記号と同じクォートを値の中に含めたいときに問題が起きます。
たとえば、title属性に「彼は"こんにちは"と言った」という文字列を入れたいとします。ダブルクォートで囲んだまま値の中にもダブルクォートを書くと、ブラウザは最初の内側のクォートで属性が終わったと解釈し、その先が壊れてしまいます。そこで、値の中のダブルクォートを"に置き換えれば、属性の囲みと値の中身を正しく区別できます。
title="彼は"こんにちは"と言った"
同様に、シングルクォートで囲んだ属性値の中にアポストロフィを含めたい場合は'（または'）を使います。属性値の中では特に「&」と、囲みに使っているクォートの2種類を確実にエスケープしておくことが、表示崩れを防ぐ基本となります。フォームの初期値やリンクのテキストを動的に組み立てる場面では、このエスケープ漏れが思わぬバグにつながりやすいため注意が必要です。
文字化け・XSSとの関係
HTMLエンティティは、見た目の問題だけでなく文字化けやセキュリティとも深く関わっています。
1. 文字化けとの関係
数値文字参照を使えば、ページの文字コードに関係なく、Unicodeで定義された文字を確実に表示できます。古い環境や文字コードの設定が不確実な環境でも、番号で指定された文字は意図どおりに描画されやすく、文字化け対策の一つになります。ただし、現代のWebは基本的にUTF-8で統一するのが最善であり、エンティティは補助的な手段と考えるのが実務的です。なお、すでに文字化けしてしまったテキストの修復は実体参照とは別の問題で、専用のツールでの対処が必要になります。
2. XSS（クロスサイトスクリプティング）との関係
ユーザーが入力した文字列をそのままHTMLに埋め込むと、悪意のある人が「<script>」などのタグを紛れ込ませ、不正なスクリプトを実行させるXSSという攻撃が成立してしまうことがあります。これを防ぐ基本対策が、埋め込む前に < > & " ' といった記号を実体参照へエスケープすることです。エスケープしておけば、入力された「<script>」は実行されるタグではなく、画面上にそのまま「<script>」という文字として表示されるだけになります。
このように、実体参照は表示の正確さとセキュリティの両面で土台となる技術です。逆に、エンティティ化された文字列を元の記号に戻したい場面もあり、その際はHTMLエンティティ変換ツールでデコードできます。また、HTMLで書かれた文章を見出しやリストごとMarkdownに整理し直したいときは、HTMLからMarkdown変換ツールを使うと、エンティティを含むHTMLを読みやすい形式へ手早く変換できます。記事や仕様書をプレーンな形で残したいときに役立ちます。
まずはHTMLからMarkdown変換ツールやHTMLエンティティ変換ツールで実際に文字を入れ替えてみて、どの記号がどう変わるのかを目で確かめてみてください。仕組みを手で触れることが、理解への近道です。
なお本記事は一般的な情報の提供を目的としたものです。HTMLの仕様やセキュリティ対策の最適解は環境や要件によって変わります。最新の公式仕様やドキュメント、必要に応じて専門家の情報も確認したうえで判断してください。
よくある質問
HTMLエンティティ（実体参照）とは何ですか？
HTMLエンティティとは、HTMLの文法上で特別な意味を持つ記号や入力しにくい文字を安全に表記するための書き方です。「&」で始まり「;」で終わる形を持ち、たとえば不等号の「<」は「<」、アンパサンドは「&」と書きます。記号をマークアップではなく文字として表示したいときに使います。
なぜ「<」や「&」をそのまま書けないのですか？
「<」はタグの開始、「&」は実体参照の開始という、HTMLの構文上の特別な意味を持つためです。そのまま書くとブラウザがタグや参照の一部と誤解し、表示が崩れたり一部が消えたりします。文字として見せたいときは「<」「&」のように実体参照へエスケープする必要があります。
名前付き参照と数値文字参照はどちらを使うべきですか？
名前付き参照は「<」「&」のように読んで意味が分かり覚えやすい反面、仕様で定義された名前しか使えません。数値文字参照は文字番号で指定するため、名前がない記号や絵文字も表せます。よく使う記号は名前付き、名前がない文字は数値、と使い分けると実用上は十分です。
属性値の中でクォートはどう書けばよいですか？
属性を囲んでいるクォートと同じ記号を値の中に入れたいときにエスケープが必要です。ダブルクォートで囲んでいる場合は値の中のダブルクォートを「"」に、シングルクォートで囲んでいる場合はアポストロフィを「'」に置き換えます。あわせて値の中の「&」も必ずエスケープしておくと安全です。
HTMLエンティティ変換ツールで入力した文字はサーバーに送信されますか？
WAZA TOOLSのHTMLエンティティ変換ツールやHTMLからMarkdown変換ツールはすべてブラウザ内で処理され、入力した内容がサーバーに送信・保存されることはありません。スマートフォンでも利用でき、何度でも無料でエンコード・デコードや変換ができます。