文字をコンピュータ用の数値に変換するときの「変換表」の名前です。世界中の文字を扱える現在の標準で、Webページは特別な理由がなければUTF-8一択です。

charsetをUTF-8にしたのにまだ化ける

ファイル自体が別の形式（Shift_JISなど）で保存されています。metaタグは「UTF-8として読んで」という宣言だけなので、実際の保存形式と一致していないと化けます。VSCodeの「エンコード付きで保存」でUTF-8にして保存し直してください。

ダウンロードした素材のファイルを開いたら化けていた

昔の日本語ファイルはShift_JISで保存されていることがあります。VSCodeで「エンコード付きで再度開く」からShift JISを選ぶと正しく表示されます。編集して使うなら、そのあとUTF-8で保存し直しましょう。

ブラウザで開いたら日本語が「譁�蟄怜喧縺�」のような謎の記号に——この文字化け、初心者がほぼ全員一度は踏みますが、原因は2つしかありません。HTMLの宣言（metaタグ）とファイルの保存形式、この2か所を確認すれば必ず直せます。

文字化けの正体は、「ファイルの保存形式」と「ブラウザの読み方」の食いちがいです。両方を標準のUTF-8にそろえれば直ります。

順番に確認していきましょう。

<head>の中、できるだけ先頭にこの1行があるか確認します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>わたしのページ</title>
  </head>

この行は「このファイルはUTF-8という変換表で書いてあります。そのつもりで読んでください」という、ブラウザへの案内です。案内がないと、ブラウザは読み方を推測するしかなく、推測が外れると化けます。

metaタグが正しくても化けるなら、ファイル自体が別の形式で保存されています。metaタグはあくまで宣言で、実際の保存形式を変える力はありません。「UTF-8と書いてあるのに中身はShift_JIS」だと、堂々と化けます。

VSCodeなら、いま開いているファイルの保存形式は画面右下に出ています。

これでファイルがUTF-8で保存し直され、ブラウザを再読みこみすれば直ります。

ブラウザではなく、VSCodeで開いた時点で化けていることもあります。ダウンロードした昔の素材や、他の人からもらったファイルにありがちです。

これは「Shift_JISで保存されたファイルを、VSCodeがUTF-8として開いた」状態。ファイルは壊れていないので安心してください。

正しく表示されたら、今後のために「エンコード付きで保存」でUTF-8にして保存し直しておきましょう。

HTMLは直ったのに、CSSに書いた日本語（コメントやフォント名）だけ化ける——そんなときはCSSファイルの保存形式も確認します。直し方は同じで、VSCodeでUTF-8で保存し直すだけです。

@charset "UTF-8";   /* CSSファイルの1行目に書く宣言。念のための保険 */

上から順に確認すれば、どこかで必ず直ります。

原因はたった2か所と知っていれば、文字化けはもうこわくありません。