An HTML charset (character encoding) tells the browser how to read the bytes in your .html file as letters, numbers, and symbols. Without a clear declaration, accents, emoji, and other languages can appear as garbage text.
In the <head>, add <meta charset="UTF-8"> as early as possible. In HTML5, UTF-8 is the encoding you should declare.
The charset declaration must appear within the first 1024 bytes of the document so the browser can decode the rest of the file correctly—including the title and body text.
Unicode is the character catalog; UTF-8 is how those characters are stored as bytes; entities (like &) are escape codes inside markup. See also Unicode and HTML entities.
Every modern HTML page should include <meta charset="UTF-8"> near the top of <head>.
Declaring UTF-8 is not enough if your editor saved the file as ANSI / Windows-1252. Save as UTF-8 too.
This page teaches encoding for whole HTML documents. The charset attribute reference covers the attribute itself in more isolation.
Declare encoding in <head> (HTML5 form first):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My page</title>
</head>
<body>
<p>Café · こんにちは · Hello 🌍</p>
</body>
</html><!-- Older equivalent (prefer meta charset in new pages) -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">Ideas that show up on every UTF-8 page:
| Concept | Role in HTML |
|---|---|
<meta charset> | Declares the document encoding inside <head> |
| UTF-8 | Required / recommended encoding for HTML5 documents |
| First 1024 bytes | Charset meta must appear early enough for the browser to find it |
| File encoding | How your editor saves the .html file on disk |
lang | Language of the page (pairs with encoding for accessibility) |
| Mojibake | Garbled characters from an encoding mismatch |
| Encoding | Good for | Use today? |
|---|---|---|
| ASCII | Basic English letters and digits | Too limited alone |
| ISO-8859-1 / Windows-1252 | Western European text (legacy) | Avoid for new sites |
| UTF-8 | Almost all languages + emoji | Yes — default choice |
| Task | HTML / action |
|---|---|
| Declare UTF-8 (HTML5) | <meta charset="UTF-8"> |
| Legacy form | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
| Save the file | UTF-8 in your editor (not ANSI) |
| Language | <html lang="en"> — see Language Codes |
| Markup-safe characters | HTML entities for <, &, etc. |
Follow this checklist for every new document:
<!DOCTYPE html> and <html lang="…">.<head> and add <meta charset="UTF-8"> first (or very near the top).<title> and other meta tags after charset.Content-Type header as well.| Goal | Do this |
|---|---|
| Show accents / emoji | UTF-8 meta + UTF-8 saved file |
| Mix languages | UTF-8 page + sensible lang values |
Write < in text | Use < (encoding alone is not enough) |
| Fix é / © garbage | Align declaration, file save format, and server header |
Sample UTF-8 text as it should appear when charset and file encoding agree. Compare with a typical mojibake look when decoding is wrong.
Six patterns: declare charset, accents, emoji, multilingual text, entities with UTF-8, and a full document.
<head>
<meta charset="UTF-8">
<title>UTF-8 page</title>
</head>head.<h1>Café & naïve</h1>
<p>El niño comió jalapeños. Ça va bien!</p><h1>Hello 🌍</h1>
<p>Price: €19 · Rating: ★★★★☆ · Check ✓</p><head>
<meta charset="UTF-8">
</head>
<body>
<h1>Multilingual UTF-8</h1>
<p>English: Hello</p>
<p>Japanese: こんにちは</p>
<p>Arabic: مرحبا</p>
<p>Hindi: नमस्ते</p>
</body>html (or sections) helps accessibility—see Language Codes.dir="rtl" where appropriate.<head>
<meta charset="UTF-8">
</head>
<body>
<h1>Entities & UTF-8</h1>
<p>Copyright: © 2026</p>
<p>Less than: <tag></p>
<p>Numeric ref: é = é</p>
</body><, &, and helpful for some symbols.head even when you use entities.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Global Website</title>
</head>
<body>
<header><h1>Welcome / Bienvenue / 欢迎</h1></header>
<main>
<p>UTF-8 lets one page display text from many languages.</p>
</main>
</body>
</html>Most charset bugs are declaration/file mismatches or a meta tag placed too late.
Classic mojibake. Always save the .html file as UTF-8 in the editor.
Keep meta charset within the first 1024 bytes—usually the first line in head.
Use UTF-8 for new HTML5 projects. Legacy encodings limit languages and emoji.
Browsers may guess wrong. Always declare UTF-8 explicitly.
Prefer aligning the server Content-Type charset with UTF-8 as well.
< and &Those characters still need entities (<, &) inside HTML text.
meta charset and UTF-8 HTML documents are Baseline and supported everywhere modern browsers run. Always declare encoding early in head.
Character encoding declarations via meta charset work across all current browsers.
Bottom line: Put meta charset="UTF-8" first in head, save the file as UTF-8, and your text stays readable worldwide.
head.< and & inside markup.One line: Put <meta charset="UTF-8"> first in head, save the file as UTF-8, and your HTML can show the world’s text correctly.
Open a Try It demo and confirm accents, emoji, and multilingual text with UTF-8.
8 people found this page helpful