HTML実体参照(特殊文字)のセミコロン | i-BLOG

HTML実体参照(特殊文字)のセミコロン

HTMLで特殊文字や特殊記号を記述する時に「実体参照」という方法を使います。
その記述方法は

「&」+「#」+「数値」+「;」

または

「&」+「キーワード」+「;」

ですが、後者の「&」+「キーワード」+「;」の場合はブラウザによって最後のセミコロンが必要な状況に差があるようです。

ちょっとあいまいな表現になりましたが、「セミコロンがあっても無くても同じ」(=どんな状況でも有無を言わさず特殊文字に変換される)なブラウザと「一定の条件でセミコロンが必要」(=条件によってセミコロンが無いと変換されない)なブラウザがある模様です。

軽く確認したところ、下記のような結果になりました。

■セミコロンがあっても無くても同じ:
InternetExplorer 8, Google Chrome 10
■一定の条件でセミコロンが必要:
Firefox 3.6, Safari 5

前者のほうでは、何かの名前などをテキストで打つとき、一部に「&」を含む場合、その後に続く文字がたまたま実体参照のキーワードに一致してしまうと、意図しない変換が行われるということになります。

しかしながら、そもそも「&」も特殊文字であり「&」と記述するのが正しいので、テキストで打つ場合はこれを守ってさえいれば問題ないと思われます。

ただ、CMSなどでブラウザを通じて入力したHTMLソースを再度textarea等に表示させる場合(何も変換せず入力したものがそのまま保存、出力される仕組みの場合)、前者のブラウザでは「&」と入力した部分がブラウザのtextarea内では「&」で表示されます。
それに気づかずまた保存してしまうと、変換結果の記号として保存されてしまいます。

特に、リンクを設置している場合でリンク先URLの中にGETパラメータを含む場合で、複数のパラメータを「&」でつなぐ場合です。
(何かの名前に「&」が含まれる場合よりも、状況としてはこっちのほうが多いかもしれませんね。)
リンク先URLなので「&」部分を「&」と書かない場合が多いのではないでしょうか。
この場合、特殊文字への変換が発生してしまうと、ただ文字表現が狂うだけでなく、リンクが切れてしまいます。
何らかのCMSを使っている場合はご注意ください。

ところで、ブラウザごとの結果の話に戻りまして、後者のほうで特殊記号に変換されるための「一定の条件」とは、下記になります。

  • 特殊文字部分の直後に何もない場合
  • 特殊文字部分の直後に半角スペースがある場合
  • 特殊文字部分の直後に半角記号がある場合(Firefoxは一部のみ)
  • 特殊文字部分の直後に全角文字がある場合(全角スペース含む)

この条件に当てはまる場合はセミコロンが無くても特殊記号に変換されます。

逆に、変換されない条件は、「直後に半角英数字がある場合」ということになります。
ただ、3番目の「一部の半角記号」というのはブラウザによって違いがあるようで、Safariでは英数字以外の記号でも変換されるようです。
※全ての記号は確認していませんので、Safariでも変換されない記号があるかもしれません。

対してFirefoxの場合、一部の記号(「.」「_」「-」等)では変換されませんでした。
これら以外の大部分の記号では変換されるようです。

さらにさらに、話を戻しまして、冒頭で『後者の「&」+「キーワード」+「;」の場合は』と書きましたが、もう一方の『「&」+「#」+「数値」+「;」』の場合はといいますと、どのブラウザでも「セミコロンの有無は関係なし」になるようです。
セミコロンが無くても『「&」+「#」+「数値」』まで書かれていれば「実体参照だな」と判断してもほぼ問題ないということでしょう。

キーワードのほうについては、前者のブラウザはやりすぎとしても、後者は親切心で状況別に柔軟に対応してる感はありますね。
ただ個人的には、どんな場合でもちゃんとセミコロンを入れた場合だけ変換してくれればいいのに...と思うんですけどね。