HTMLで記号や特殊文字を通常文字として表記する

記号や特殊記号をマークアップする

テキストに記号や特殊文字、プログラムのソースコードをそのまま入力すると、機械依存文字で文字化けしてしまったり、コードとして認識されて表示されてしまうなどで意図しない表示結果になることがあります。

例えばHTMLタグはその典型例で、「<p>」や「<br>」などのタグをそのまま入力すると、HTMLとして表示されてしまいタグ部分が通常テキストとして認識されません。

HTMLタグなども通常のテキストとして入力したい場合は、「<」や「>」の記号部分を文字コードとして入力する必要があります。
文字コードで入力すると、次のように記号も通常のテキストとして表示され、HTMLとしては認識されなくなります。

文字コードを使った3種類の記述方法

記号はキーボードで直接入力したり、「記号」を変換して入力することも可能です。
しかし、この方法はOSやブラウザ、言語など閲覧者の環境に影響される可能性が高いため、あまりオススメできません。

HTMLでは記号を入力する一般的な方法として、「文字実体参照」か「数値文字参照」を使って入力します。
さらに数値文字参照は「10進数」と「16進数」を使った2種類の書き方に分かれます。

この形式はUnicodeで定められた文字コードを使用するため、機械依存文字(特定の環境でしか表示されない文字のこと)による文字化けを極力防ぐことができます。

文字実体参照

文字実体参照は定義された名前から記号を入力する形式です。
限られた記号でしか使えませんが、数値による指定ではないため直感的に分かりやすく扱いやすい書き方です。

フォーマットは名前を「&」と「;」で囲みます。

文字実体参照の入力例

& // => &
© // => ©

数値文字参照 (10進数)

数値文字参照はUnicodeで定義されたコード位置を数値で入力する形式です。
文字実体参照のような名前ではないため少し取っ付きづらいですが、表示できる記号の幅が豊富です。

入力方法は先述の通り、「10進数」と「16進数」の2パターンあります。

10進数の入力フォーマットは、コード位置を「&#」と「;」で囲みます。

文字実体参照(10進数)の入力例

& // => &
© // => ©y;

数値文字参照 (16進数)

16進数の入力フォーマットは、コード位置を「&#x」と「;」で囲みます。

文字実体参照(16進数)の入力例

& // => &
© // => ©

文字コード表については、こちらの「HTMLの記号・特殊文字の文字コード表（文字実体参照、数値文字参照）」をご覧ください。

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。