You open it in the browser and Japanese turns into mysterious symbols like “譁�蟄怜喧縺�“—almost every beginner hits this garbled text at least once, but there are only two causes. If you check these two spots—the HTML declaration (the meta tag) and the file’s save format—you can always fix it.
Why it garbles: characters can only be read through a “conversion table”
A computer can’t handle characters directly; internally it saves everything as numbers. When it saves “あ” it saves the number for “あ,” and when it loads it, it turns that number back into “あ” again—the conversion table used for this back-and-forth is the character encoding.
The true nature of garbled text is that the conversion table at save time and the conversion table at load time don’t match. If you read a sequence of numbers saved in UTF-8 with a different conversion table (like Shift_JIS), it gets converted into completely different characters. Symbols like “譁�蟄怜喧縺�” are the result of this conversion mistake.
The conclusion: line up these two
So garbled text is really just a mismatch between how the file was saved and how the browser reads it. Line both up to the standard, UTF-8, and it’s fixed.
- Whether
<meta charset="UTF-8">is at the top of the HTML<head> - Whether the file is actually saved in UTF-8
Let’s check them in order.
Check 1: Is the meta tag there?
Check whether this one line is inside <head>, as close to the top as possible.
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>My page</title>
</head>This line is a note to the browser: “This file is written with the conversion table called UTF-8. Please read it that way.” Without the note, the browser can only guess how to read it, and when the guess is wrong, it garbles.
Check 2: Is the file saved in UTF-8?
If it garbles even though the meta tag is correct, the file itself is saved in a different format. The meta tag is only a declaration; it has no power to change how the file is actually saved. If the tag says UTF-8 but the contents are Shift_JIS, it will garble every time.
In VSCode, the save format of the file you have open is shown at the bottom right of the screen.
- Look at VSCode’s bottom right—if it shows
UTF-8, the save format is OK - If it shows something else like
Shift JIS, click that display - Choose “Save with Encoding”
- Pick “UTF-8” from the list and save
This re-saves the file in UTF-8, and reloading the browser fixes it.
The reverse case: it was garbled when opened in the editor
Sometimes it’s garbled not in the browser but the moment you open it in VSCode. This is common with old downloaded assets or files you got from someone else.
This is a state where “a file saved in Shift_JIS was opened by VSCode as UTF-8.” The file isn’t broken, so don’t worry.
- Click the encoding display (
UTF-8) at the bottom right - Choose “Reopen with Encoding”
- Choose “Japanese (Shift JIS)”
Once it displays correctly, use “Save with Encoding” to re-save it as UTF-8 so this doesn’t happen again.
Guess the cause from how it garbles
Garbling comes in patterns. You can often name the cause from the look alone, which cuts down the time you spend investigating.
| What the garbling looks like | What’s happening |
|---|---|
譁�蟄怜喧縺� (a nonsense run including kanji) | Saved as UTF-8, read as Shift_JIS |
���� (a run of black diamonds) | Saved as Shift_JIS or similar, read as UTF-8 |
????? (nothing but question marks) | A character absent from that encoding was force-converted |
Only some symbols garble (〜, − and the like) | Characters assigned differently in Shift_JIS and UTF-8 |
| Garbled in the browser only (fine in the editor) | The meta declaration is missing or wrong |
| Garbled the moment you open it in the editor | The file’s saved encoding itself is different |
Roughly: a run of diamonds means the file is in an old encoding; a run of kanji means the declaration is wrong. That guess is usually right.
Set things up to create UTF-8 files from the start
Not garbling in the first place is easiest. In VSCode you can fix the encoding used for new files.
- Open the gear icon → Settings
- Type “encoding” in the search box
- Set Files: Encoding to
UTF-8
Turning on Files: Auto Guess Encoding on the same screen makes VSCode guess the encoding of files you open and match it automatically. Handy if you often work with files from other people.
Watch out for UTF-8 with BOM
The encoding list includes an entry called “UTF-8 with BOM.” A BOM is a few marker bytes at the start of the file, and on the web it causes surprising accidents.
- Unexplained whitespace or a blank line appears at the top of a PHP page—because the BOM gets output as is. It’s the classic cause of “there’s a mysterious gap above my WordPress theme”
- A warning that output was sent before
header()was called—because the BOM became the first output
For web work, choose UTF-8 without BOM (the entry written simply as “UTF-8”). If you already saved with a BOM, pick UTF-8 again from “Save with Encoding” and it’s fixed.
When file or folder names garble
Sometimes it’s only the file name that garbles. The common case is unzipping a Windows-made ZIP on a Mac, or vice versa. A ZIP doesn’t carry the encoding of its file names, so if the side unzipping it reads them with a different table, they garble.
In that case the file contents are untouched. Renaming by hand is all it takes, so don’t rush to recreate anything. To prevent it, keep the names of folders and files you exchange to plain ASCII. For files you publish on the web, avoiding non-ASCII names is standard practice anyway.
When a CSS file garbles
The HTML is fixed, but only the Japanese written in the CSS (comments or font names) garbles—when that happens, check the CSS file’s save format too. The fix is the same: just re-save it as UTF-8 in VSCode.
@charset "UTF-8"; /* A declaration written on line 1 of a CSS file. Just in case */Garbled-text checklist
Work down the list in order and it’ll get fixed somewhere along the way.
<meta charset="UTF-8">is at the top of<head>- No spelling mistakes (
charset,UTF-8) - VSCode’s bottom right shows
UTF-8(if not, “Save with Encoding”) - After fixing, you reloaded the browser
- If it still garbles, identify which file is garbled (the HTML body, or a comment in the CSS)
Summary
- Garbled text is a mismatch between how the file was saved and how it’s being read—line up
<meta charset="UTF-8">with saving the file in UTF-8, and it’s fixed - The meta tag is only a declaration—if “I wrote it but it garbles,” suspect the file’s own save format (VSCode’s bottom right)
- If it’s garbled when opened in the editor, use “Reopen with Encoding” without saving—save it while garbled and you can’t get it back
- The pattern names the cause—a run of diamonds is the file’s encoding, a run of kanji is the declaration
- Choose UTF-8 without BOM; the BOM version causes stray whitespace in PHP
- Keeping file names to plain ASCII stops them garbling when ZIPs cross platforms
Once you know there are only two spots to blame, garbled text isn’t scary anymore.