「&」や「<」って、HTMLで書くときにうまく表示されなくて困ったことありませんか？
ちゃんと書いたのに、タグとまちがわれたり、文字が消えてしまったりすることってあるんですよね。
今回は、そんなときに使える「HTMLの特殊文字」とそのエスケープ方法について、やさしくわかりやすく解説します。
これを読めば、タグが壊れたり、記号が正しく表示されないトラブルを防げるようになり、誰でも安心してHTMLを書けるようになりますので、ぜひ最後まで読んでみてください。
HTMLの特殊文字とは？基本の理解と使い方
特殊文字が必要になる理由とは
HTMLでは一部の文字をそのまま書くと、意図しない動作になってしまうことがあります。
これを避けるために「特殊文字（エンティティ）」を使う必要があります。
- &（アンパサンド）はHTMLで文字参照を始める記号なので、そのまま使えない
- <（小なり記号）はタグの開始と誤認される
- >（大なり記号）もタグの閉じとして処理される
- “（ダブルクオーテーション）は属性値の区切りとされる
- ‘（シングルクオーテーション）も同様に扱われる
これらの文字を正しく表示させるために、HTMLでは「エスケープ」という処理が必要です。
たとえば、「<」は「<」の代わりに使います。
このように、表示したい文字に対して別の書き方を使うのが特殊文字の使い方です。
特殊文字と文字参照（エンティティ）の違い
「特殊文字」と「文字参照（エンティティ）」という言葉は似ていますが、実は少し意味が違います。
特殊文字とは、HTML内で直接入力できない記号のことを指し、それを正しく表示するために使う仕組みが「文字参照」です。
- 特殊文字は、HTMLに直接書くと誤作動や文字化けを起こす記号
- 文字参照は、そういった記号を代わりに書くための表現
- 「<」や「&」などがその代表例
- 「©」のように数字で書く数値文字参照もある
- 「©」のように名前で書く名前付き文字参照もある
このように、特殊文字は「何を表示したいか」で、文字参照は「どうやって表示するか」の違いがあります。
正しく使い分けることがとても大切です。
HTMLで使われる主なエスケープ方法
HTMLで使うエスケープ方法には、いくつかの種類がありますが、ここでは主な方法を紹介します。
&：アンパサンド「&」の代わり<：小なり記号「<」の代わり>：大なり記号「>」の代わり"：ダブルクオーテーション「”」の代わり'：シングルクオーテーション「’」の代わり
これらのエスケープは、HTMLの中で正しく文字を表示するために欠かせない基本的な知識です。
特にタグの記述や属性の中では注意して使いましょう。
特殊文字を使わないとどうなるか
HTMLで特殊文字を正しく使わないと、見た目が崩れたり、うまく表示されないことがあります。
たとえば「
」と書きたいのに、「<」をそのまま使うとブラウザがタグと勘違いします。
- 見た目が崩れる
- 意図しない動作が起きる
- セキュリティ上のリスクになることもある
- 文字化けして読めなくなる
- 検索エンジンにも誤解される可能性がある
このように、特殊文字を正しく扱わないとユーザーにとっても開発者にとってもトラブルのもとになります。
きちんとエスケープ処理をしましょう。
HTML5での特殊文字の扱い
HTML5では特殊文字や文字参照の扱いがより柔軟になっていますが、それでもルールを守る必要があります。
HTML5では多くの名前付き文字参照が標準でサポートされています。
- HTML5は名前付きエンティティの数が多い
- 古いブラウザでも互換性のある書き方が重要
- 数値文字参照は文字コードを直接指定できる
- XML互換を意識するとより安全
- W3Cの仕様に基づいた使い方が推奨されている
HTML5ではエスケープがやりやすくなっていますが、どのブラウザでも正しく表示されるように注意して使うことが大切です。
よく使うHTML特殊文字一覧と意味
記号・記述に関する特殊文字
HTMLでよく使う記号には、プログラムや文章の構造に関係する大事な文字があります。
これらは普通に入力するとタグや命令と間違えられるため、特殊文字としてエスケープする必要があります。
以下は代表的な記号とそのエンティティの一覧です。
&→ &（アンパサンド）<→ <（小なり記号）>→ >（大なり記号）"→ “（ダブルクオーテーション）'→ ‘（シングルクオーテーション）
これらの記号は、HTMLの中で非常によく登場します。
間違った書き方をするとページのレイアウトが崩れたり、文字が消えたりすることがありますので注意しましょう。
数式・演算子関連の特殊文字
HTMLでは数学記号や計算記号を表示したい場面もあります。
そのときには、正しく表示されるように特殊文字を使うことが大切です。
以下に代表的な数学や演算子の特殊文字を紹介します。
+→ +（プラス）−→ –（マイナス）×→ ×（かける）÷→ ÷（わる）≠→ ≠（等しくない）≤→ ≤（以下）≥→ ≥（以上）
こうした記号は、学校のテストの説明や計算式の表示など、実はいろんな場面で使われています。
だからこそ、正しく表示できるようにしておきましょう。
スペース・改行・制御文字
HTMLでは、見た目を整えるためにスペースや改行を使いたいことがあります。
でもそのままではうまく反映されないことがあるので、専用の特殊文字を使うことで正しく表示できます。
→ 区切り可能なハイフン
特に は、複数の空白を入れたいときによく使われます。
HTMLは普通のスペースを連続して書いても1つにまとめられてしまうため、正確に表示したいときにはこれらを使います。
英語圏以外のアルファベット文字
外国語の文章を書くときには、英語にない文字が出てくることがあります。
そのような文字もHTMLでちゃんと表示させるには、文字参照を使うのが安全です。
á→ á（アクセント付きa）è→ è（下向きアクセントのe）ü→ ü（ウムラウトのu）ñ→ ñ（チルダ付きn）ç→ ç（セディーユ付きc）
これらの文字は、スペイン語やフランス語、ドイツ語などでよく使われます。
正しく表示させるためには、HTMLエンティティを活用しましょう。
矢印・図形などの装飾用特殊文字
文章をわかりやすくしたり、見た目をよくしたりするために、矢印や図形などの特殊文字もよく使われます。
装飾目的で使うときは、HTMLエンティティを使うと便利です。
→→ →（右向き矢印）←→ ←（左向き矢印）↑→ ↑（上向き矢印）↓→ ↓（下向き矢印）•→ ●（黒丸）★→ ★（黒い星）✓→ ✓（チェックマーク）
見た目がわかりやすくなると、文章の印象も良くなり、読みやすさもアップします。
場面に応じてうまく活用しましょう。
ブラウザでよく誤表示される特殊文字
一部の特殊文字は、ブラウザや端末によって正しく表示されないことがあります。
これはフォントや文字コードの違いによるもので、注意が必要です。
- 古いブラウザは一部の絵文字や図形に未対応
- スマートフォンとパソコンで見え方が違う
- 文字コード設定が合っていないと文字化けが起きる
- 数値参照を使えば対応が広がる
- できるだけ汎用性の高いエンティティを使う
表示されない可能性がある文字は、事前にチェックしておくか、より確実な文字で代用する方法を考えるのが安全です。
特殊文字の種類とHTMLエンティティの対応表
HTMLで使われる特殊文字はたくさんあります。
これらをまとめて一覧にしておくと、必要なときにすぐに使えて便利です。
- 基本記号（例：
&<） - 数学記号（例：
+×） - 装飾記号（例：
•★） - 外国語文字（例：
áñ） - スペース・改行系（例：
このように整理しておけば、作業のスピードも上がり、ミスも減らすことができます。
ぜひ、自分用のリストを持っておくと良いでしょう。
HTML特殊文字の正しいエスケープ方法
エスケープが必要なタイミング
HTMLを書くとき、ある特定の文字をそのまま使うと、意図しない動作をしてしまうことがあります。
たとえば「<」や「>」などはHTMLのタグとして使われる記号なので、文章に使うとタグとまちがわれてしまいます。
そこで必要になるのが「エスケープ」です。
エスケープが必要になる主なタイミングは次の通りです。
- 文章の中で「&」や「<」などの記号を表示したいとき
- HTMLのタグの中に記号が入るとき
- フォームから送られたデータをそのまま表示するとき
- JavaScriptやCSSと一緒に使うとき
- 検索エンジン対策（SEO）で誤解を防ぎたいとき
これらの場面では、エスケープしないとページが壊れたり、意図しない表示になったりすることがあります。
特に、ユーザーからの入力をそのまま画面に出すときは要注意です。
&（アンパサンド）の正しい書き方
「&」は、HTMLで最も注意が必要な記号のひとつです。
これは文字参照のはじまりを意味するので、正しくエスケープしないとその後の文字も全ておかしくなる可能性があります。
表示したいときは、& と書きます。
たとえば「A & B」と表示したい場合、HTMLでは次のように書きます。
A & B
よくある間違いとしては、以下のような例があります。
&だけを書くと文字化けしたり何も表示されなかったりする- URLの中で「&」をそのまま書いてエラーになる
- 複数のエンティティが連続することでパースが失敗する
正しい書き方を覚えておくことで、HTML全体の安定性と見やすさが大きく向上します。
ダブルクオーテーションとシングルクオーテーションの違い
HTMLでは属性値の中に文字列を入れるとき、「”」（ダブルクオーテーション）や「’」（シングルクオーテーション）を使います。
ですが、その中に同じ種類のクオーテーションがあると、HTMLが正しく読めなくなってしまいます。
たとえば、次のように書くと正しく表示されません。
<input value="John's pen">
このようなときには、以下のようにエスケープする必要があります。
"→ ダブルクオーテーション「”」'→ シングルクオーテーション「’」
エスケープを使えば、次のように正しく書けます。
<input value="John's pen">
こうすることで、HTMLの構造が壊れず、安全に表示できます。
フォームや入力欄での特殊文字対策
フォームや検索ボックスなど、ユーザーが入力する内容には記号やタグが含まれることがあります。
そのため、そのままHTMLに出力すると、レイアウトが壊れたり、スクリプトとして実行される危険性も出てきます。
以下のような対策が必要です。
- 入力された記号はすべてエスケープする
- JavaScriptで扱う場合もエスケープを忘れない
- サーバー側でも文字の変換処理を行う
- XSS（クロスサイトスクリプティング）対策として必須
- ユーザー名やコメント欄にも注意が必要
とくにコメントや名前を画面に表示するときは、安全のためにも必ずエスケープを行うようにしましょう。
JavaScriptとの併用で注意すべき点
HTMLの中でJavaScriptを使うときにも、特殊文字の扱いを間違えると、エラーになったり動作が止まったりします。
特に「&」「’」「”」などは、JavaScriptでも意味を持つ記号です。
以下のようなケースでは注意が必要です。
- HTMLタグの中にスクリプトを入れるとき
- JavaScriptからHTMLを出力する（innerHTMLなど）とき
- 文字列の中に記号が入っているとき
- onclick属性など、イベントに直接JavaScriptを書くとき
- データをHTML経由で渡すとき
このような場合、HTMLとしてもJavaScriptとしても正しく動くようにエスケープすることが必要です。
SEO観点でのエスケープ処理の重要性
検索エンジンは、HTMLのコードを読んでページの内容を判断しています。
そのため、タグが壊れていたり、誤解を生むような特殊文字があると、SEOに悪影響を与えることがあります。
SEO対策として、次のようなことを意識しましょう。
- メタタグの中でもエスケープ処理をする
- titleタグやdescriptionに不正な記号を使わない
- 構造化データでも正しい記述を心がける
- 検索結果に表示される文字が文字化けしないようにする
- ページ全体の品質を保つためにも丁寧なコードを書く
きれいで正しいHTMLを書くことは、検索エンジンからの評価を上げるためにもとても大切です。
自動でエスケープする方法（CMS・ツール）
毎回自分でエスケープを考えるのは大変です。
そこで、CMSやHTMLエディタの中には、自動でエスケープしてくれる機能があります。
これを活用すれば、ミスも減らせて作業も楽になります。
代表的な方法は以下の通りです。
- WordPressなどのCMSでは自動でエスケープされる場所がある
- VSCodeなどのエディタで拡張機能を使う
- テンプレートエンジン（例：Handlebars）で自動エスケープ機能を使う
- HTML整形ツールでチェックを行う
- フォーム送信時にサニタイズ処理を入れる
便利なツールを使うことで、安全性も高まり、作業のスピードもアップします。
使えるものはどんどん取り入れて、効率よく作っていきましょう。
特殊文字エラーの対処法とチェック方法
よくある特殊文字エラーの例
HTMLで特殊文字を正しく使わないと、見た目や動作にエラーが出てしまいます。
ここでは、よくある特殊文字のエラー例とその原因について説明します。
まずは、よく起きるエラーを以下にまとめます。
<や>を使わずに「<」や「>」を直接書いてタグが壊れる&を使わず「&」を直接書いてURLやクエリが誤動作する- クオーテーションをエスケープしないことで属性が壊れる
- 数値参照や名前参照の書き間違いで正しく表示されない
- 文字化けや、想定外の記号表示が起きる
このようなエラーは、「ちょっとした記述ミス」が原因であることが多く、正しい知識と注意が必要です。
ページの見た目がおかしいときは、まず特殊文字の使い方を見直してみましょう。
ブラウザ表示での確認ポイント
特殊文字を使ったときは、どのようにブラウザで表示されるかをしっかり確認することが大切です。
ブラウザによって微妙に見え方が変わることもあります。
確認するときのチェックポイントは以下の通りです。
- 文字が意図した通りに表示されているか
- エンティティがそのまま表示されていないか
- 属性内の文字列が壊れていないか
- ブラウザによって表示が変わっていないか
- HTMLのソースを見て、正しいコードになっているか
確認をするときは、複数のブラウザ（Chrome、Safari、Edgeなど）でチェックすると安心です。
また、スマホやタブレットなどのデバイスでも見え方をチェックしておきましょう。
エディタやCMSでのエラー対処
HTMLを書いているときに、エディタやCMSによっては自動的にエスケープされたり、逆にエスケープが抜けたりすることがあります。
そういった場合の対処方法も覚えておくと便利です。
以下はCMSやエディタでのエラーへの対応例です。
- 入力画面が「ビジュアルモード」と「HTMLモード」に分かれている場合はHTMLモードを使う
- 自動変換機能があるCMSでは、自動エスケープ設定を確認する
- エディタの補完機能を活用して、間違いを防ぐ
- 保存前に「プレビュー」で表示を確認する
- 間違ったエスケープがあれば手動で修正する
CMSやエディタに頼りすぎず、どのようにコードが書かれているかを自分の目で確認することが、エラー防止の第一歩です。
文字化けが起きた時の原因特定法
HTMLページで文字が「？？？」や「é」のようにおかしく表示されるときは、文字化けが起きています。
これは、文字コードの不一致や特殊文字の誤使用が原因です。
以下のような方法で原因を特定できます。
- HTMLファイルの文字コードがUTF-8になっているか確認する
&や<などのエンティティが正しく書かれているか見る- 日本語や記号を数値文字参照で書いていないか確認する
- サーバーやCMSの設定を見直す
- ソースコードを見て、不自然な文字列がないか調べる
文字化けは見た目だけでなく、SEOやユーザーの信頼にも大きな影響を与えます。
原因を一つずつ調べて、確実に解消しましょう。
エスケープ漏れを見つけるツール
大きなページや複雑なHTMLでは、人の目だけではエスケープ漏れを見つけるのが難しいこともあります。
そのようなときは、便利なツールを使ってチェックしましょう。
代表的なチェックツールには以下のようなものがあります。
- HTMLバリデーター（W3C Validatorなど）
- エディタの構文チェック機能（VSCodeやSublime Textなど）
- CMSプラグインによる自動チェック
- Chrome拡張機能のHTMLチェッカー
- JavaScriptによる正規表現チェック
ツールを使うと、目で見逃してしまう細かいミスもすぐに発見できます。
手動チェックと併せて使うことで、より安全なHTMLを書けるようになります。
マルチバイト文字との競合エラー
日本語などのマルチバイト文字を使うときは、特殊文字と混在したときにエラーが起きやすくなります。
特に古い環境や一部のエディタでは注意が必要です。
以下のような点に気をつけましょう。
- HTMLファイルの文字コードをUTF-8に統一する
- 特殊文字を使うときは、必ず正しいエンティティを使う
- テンプレートエンジンなどを使うときはエスケープ処理を確認する
- サーバーのレスポンスヘッダにも文字コードを明示する
- 文字列の途中でバイトが切れないように注意する
マルチバイトと特殊文字が混ざると、思わぬトラブルが起きやすいため、事前に設計段階から気をつけておくことが大切です。
開発時の特殊文字チェックリスト
最後に、HTMLを開発するときに使える特殊文字チェックリストを紹介します。
このリストを使うと、制作中のミスを減らすことができます。
- 表示したい記号はエスケープされているか
- 属性内の記号に
"や'を使っているか - 数値文字参照や名前付きエンティティの書き方に誤りがないか
- 複数の空白や改行は意図通りに表示されているか
- ブラウザでの表示チェックができているか
- CMSやエディタの自動変換に頼りすぎていないか
このチェックリストを参考にすれば、エラーの少ない、安全なHTMLを作ることができるようになります。
作業のたびに確認する習慣をつけておきましょう。
まとめ
これまでHTMLの特殊文字とエスケープ方法について、基本からエラー対策まで詳しく紹介してきました。
最後に、大事なポイントをもう一度振り返りましょう。
- 特殊文字は正しくエスケープしないと表示が崩れる
- < > & などはエンティティに置き換える
- 文字参照には名前付きと数値の2種類がある
- ツールやブラウザで表示チェックを行う
- マルチバイト文字やCMSの仕様にも注意する
HTMLの特殊文字を正しく使えるようになると、見やすく安全なページが作れます。
ぜひ今日から使って、あなたのWeb制作に役立ててみましょう。
