2026年4月16日
HTML 特殊文字とは？エスケープが必要な理由
HTMLでは <・>・& などの記号がタグや特別な意味として解釈されます。これらをそのままテキストとして表示したいときは、文字参照（もじさんしょう）と呼ばれる特別な書き方を使います。
この変換を エスケープ といいます。
よく使う文字参照一覧
| 表示したい文字 | 文字参照 | 意味 |
|---|---|---|
& | & | アンパサンド |
< | < | 小なり記号 |
> | > | 大なり記号 |
" | " | ダブルクォート |
| （スペース） | | 改行されないスペース |
© | © | 著作権マーク |
💡 HTMLリンクの作り方で基礎を確認できます。
使い方の例
<!-- HTMLタグをテキストとして表示したいとき -->
<p>見出しは <h1> タグで書きます。</p>
<!-- 著作権表示 -->
<footer>© 2026 私のサイト</footer>
<!-- 改行されないスペース -->
<p>田中 太郎</p>🔗 あわせてHTMLコメントの書き方もチェックしてみましょう。
なぜエスケープが必要なの？
たとえば、<h1> というテキストをそのまま書くと、ブラウザはそれをHTMLタグとして解釈してしまいます。
<!-- NG：ブラウザがタグとして解釈してしまう -->
<p>見出しは <h1> タグで書きます。</p>
<!-- OK：文字参照を使う -->
<p>見出しは <h1> タグで書きます。</p>📖 詳しくはHTMLタグ一覧【よく使う20選】で解説しています。
特に重要なのは最初の3つ（lt、gt、amp）です。HTMLのコード例を本文中に表示したいとき、必ず使います。
文字参照が必要な具体的な場面
場面1：HTMLのコードを説明するとき
ブログやドキュメントでHTMLのタグを説明するとき、「<h1>」とそのまま書くとブラウザがタグとして解釈してしまいます。「<h1>」と書けば、画面に「<h1>」という文字が表示されます。
場面2：数式や比較を書くとき
「x < 10」のような数式を書くとき、「<」をそのまま書くとタグの始まりと誤解されることがあります。「x < 10」と書くのが安全です。
場面3：著作権表示
ページのフッターに「© 2026 サイト名」と表示したいとき、「©」を使います。
場面4：改行されないスペース
通常のスペースは、ブラウザが自動で改行位置を決めるときに区切りとして使われます。「 」を使うと、その位置では改行されません。「100 円」と書けば、「100」と「円」が別の行に分かれることを防げます。
HTMLの基本をもっと詳しく知りたい人は「HTMLとは？初心者向けにわかりやすく解説」を読んでみてください。タグの書き方やページの構造を学べます。
数値文字参照
文字参照のほかに「数値文字参照」という書き方もあります。「&#数値;」の形式で、文字のコード番号を直接指定します。
たとえば「♥」と書くと♥（ハート）が表示されます。「😀」と書くと😀（笑顔の絵文字）が表示されます。
数値文字参照は、名前がついていない特殊文字や絵文字を表示したいときに使います。ただし、最近のブラウザはUTF-8に対応しているので、日本語や絵文字はそのまま書いても表示されます。数値文字参照を使う場面は限られています。
文字参照でよくあるミス
ミス1：セミコロンを忘れる
文字参照は必ずセミコロン（;）で終わります。「<」のようにセミコロンがないと、正しく表示されないことがあります。
ミス2：アンパサンドをエスケープし忘れる
URLの中に「&」が含まれることがあります。HTMLの中にURLを書くとき、「&」を「&」に変換し忘れると、ブラウザが文字参照の始まりだと誤解することがあります。
ミス3：不要な場面で使う
通常の日本語テキストや英語テキストには文字参照は不要です。「<」「>」「&」「"」の4文字だけ注意すれば、ほとんどの場合は問題ありません。
実際にHTMLファイルを作って文字参照を試してみましょう。「HTMLで最初のページを作ろう」の手順でファイルを作り、本文中に「<h1>」と書いてブラウザで確認してみてください。
まとめ
- ✅
&・<・>はHTMLで特別な意味を持つ - ✅ テキストとして表示するには文字参照（
&・<・>）を使う - ✅
は改行されないスペース - ✅
©で著作権マーク（©）を表示できる
文字参照を覚えると、HTMLの中で特殊な文字を正しく表示できます。レッスンでさらに詳しく学んでみましょう。