charset and Unicode Handling Special Characters
Use UTF-8 and HTML entities to display any character correctly.
charset and Unicode Handling Special Characters is a free HTML Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
The charset Declaration
Every HTML document must declare its character encoding. The standard is UTF-8: <meta charset="utf-8"> as the very first element of <head>. Without it, the browser guesses, which often goes wrong for non-ASCII text.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Page</title>Why UTF-8?
UTF-8 encodes every Unicode character: every script, every emoji, every symbol. It is backward-compatible with ASCII (a-z, 0-9 stay single-byte) and is the dominant encoding on the modern web — over 98% of pages by 2024 are UTF-8.
Placement is Critical
The charset meta tag must appear in the first 1024 bytes of the document — typically the first line of <head>. The browser sniffs the encoding from those bytes; declaring charset later may have no effect on the sniff result.
Save Files in UTF-8
The meta tag declares the encoding; your editor must actually save the file in that encoding. VS Code, IntelliJ, and Sublime all default to UTF-8 in modern versions. Files saved as Windows-1252 or ISO-8859-1 produce mojibake (garbled characters) even with the right meta tag.
HTML Entities
Special HTML characters (<, >, &, ") must be escaped to prevent parser confusion: < for <, > for >, & for &, " for ". Inside attribute values, " is mandatory when the value is quoted with double quotes.
Numeric Character References
Any Unicode character can be referenced by its code point: ☃ or ☃ for snowman (☃). Use when typing the character directly is impractical (rare symbols, control characters) but prefer the literal Unicode character when the editor supports it.
Emoji and Surrogate Pairs
Emoji are Unicode characters above U+FFFF and are represented as surrogate pairs in UTF-16 (the encoding used inside JavaScript strings). UTF-8 encodes them as 4-byte sequences. With charset="utf-8" set, emojis render natively without entities.
Common Encoding Bugs
"Don't" rendering as "Donât" means the file is being interpreted as Latin-1 but was saved as UTF-8. Fix by saving the file as UTF-8 and ensuring <meta charset="utf-8"> is present. Modern browsers default to UTF-8 only when the meta tag is missing AND the file is plausibly UTF-8.
HTTP Content-Type Header
The server can also declare the encoding via the response header: Content-Type: text/html; charset=utf-8. The header takes precedence over the meta tag, so misconfigured servers can produce encoding bugs even on perfectly written HTML.
Working with Forms
Forms submit using the page's encoding by default. UTF-8 pages send UTF-8 form data, which the server should decode as UTF-8. Mismatch between page encoding and server decoding is a common source of mangled user input on multilingual sites.
Avoid BOM
UTF-8 files may begin with a byte-order mark (BOM, 0xEF 0xBB 0xBF). Most browsers tolerate it but some tools and CDNs do not — and the BOM appears as visible character in some text editors. Save files as "UTF-8 without BOM" to avoid surprises.
Knowledge Check
Why must appear within the first 1024 bytes of an HTML document?
Summary
Declare <meta charset="utf-8"> as the first child of <head> and save files in UTF-8. UTF-8 encodes every Unicode character (including emoji and all scripts). Escape <, >, &, " as entities; use numeric references for rare characters. Beware HTTP Content-Type overriding the meta tag and BOM appearing as visible character in some tools.
Frequently asked questions
Is the “charset and Unicode Handling Special Characters” lesson free?
Yes — the full text of “charset and Unicode Handling Special Characters” is free to read here on the web, and the HTML Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML Academy course, upgrade to CoddyKit PRO.
What will I learn in “charset and Unicode Handling Special Characters”?
Use UTF-8 and HTML entities to display any character correctly. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start HTML Academy?
No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “charset and Unicode Handling Special Characters” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this HTML Academy lesson?
Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- The lang Attribute and Screen Readers
- dir=rtl for Right-to-Left Text
- The bdi and bdo Elements
- charset and Unicode Handling Special Characters