Web便利ツール集

HTMLエンティティ一覧|よく使う特殊文字の早見表と使い分け

HTMLエンティティ特殊文字HTML早見表

HTMLで &(アンパサンド)や ©(著作権記号)を安全に表示するには、エンティティ(& © のような記法)を使います。結論から言うと、実務で使うエンティティは20種類前後に絞り込め、全部を暗記する必要はありません。 この記事では、よく使うものを早見表にまとめ、名前付きエンティティと数値文字参照の使い分け、RSSやSVGなど一部のXML系フォーマットでは名前付きエンティティがエラーになるという見落としがちな落とし穴を解説します。

HTMLエンティティとは?なぜ必要なのか

<> はHTMLタグの開始・終了を表す記号として予約されているため、本文中にそのまま書くと、ブラウザがタグの一部だと誤認識してしまいます。そこで、これらの記号を「文字として表示したい」場合に、&lt;<)や &gt;>)のような専用の記法に置き換えます。これがHTMLエンティティです。

同じ理由で、キーボードから直接入力しにくい記号(著作権マーク、通貨記号、全角ダッシュなど)も、環境によって文字化けしにくいエンティティで書くことがあります。

よく使うHTMLエンティティ一覧(早見表)

実務で頻繁に使うものだけを分類してまとめました。ここに載っていない記号は、後述する数値文字参照で代用できます。

予約文字(必ずエンティティ化が必要)

文字エンティティ数値文字参照用途
&&amp;&#38;アンパサンド
<&lt;&#60;小なり(タグの開始と誤認されるため)
>&gt;&#62;大なり
"&quot;&#34;ダブルクォート(属性値の区切りと誤認されるため)
'&apos;&#39;シングルクォート

この5つは、後述するXML系フォーマットでも共通して使える基本セットです。迷ったら、まずこの5つだけは確実にエンティティ化してください。

記号・単位系

文字エンティティ用途
©&copy;著作権表示
®&reg;登録商標
&trade;商標
¥&yen;円記号
&euro;ユーロ記号
£&pound;ポンド記号
×&times;乗算記号
÷&divide;除算記号
±&plusmn;プラスマイナス

スペース・タイポグラフィ系

文字エンティティ用途
(改行しないスペース)&nbsp;ノーブレークスペース。単語の途中で改行させたくない箇所に使う
&mdash;エムダッシュ(文の区切りに使う長いダッシュ)
&ndash;エンダッシュ
&hellip;省略記号(三点リーダーの代用)
« »&laquo; &raquo;ギュメ(引用符の一種)

&nbsp; は多用しすぎると、コピペ元から意図せず混入して表示崩れの原因になることもあるため、レイアウト調整の目的で乱用しないほうが無難です。

名前付きエンティティと数値文字参照、どちらを使うべきか

HTMLで特殊文字を表現する方法は、実は2種類あります。

方式書き方特徴
名前付きエンティティ&copy;人が読んで意味が分かりやすい
数値文字参照(10進)&#169;Unicodeのコードポイントを直接指定。対応範囲が広い
数値文字参照(16進)&#xA9;10進と同じ文字を16進数で指定

見た目の分かりやすさでは名前付きエンティティが有利ですが、HTML5で正式に定義されている名前付きエンティティは2,000種類以上あり、覚える必要はありません。 表に載せた20種類程度を知っていれば実務では十分で、それ以外の記号(矢印、絵文字に近い記号、言語固有の文字など)を使いたい場合は、無理に名前付きエンティティを探すより、数値文字参照か、後述するツールでの変換に頼るほうが早く確実です。

日本語の全角文字はエンティティ化する必要がない

エンティティの仕組みを知ったばかりだと、「日本語も文字化けしないようにエンティティに変換しておいた方が安全では」と考えがちですが、これは誤解です。ページの文字コードがUTF-8で正しく宣言されていれば(<meta charset="UTF-8">)、ひらがな・カタカナ・漢字・全角記号はそのままの文字で問題なく表示されます。

エンティティ化が必要なのは、あくまで < > & " ' のようにHTMLの構文として特別な意味を持つ記号と、キーボードや環境によって入力・表示が不安定になりやすい一部の特殊記号だけです。日本語の本文をすべてエンティティに変換してしまうと、ソースコードが読みにくくなるうえに、検索エンジンや他ツールでの文字列処理でも不要な変換の手間が増えるため、避けたほうがよい対応です。

見落としがちな落とし穴:名前付きエンティティがRSSやSVGでエラーになる

一般的なエンティティ解説記事ではあまり触れられていませんが、実務で意外とつまずくのが「名前付きエンティティは、すべてのフォーマットで使えるわけではない」という点です。

HTML5の&nbsp;&copy;のような名前付きエンティティは、あくまでHTMLの仕様として定義されているものです。ところが、XMLの仕様であらかじめ定義されている名前付きエンティティは、実は次の5つだけです。

  • &amp; &lt; &gt; &quot; &apos;

RSSフィード、Atomフィード、SVGファイルはいずれもXMLベースのフォーマットのため、この5つ以外の名前付きエンティティ(&nbsp;&copy; など)をそのまま書き込むと、DTDで別途定義されていない限りXMLパーサーがエラーとして扱うことがあります。ブログの本文プレビューでは正しく表示されていたのに、生成されたRSSフィードだけが壊れる、SVGファイルとして書き出すと該当箇所が表示されない、といった不具合の原因がこれに当たるケースは少なくありません。

この問題を避ける確実な方法は、HTML以外の場所(RSS、Atom、SVG、XMLベースの設定ファイルなど)に特殊文字を書き込む際は、名前付きエンティティではなく数値文字参照(&#169; のような形式)を使うことです。数値文字参照はXMLの仕様上も問題なく解釈されるため、フォーマットを問わず安全に使えます。

ツールでまとめて変換する

特殊文字を含む文章を手作業でエンティティに置き換えるのは手間がかかり、変換漏れも起きやすい作業です。HTMLエンティティ変換ツールでは、テキストを貼り付けて「エンコード」を選ぶだけで、対応する記号を名前付きエンティティまたは数値文字参照に自動変換できます。逆に、すでにエンティティ化された文章を読める形に戻したい場合は「デコード」を使います。ブラウザ内で処理が完結するため、社内文書や公開前の下書きを扱う場合でもサーバーに送信されません。

すでに &nbsp;&amp; が意図せず表示されてしまっている場合の原因と直し方は、こちらの記事で個別に解説しています。あわせて、見た目が似た文字化けとして混同されやすい機種依存文字(環境依存文字)の問題も、原因がまったく異なるため参考にしてください。

まとめ

  1. 実務で使うHTMLエンティティは20種類程度に絞り込め、全種類を覚える必要はない
  2. & < > " ' の5つは、どんな場面でも共通して使える基本セット
  3. 名前付きエンティティより数値文字参照のほうが対応範囲が広く、迷ったときの代用にできる
  4. RSS・Atom・SVGなどXMLベースのフォーマットでは、名前付きエンティティがエラーになることがある。 この場合は数値文字参照を使うと安全
  5. 変換作業はツールに任せることで、手作業による変換漏れや入力ミスを防げる

この記事で使うツール

関連記事