HTML エンティティ
HTMLでは、一部の文字は「予約済み」です。例えば、HTML内で「未満(<)」や「超過(>)」の記号をそのまま使うと、ブラウザはそれを新しいタグの開始や終了と勘違いしてしまい、正しくレンダリングされません。
これらの文字や、キーボードには存在しない特殊な記号を表示するために使用するのがHTMLエンティティです。
1. エンティティの構文 (Syntax)
HTMLエンティティを表示するには、以下の2つの方法があります。
- 実体参照(Entity Name): アンパサンド(
&)で始まり、セミコロン(;)で終わる名前付きのコード。 - 数値参照(Entity Number): アンパサンドとシャープ(
)で始まり、セミコロン(;)で終わる数値コード。
&entity_name;
entity_number;例えば、<(Less than)を表示する場合:
- 実体参照:
< - 数値参照:
<
2. HTMLの予約文字
HTMLコード内で特別な意味を持つ文字を表示したい場合は、エンティティに置き換える必要があります。
| 文字 | 説明 | 実体参照 | 数値参照 |
|---|---|---|---|
< | less than | < | < |
> | greater than | > | > |
& | ampersand | & | & |
" | double quotation mark | " | " |
' | single quotation mark (apostrophe) | ' | ' |
3. 改行しないスペース ( )
HTMLで最もよく使われるエンティティの一つが (non-breaking space) です。
通常、HTMLはテキスト内の複数のスペースを1つにまとめてしまいますが、 を使うと「強制的に空白」を作ることができます。
また、その名の通り「改行させない」役割も持っています。例えば、10 km/h という表記の間に を入れると、画面端で 10 と km/h が泣き別れて改行されるのを防ぐことができます。
4. 便利な特殊記号のリスト
Webサイトで頻繁に使用されるその他の記号です。
| 記号 | 説明 | 実体参照 | 数値参照 |
|---|---|---|---|
© | copyright | © | © |
® | registered trademark | ® | ® |
™ | trademark | ™ | ™ |
¥ | yen | ¥ | ¥ |
€ | euro | € | € |
× | multiplication | × | × |
÷ | division | ÷ | ÷ |
5. ダイアクリティカルマーク (Diacritical Marks)
アルファベットの上に付くアクセント記号(a + ̀ = à など)も、エンティティを組み合わせることで表現可能です。これらは「結合文字」と呼ばれます。
à ```
---
## 6. まとめ
HTMLエンティティは、意図しないタグの発生を防ぐだけでなく、通貨記号や数学記号、著作権表示などを正確に表現するために不可欠な技術です。
| 特徴 | 実体参照 (Name) | 数値参照 (Number) |
| :--- | :--- | :--- |
| **覚えやすさ** | 高い (`©`) | 低い (`©`) |
| **ブラウザ互換性** | 良好 | 非常に良好 |
| **対応文字数** | 限定的 | 全Unicodeに対応 |
Webサイトのフッターなどで `©` 記号を直打ちしていませんか?文字化けを防ぐためにも、エンティティの使用を検討してみてくださいね。
次は、HTMLで絵文字(Emoji)を表示する方法についても興味がありますか?それとも、フォームの作成などに進みますか?