WEBページ公開時の文字化け解消

Question

作成したWebページを公開して、chromeとsafaliで確認をすると以下のように文字化けが起きます。
拡張機能のテキストエンコーディングでUTF-8を選択すると正常に表示されるのですが、
最初にchromeで表示した時に文字化けが起きないようにするにはどうすればよいでしょうか。

文字化け部分

WORKS
Web蛻ｶ菴懊�險倬鹸縺ｧ縺�
繝�じ繧､繝ｳ邱ｴ鄙堤畑縺ｮ譫ｶ遨ｺ繧ｵ繧､繝茨ｼ医ヵ繧｡繝ｼ繧ｹ繝医ン繝･繝ｼ縺ｮ縺ｿ�峨ｂ蜷ｫ繧薙〒縺翫ｊ縺ｾ縺吶€�

正常時

WORKS
Web制作の記録です
デザイン練習用の架空サイト（ファーストビューのみ）も含んでおります。

■環境
PC:mac
テキストエディタ：Atom
サーバ：エックスサーバ
FTPクライアント：Filezilla　　　（転送モード→バイナリモード、文字コード→UTF-8へ矯正）
ブラウザ：Chrome,safali

Answer 1

順番に確かめてください

①htmlのメタ宣言でエンコードがUTF-8になっているか？
②元々のファイルのエンコードがUTF-8になっているか？
③htaccessなどで他言語を明示していないか？

Xserverを通常使用している限りは他言語で表示されることはないですが、もしコンソールなどでサーバ設定をカスタマイズしている場合、
④サーバ内のコンフィグでUTF-8以外になっていないか？

Comments

[Taka_takatak]

ご回答ありがとうございます。
①HTMLファイルには以下の通り宣言しており、
<meta charaset="UTF-8">
②Atomの設定もUTF-8となっている事を確認しました。
③htaccessはいじっておりません。

Xserverも通常使用しております、、、

[Taka_takatak]

HTML宣言のスペルミスでした。お騒がせしました。

Answer 2

htmlをどのように作成されたか知らないですが、ファイル自体がutf8でない、またはhtmlでcharsetがutf8になってないかのいずれかか両方かと思います。

Comments

[Taka_takatak]

ご回答ありがとうございます。

HTMLファイルには以下の通り宣言しており、
<meta charaset="UTF-8">
Atomの設定もUTF-8となっている事を確認しました。
他に考えられる事はございますでしょうか。

[m.ts10806]

<meta charset="utf-8">

ですよ。charsetのスペル間違ってます

[Taka_takatak]

ありがとうございます。不注意でした。