HTMLで記号が消える・崩れるとき — 特殊文字とエスケープ

文章の中に「5 < 10」と書いたら、その先がまるごと消えてしまった。あるいは、記事にHTMLのコードを載せようとしたら、コードが実際のタグとして動いてしまった。どちらも同じ原因です。

なぜ消えるのか

ブラウザは < を見つけると「ここからタグが始まる」と判断します。だから「5 < 10」と書くと、< 10 の部分をタグの書き始めだと思って読み進め、閉じる > が見つかるまでの文字を表示しなくなります。

つまり消えたのではなく、タグの一部として扱われているだけです。文字として見せたいときは、別の書き方に置き換えます。これをエスケープと呼びます。

& で始まり ; で終わるのが決まりです。最後のセミコロンを忘れると、そのまま文字として出てしまうので気をつけてください。

CODEエスケープする前と、した後コードを書き換えると、すぐ下で動きます

1行目は消えて表示されません。2行目は < に置き換えてあるので、記号として表示されます。

記事の中にコードを載せたいときは、エスケープしたうえで pre と code で囲みます。pre は改行と空白をそのまま表示するタグ、code は「これはコードです」という意味を持つタグです。

CODEコードをコードとして見せるコードを書き換えると、すぐ下で動きます

pre を外すと、改行とインデントが消えて1行になります。試してみてください。

エスケープとは別に、もうひとつ多いのが全角文字の混入です。日本語入力のまま記号を打つと、見た目がほとんど同じ別の文字になります。

エディタで空白文字を表示する設定にしておくと、全角スペースが目に見えるようになります。原因不明の崩れの多くは、これで発見できます。