HTML 入門

HTML 文字エンティティ

HTML は「タグ」に基づいた言語であるため、一部の文字は HTML 内で特別な意味を持ちます。例えば、小なり記号 < や大なり記号 > はタグを定義するために使用されます。

もし、ブラウザに「段落タグ」として解析させるのではなく、Web ページ上に実際の <p> というテキストを表示したい場合はどうすればよいでしょうか？ 直接 <p> と書いてしまうと、ブラウザは新しい段落が始まったと勘違いしてしまいます。

そこで必要になるのが、HTML エンティティ (HTML Entities) です。

1. HTML エンティティを理解する

HTML エンティティとは、& で始まり、; で終わる特殊なコードのことです。

  • 役割： ブラウザに対して「この文字をコードとして実行せず、普通の文字として表示して！」と伝えます。
  • 書式： 通常、実体参照（Entity Name / 例：&lt;）と数値文字参照（Entity Number / 例：&#60;）の 2 種類の書き方があります。
  • 特性： HTML 内で「予約文字（Reserved Characters）」や「不可視文字」を表示するための唯一の標準的な方法です。

2. 比較：直接入力 vs エンティティの使用

ブラウザが、直接入力された特殊文字とエンティティを使用した文字をどのように処理するか、その違いを見てみましょう。

2.1 直接入力された特殊文字

<p>
    見出しを書きたいときは、<h1> タグを使わないでください。
    私は A & B 社が本当に大好きです。
</p>

ブラウザの解析結果（発生しうる問題）：

  • <h1> が新しい見出しの開始であるとブラウザに誤認され、ページ構造が崩れたり、タグとして処理されて非表示になったりする可能性があります。
  • & は、一部の厳格なモードではエンティティコードの開始を期待するため、解析エラー（パースエラー）を引き起こすことがあります。

2.2 HTML エンティティを使用した場合

<p>
    見出しを書きたいときは、&lt;h1&gt; タグを使わないでください。
    私は A &amp; B 社が本当に大好きです。
</p>

ブラウザの表示結果：
見出しを書きたいときは、<h1> タグを使わないでください。私は A & B 社が本当に大好きです。
（注：すべての記号が意図した通りに表示され、ページ構造も破壊されていません。）

3. 主要な特徴

  • 予約文字のエスケープ： <、>、&、" など、文法上の意味を持つ記号を純粋なテキストに戻すのが最大の機能です。
  • キーボードで打てない記号の表示： 著作権記号 © やユーロ記号 €、さらには特殊な数学記号などを表示できます。
  • 空白の合体（コラプシング）の防止： HTML が複数のスペースを 1 つにまとめる仕様を覚えていますか？ エンティティの &nbsp; を使うと、スペースを強制的に保持できます。

4. 実戦的なサンプルコード

4.1 示例 1：HTML コードを表示する

これは技術ブログで最もよく使われるシナリオです。Web ページ上で他人にコードを教えるためには、コード内の「山括弧（尖かっこ）」をすべてエスケープする必要があります。

<!DOCTYPE html>
<html lang="ja">
<body>
    <h1>Webページでコードを表示する方法</h1>
    <p>以下の例を見てください：</p>

    <p>
        段落を定義するには、&lt;p&gt; タグを使用します。<br>
        リンクを定義するには、&lt;a href="..."&gt; タグを使用します。
    </p>

    <p>注意：ここでの &lt; と &gt; はブラウザに対し、機能として実行せず形状のみを表示するよう指示しています。</p>
</body>
</html>

4.2 示例 2：強制的なスペースと特殊なレイアウト

通常のスペースキーによる空白は HTML 内で折り畳まれますが、「改行なしスペース (Non-Breaking Space / &nbsp; )」は折り畳まれません。

  • プレースホルダー： ブラウザによって合体されるのを防ぎます。
  • 改行阻止： 繋がっている 2 つの単語の間で自動改行が発生するのを防ぐという特性もあります。
<!DOCTYPE html>
<html lang="ja">
<body>
    <h2>価格表示</h2>
    <p>プラン容量：100&nbsp;MB</p> 

    <h2>インデントのシミュレート（非推奨ですが原理的に可能）</h2>
    <p>
        &nbsp;&nbsp;&nbsp;&nbsp;これは 4 つの &nbsp; を使用してインデントを付けた段落です。
        通常は CSS の text-indent を推奨しますが、微調整が必要なシーンでは便利です。
    </p>
</body>
</html>

4.3 示例 3：著作権、通貨、アイコン

キーボードにはない記号を表示する必要がある場合が多々あります。

<h2>フッター情報</h2>
<p>
    All Rights Reserved &copy; 2025 JPKODA Inc.<br>
    登録商標：MyBrand&reg;<br>
    特別価格：&yen;99.00 (旧価格 &euro;15.00)
</p>

ブラウザの表示結果：
All Rights Reserved © 2025 JPKODA Inc.
登録商標：MyBrand®
特別価格：¥99.00 (旧価格 €15.00)

5. 重要な注意事項：構文の落とし穴

エンティティを使用する際、初心者が陥りやすいミスが 2 つあります。

5.1 セミコロンの付け忘れ

すべてのエンティティは、必ずセミコロン ; で終わらなければなりません。

5.2 大文字と小文字の区別

ほとんどの HTML タグは大文字・小文字を区別しませんが、エンティティは通常区別されます。

  • &copy; は © (著作権記号) を表示します。
  • &COPY; は無効であるか、特定のフォントセットでは全く別のものを表す可能性があります。

6. まとめ

画面上に <、>、&、" を表示したい場合は、必ずエンティティを使用してください。
改行を禁止するなどの特別なレイアウト制御が必要な場合に限り、 &nbsp; を使用しましょう。
基本公式：& + 名前 + ; のセットを忘れないようにしてください。

付録：よく使われる HTML 文字エンティティ表

表示内容説明実体参照 (Entity Name)数値文字参照 (Entity Number)
(空白)改行なしスペース&nbsp;&#160;
<小なり記号&lt;&#60;
>大なり記号&gt;&#62;
&アンパサンド&amp;&#38;
"二重引用符（ダブルクォート）&quot;&#34;
'一重引用符（シングルクォート）&apos;&#39;
¢セント&cent;&#162;
£ポンド&pound;&#163;
¥円 / 元&yen;&#165;
€ユーロ&euro;&#8364;
©著作権記号&copy;&#169;
®登録商標記号&reg;&#174;
™商標記号&trade;&#8482;