2015年5月15日金曜日

UTF-8で保存しても、htmlが文字化けするお話

このエントリーをはてなブックマークに追加

UTF-8で保存しても、htmlが文字化けするお話

2009MAR051012

先日、UTF-8で保存したHTMLで何故か文字化けが発生したのでメモ書き。
結論から言うと、HTMLのタグが間違っていた。
具体的なコードは下記の通り

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta name="charset" content="utf-8" />
    <title>タイトルをここに入力</title>
</head>
<body>
    ほげほげ
</body>
</html>

こうすると、タイトルやほげほげの所が文字化けして読めなくなる。
さて、このHTMLどこが間違っているのだろうか。 正解のHTMLはこちら

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>タイトルをここに入力</title>
</head>
<body>
    ほげほげ    
</body>
</html>

そう、metaタグの書き方である。
<meta name="charset" content="utf-8" />と一見すると正しく見えるけれど、これでブラウザは正しくUTF-8のファイルとして認識してくれない。
ちなみに、この現象はPCでは発生せずMobile SafariやMobile Chromeで発生した。
正しいmetaタグを指定したら文字化けが消えた。
こんな珍現象は初めての事だったので、覚書としてここに記録しておく。
あと、魂の叫びを一言。
正しいHTML書け。

0 件のコメント :

コメントを投稿