HTMLエンティティとは？
HTMLエンティティは、HTML文書で特殊記号を表示するために使用される文字です。例えば、< 記号はHTMLの開始タグとして認識されるため、<という記号だけをそのまま記載すると、ブラウザでの表示に問題が発生したり、表示されなくなったりします。HTMLで特別な意味を持つこれらの記号をブラウザでそのまま表示させたい場合は、'特殊文字' と呼ばれるもので変換して使用する必要があります。特殊文字には専用の文字コードがあり、そのコードを記載することで記号をブラウザ上にそのまま表示することができます。例えば、<記号は、この記号の意味としてブラウザで表示される特殊文字である<に変換して使用します。
覚えておいてください！HTML Entityは、HTML Escape Sequence、またはCharacter Entityとも呼ばれます。これらはすべて同じ概念を指し、HTML文書で特殊文字を表すために使用される用語です。
HTMLには予約された文字や特別な意味を持つ文字があります
まずは例を見てみましょう
「<p>要素について学ぼう！」というテキストをWebページに表示するために、以下のようにマークアップしてみましょう。
このコードはブラウザで次のように表示されます。
「<p>要素について学ぼう！」というテキストが表示されず、「 要素について学ぼう！」というテキストが表示されます。「<p>」というテキストが正しく表示されませんでした。
上記のコードでは、<p>の<記号がブラウザでHTMLタグの開始と認識され、誤ったタグ構文として扱われます。
HTMLでは、一部の文字がHTMLコードで通常の文字として使用できず、コードとしてのみ使用するために予約された文字があります。このような特別な意味を持つ文字を「HTML予約文字」と呼びます。
これらの特殊文字は、HTML文書で特定の役割を果たしたり、特殊な表現を示すために使用されます。特殊文字の例として、次のような文字があります。
<：HTMLタグの開始を示す役割を果たします。>：HTMLタグの終了を示す役割を果たします。&：HTMLエンティティの開始を示す信号として使用され、特殊文字を示すために一緒に使用されます。""：二重引用符：HTML属性（attribute）値の開始と終了を示す役割を果たします。''：単一引用符：HTML属性（attribute）値の開始と終了を示す役割を果たします。
これらの特殊文字は、HTML文書で正しく表示されるために特別な処理が必要であり、「HTML特殊文字」と呼ばれる特殊文字が作られました。このHTML特殊文字をマークアップすると、ブラウザで正しく表示されます。
HTML特殊文字は予約文字を正しく表現するための特殊記号です
HTML特殊文字を使って、先ほどの例で見たHTMLを実際に書いてみましょう。
| 表示される文字 | 実際に使う特殊文字 |
|---|---|
< |
< |
> |
> |
HTML特殊文字を使用しない場合、Webページの内容が正しく解釈されず、テキストの一貫性や可読性が損なわれる可能性があります。HTML特殊文字を用いて予約文字を置き換えることで、こうした問題を防ぎ、正確な表現と互換性を保つことができます。
HTMLエンティティ一覧
HTMLにおけるエンティティの使いどころは、主に次の2つです。
- 予約文字との衝突を避けるため
- キーボードにない特殊な文字を表示するため
予約文字との衝突を避け、ウェブコンテンツを作成するために必須のHTMLエンティティ
| 表示される文字 | 実際に記述するエンティティ |
|---|---|
< |
< |
> |
> |
& |
& |
" |
" |
' |
' |
キーボードにない特殊な文字を表示するための主なHTMLエンティティ
HTMLエンティティは予約文字を正しく表現するための特殊記号ですが、キーボードにない特殊な記号もHTMLエンティティリストに含まれています。
このようなキーボードにない特殊な文字を正しく表示するためにもHTMLエンティティを使用します。
キーボードにない特殊な文字を表示するための主要なエンティティは、HTMLにそのまま挿入してもよいですし、表示される特殊文字をそのままコピーして貼り付けても構いません。
😃 より多くの特殊文字コードについては、「HTML特殊文字コード表：特殊記号、エンティティ、エンコーディングコード一覧」を参照してください。
| 表示される文字 | 実際に記述するエンティティ |
|---|---|
| & | & |
| © | © |
| ® | ® |
| ¶ | ¶ |
| · | · |
| • | • |
| × | × |
| ÷ | ÷ |
| ¼ | ¼ |
| ½ | ½ |
| ¾ | ¾ |
| Σ | Σ |
| α | α |
| β | β |
| δ | δ |
| Ω | Ω |
| ← | ← |
| → | → |
| ↔ | ↔ |
| ↑ | ↑ |
| ↓ | ↓ |
| « | « |
| » | » |
| ▶ | ▶ |
| ▼ | ▼ |
| ♠ | ♠ |
| ♣ | ♣ |
| ♥ | ♥ |
| ♦ | ♦ |
| 「 | 「 |
| 」 | 」 |
空白を示すエンティティ( )
HTMLエンティティの中には、通常「スペース」と呼ばれるキーボードのスペース（Space）バーを押すことで入力される空白を示すエンティティがあります。実際に使用するエンティティは で、これは改行されない空白文字（Non-breaking Space）です。このエンティティは、次のような状況で役立ちます。
- 通常、HTMLでは空白を複数入力しても1つの空白にまとめられますが、複数の空白を入力したい場合に
- 改行せずに空白を入れたいとき
覚えておきましょう！上記のHTMLエンティティ一覧以外にも、さらに多くのHTMLエンティティが存在します。公式のリファレンスで確認してみてください。
Webページで絵文字（emoji）を使う
絵文字（Emoji）とは、感情や状況、概念などを表現するために使用される小さなグラフィックアイコンです。一般的に「顔文字」と呼ばれることもあります。😃（笑顔）、🎉（パーティーハット）、❤️（ハート）などがよく使われる絵文字の例です。ウェブページに絵文字を挿入する方法について見ていきましょう。