# Missing charset declaration in Vanilla JS

> How to fix missing charset declaration in Vanilla JS — with the exact fix and copy-paste code.

_Category: Web essentials · Detector `web-essentials` · Check `charset` · Severity: warning_

With no explicit `<meta charset="utf-8">`, the browser falls back to a guessed encoding and can render “café” as “cafÃ©” or drop emoji entirely. Worse, if the tag appears late in a large `<head>`, the browser may have to restart parsing. It is invisible in dev on modern servers that send a `charset` header, then breaks on a static host that does not.

## The fix for Vanilla JS

Add it as the first line of every page’s `<head>`, or in your server-side layout partial.

```html
<meta charset="utf-8" />
```

### Steps

1. Open your document head
2. Add `<meta charset="utf-8">` as the first child of `<head>`
3. Verify accented text and emoji render correctly on a static host

## How VibeCheck detects it

The `web-essentials` detector flags this live in the browser and reports it to the widget's Problems list — and to your coding agent over MCP.

- **Issue string:** `Missing charset declaration`
- **Threshold:** No element matching <meta charset> in the document head

## FAQ

### Do I need the long <meta http-equiv="Content-Type"> form?

No. The short `<meta charset="utf-8">` has been valid HTML5 for over a decade and is preferred. Keep it as the first tag in `<head>`.

### It works locally — why does VibeCheck still flag it?

Your dev server may send a `charset` in the HTTP header, masking the missing tag. A static host or file:// open won’t, so declare it in the HTML to be safe everywhere.

See the general, framework-agnostic fix: https://vibecheck.wcgw.fun/fix/missing-charset.md

---

Fix guide from VibeCheck — https://vibecheck.wcgw.fun/fix/missing-charset. Full site index for LLMs: https://vibecheck.wcgw.fun/llms.txt