HTML Charsets
Character encoding tells the browser how to interpret the bytes of your HTML file. Always declare UTF-8.
Charset and unicode
EXAMPLE
<!DOCTYPE html> <html lang='en'> <head> <!-- Must be the first thing inside <head>, within the first 1024 bytes --> <meta charset='UTF-8' /> <title>Charsets in practice</title> </head> <body> <!-- With UTF-8, almost any character works directly --> <h1>Hello, world - 你好 - مرحبا - Привет</h1> <p>Emoji works too: 🎉 🚀 ✨</p> <p>Math symbols: π ≈ 3.14159, ∑, ∞, ÷</p> <p>Punctuation: 'curly quotes', em-dashes -, ellipses ...</p> <!-- HTML entities are still useful for reserved characters and ambiguity --> <p>Render literal <tag> via entities: <div></p> <p>Use & instead of & inside attribute values: href='/?a=1&b=2'</p> <!-- Named entities (some common ones) --> <p>© 2026 — All rights &reserved;</p> <p>Non-breaking space: a b (won't wrap)</p> <p>Soft hyphen: long­word (will hyphenate if needed)</p> <!-- Numeric entities (decimal or hex) --> <p>☃ ☃ (both render a snowman)</p> </body> </html>
Why it matters
UTF-8 is the only charset you need in 2026. Declare it explicitly in the meta tag and in your HTTP Content-Type header. Save your files as UTF-8 without BOM. Emoji and any language just work; you only reach for HTML entities for <, >, &, and the occasional non-breaking space.
Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.
Example
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Charsets</title>
</head>
<body>
<h1>HTML Charsets</h1>
<p>This is a demo page for the "HTML Charsets" lesson.</p>
</body>
</html>
Try it Yourself »
Exercise
Declare the standard universal character set in the head.
<meta charset="
">
Three letters then a number.
Discussion
Loading…