HTML で「<」や「&」をそのまま書いたら、表示が崩れたりタグとして扱われたりした——そんな経験はありませんか。これらの記号は HTML にとって特別な意味を持つため、文字として見せたいときは文字参照（文字実体参照・エンティティ）という書き方に置き換える必要があります。< と書くと画面には「<」が表示される、という仕組みです。この記事では、文字参照が必要な理由、よく使う記号の書き方、名前付き参照と数値参照の違い、つまずきやすいポイントまで、初心者の方にも分かるように解説します。
目次
文字参照とは
文字参照とは、特定の文字を & で始まり ; で終わる決められた記号列で表す書き方です。HTML には、そのまま書くと困る文字がいくつかあります。たとえば < はタグの開始記号なので、文章中にそのまま書くとブラウザがタグの始まりだと勘違いしてしまいます。
そこで、こうした文字は文字参照に置き換えます。< と書けば、ブラウザはこれをタグではなく「< という文字」として表示します。文字参照には、覚えやすい名前を使う名前付き参照と、文字コード番号で指定する数値参照の2種類があります。
必ず置き換えるべき記号
とくに重要なのが次の記号です。これらは HTML の構文で特別な役割を持つため、文字として見せたいときは必ず文字参照にする必要があります。表の「名前付き参照」の列が、実際にソースコードに書く文字列です。
| 表示したい文字 | 名前付き参照 | 数値参照 |
|---|---|---|
| <（小なり） | < | < |
| >（大なり） | > | > |
| &（アンパサンド） | & | & |
| “（二重引用符） | " | " |
とくに &（アンパサンド）は文字参照そのものの開始記号なので、文字として表示したいときは & と書きます。URL に & を含めるときなど、意外と忘れやすいポイントです。
<!-- 「5 < 10」と表示したい -->
<p>5 < 10</p>
<!-- 「Tom & Jerry」と表示したい -->
<p>Tom & Jerry</p>空白とよく使う記号
記号以外にも、便利な文字参照があります。代表的なのが （ノーブレークスペース）です。HTML では半角スペースを連続して書いても1つにまとめられてしまいますが、 を使うとスペースをそのまま残せるうえ、その位置で改行されなくなります。著作権マークなどの記号もよく文字参照で書かれます。
| 文字 | 名前付き参照 | 意味 |
|---|---|---|
| （空白） | | 改行しない空白 |
| © | © | 著作権マーク |
| ® | ® | 登録商標マーク |
| ¥ | ¥ | 円記号 |
| → | → | 右向き矢印 |
ただし をスペースの代わりに多用するのはおすすめできません。レイアウトの余白は CSS の margin や padding で調整するのが本来のやり方です。 は「ここで改行させたくない」という意味があるときだけ使うのが適切です。
名前付き参照と数値参照の違い
同じ文字でも、書き方は2通りあります。© のように名前で書くのが名前付き参照、© のように文字コードの番号で書くのが数値参照です。数値参照には、10進数で書く方法と、&#x に続けて16進数で書く方法があります。
<!-- すべて © と表示される -->
© <!-- 名前付き参照 -->
© <!-- 数値参照（10進数） -->
© <!-- 数値参照（16進数） -->名前付き参照は読んで意味が分かりやすい反面、用意されている文字が限られています。数値参照はあらゆる文字を指定できますが、番号からは何の文字か分かりにくいのが難点です。日常的には、< や © のような名前付き参照を優先し、名前がない特殊な文字だけ数値参照を使う、と考えればよいでしょう。
文字参照を使うべき場面
近年は HTML ファイルの文字コードが UTF-8 で統一されているため、日本語や「©」などの記号はそのまま直接書いても表示できます。では、いつ文字参照が必要なのでしょうか。重要なのは次の2つの場面です。
1つ目は、これまで見てきた <・>・& のように、HTML の構文上そのままでは書けない記号を文字として見せたいときです。とくにソースコードを記事に載せる場合は、タグの記号を文字参照にしないと正しく表示されません。
2つ目は、属性値の中で同じ種類の引用符を使いたいときです。たとえば " で囲んだ属性値の中に " を含めたい場合、そのままでは属性の終わりと誤解されるため " に置き換えます。
表示がおかしくなるときの確認点
記号が消える・タグとして扱われる
文章中の < 以降が消えてしまうのは、ブラウザがそこをタグの始まりだと解釈し、> までを無視しているためです。文字として見せたい < は < に置き換えれば正しく表示されます。
「©」のように文字参照がそのまま出る
画面に © という文字列がそのまま表示されるときは、末尾のセミコロン ; を書き忘れていることがよくあります。文字参照は & で始まり ; で終わるのが正しい形です。また、綴り（© を ©right; と書くなど）が間違っている場合も、置き換えられずにそのまま表示されます。
「&copy;」のように二重になる
プログラムで生成した文字列を出力するとき、すでに文字参照になっている文字列をもう一度エスケープすると & が二重に変換され、画面に © がそのまま出てしまいます。PHP の htmlspecialchars() などでエスケープするのは一度だけにする、という点に注意してください。
まとめ
文字参照は、特別な意味を持つ記号を文字として安全に表示するための仕組みです。要点を整理します。
<・>・&・"は、文字として見せたいとき必ず文字参照にする。- 名前付き参照（
<など）と数値参照（<など）の2種類がある。 - 日常は名前付き参照を優先し、名前のない文字だけ数値参照を使う。
は「改行させたくない空白」。余白調整は CSS で行う。- 表示が崩れるときは、セミコロンの付け忘れや二重エスケープを確認する。
まずは <・>・& の3つを覚えておけば、ソースコードの掲載や記号の表示で困ることは大きく減ります。必要に応じて他の文字参照も使い分けていきましょう。