HTML 速習チュートリアル

HTML エンティティ

HTMLでは、一部の文字は「予約済み」です。例えば、HTML内で「未満(<)」や「超過(>)」の記号をそのまま使うと、ブラウザはそれを新しいタグの開始や終了と勘違いしてしまい、正しくレンダリングされません。

これらの文字や、キーボードには存在しない特殊な記号を表示するために使用するのがHTMLエンティティです。

1. エンティティの構文 (Syntax)

HTMLエンティティを表示するには、以下の2つの方法があります。

  1. 実体参照(Entity Name): アンパサンド(&)で始まり、セミコロン(;)で終わる名前付きのコード。
  2. 数値参照(Entity Number): アンパサンドとシャープ(&#)で始まり、セミコロン(;)で終わる数値コード。
&entity_name;
&#entity_number;

例えば、<(Less than)を表示する場合:

  • 実体参照: &lt;
  • 数値参照: &#60;

2. HTMLの予約文字

HTMLコード内で特別な意味を持つ文字を表示したい場合は、エンティティに置き換える必要があります。

文字説明実体参照数値参照
<less than&lt;&#60;
>greater than&gt;&#62;
&ampersand&amp;&#38;
"double quotation mark&quot;&#34;
'single quotation mark (apostrophe)&apos;&#39;

3. 改行しないスペース ( )

HTMLで最もよく使われるエンティティの一つが &nbsp; (non-breaking space) です。

通常、HTMLはテキスト内の複数のスペースを1つにまとめてしまいますが、&nbsp; を使うと「強制的に空白」を作ることができます。

また、その名の通り「改行させない」役割も持っています。例えば、10 km/h という表記の間に &nbsp; を入れると、画面端で 10km/h が泣き別れて改行されるのを防ぐことができます。

4. 便利な特殊記号のリスト

Webサイトで頻繁に使用されるその他の記号です。

記号説明実体参照数値参照
©copyright&copy;&#169;
®registered trademark&reg;&#174;
trademark&trade;&#8482;
¥yen&yen;&#165;
euro&euro;&#8364;
×multiplication&times;&#215;
÷division&divide;&#247;

5. ダイアクリティカルマーク (Diacritical Marks)

アルファベットの上に付くアクセント記号(à à など)も、エンティティを組み合わせることで表現可能です。これらは「結合文字」と呼ばれます。

a&#768;  ```

---

## 6. まとめ

HTMLエンティティは、意図しないタグの発生を防ぐだけでなく、通貨記号や数学記号、著作権表示などを正確に表現するために不可欠な技術です。

| 特徴 | 実体参照 (Name) | 数値参照 (Number) |
| :--- | :--- | :--- |
| **覚えやすさ** | 高い (`&copy;`) | 低い (`&#169;`) |
| **ブラウザ互換性** | 良好 | 非常に良好 |
| **対応文字数** | 限定的 | 全Unicodeに対応 |

Webサイトのフッターなどで `©` 記号を直打ちしていませんか?文字化けを防ぐためにも、エンティティの使用を検討してみてくださいね。

次は、HTMLで絵文字(Emoji)を表示する方法についても興味がありますか?それとも、フォームの作成などに進みますか?