Syllabus

HTML Character Sets: UTF-8 & Encoding Explained

Badar KhalilUpdated September 27, 2026 2 min read

HTML Character Sets: UTF-8 & Encoding Explained

Focus keyword: HTML character encoding UTF-8 — critical knowledge for avoiding garbled text and ensuring your site displays correctly for users worldwide.

1. What Is Character Encoding?

A character set (charset) maps numbers to characters so computers can store and display text. Browsers need to know which character set a page uses to render text (including special characters, accented letters, and non-Latin scripts like Arabic, Chinese, or Urdu) correctly.

2. Why UTF-8 Is the Standard

UTF-8 is the dominant, W3C-recommended encoding for the web because it can represent virtually every character and symbol from every language in the world — including emojis — while remaining backward-compatible with ASCII. It's used by the vast majority of websites globally today.

3. Declaring Encoding in HTML

You declare the charset using a meta tag, which must be the very first element inside <head>: <meta charset="UTF-8">. Placing it first ensures the browser reads it before parsing any other text.

4. What Happens Without Proper Encoding?

Missing or incorrect charset declarations cause mojibake — garbled, unreadable text (e.g., accented letters turning into strange symbols like Ã©). This is a common, easily preventable bug.

5. Server-Level Encoding

Beyond the HTML meta tag, servers can also send the charset via the HTTP Content-Type header (e.g., text/html; charset=UTF-8), which takes precedence — both should match to avoid conflicts.

6. Saving Files as UTF-8

Your code editor must also save the actual file using UTF-8 encoding (without BOM, typically) — declaring the charset in HTML alone isn't enough if the file itself is saved differently.

Try it Yourself HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>UTF-8 Encoded Page</title>
</head>
<body>
  <p>English: Hello World</p>
  <p>Urdu: &#1587;&#1604;&#1575;&#1605;</p>
  <p>French: Caf&eacute; &eacute;t&eacute;</p>
  <p>Emoji: &#128522;</p>
</body>
</html>

Output

Press Run to execute.

Try it Yourself HTML

<!-- WITHOUT proper charset, special characters can break -->
<!DOCTYPE html>
<html>
<head>
  <!-- Missing meta charset! -->
  <title>Broken Encoding Example</title>
</head>
<body>
  <p>This may render as mojibake: Caf&Atilde;&copy;</p>
</body>
</html>

Output

Press Run to execute.

Exercise: Fix the Missing Charset BugHTML

The page below displays accented characters incorrectly because it's missing a charset declaration. Add the correct meta charset tag as the very first element inside head.

Try it Yourself HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <title>My Café Page</title>
</head>
<body>
  <p>Welcome to my café!</p>
</body>
</html>

Output

Press Run to execute.

Show expected output

A meta charset='UTF-8' tag added as the first child element inside head, before the title tag.

This is a self-check — compare your result with the expected output above.

Quiz: HTML Character Sets Quiz Pass 70%

Loading quiz…

Was this page helpful?