HTML Zero → Mastery — Lesson 11: The <meta charset> Tag

Learning Goals

Explain what character encoding is and why it matters.
Use <meta charset="UTF-8"> correctly in your HTML pages.
Recognize issues caused by missing or incorrect encoding.
Understand UTF-8 as the modern standard for the web.

Part 1 — What is Character Encoding?

Character encoding maps text (letters, symbols, emojis) to bytes for computers to store and transmit. Without it, browsers don’t know how to display your text properly.

Common encodings in history included ASCII and ISO-8859-1. Today, UTF-8 is the default and supports nearly all characters worldwide.

Part 2 — Using `<meta charset>`

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Example with UTF-8</title>
  </head>
  <body>
    <p>Hello, world! ☕😊</p>
  </body>
</html>

Result: The coffee cup ☕ and smiley 😊 display correctly thanks to UTF-8.

Part 3 — Common Mistakes

❌ Omitting the charset → browser may guess wrong, leading to “mojibake” (garbled text).
❌ Using outdated encodings like ISO-8859-1.
❌ Placing <meta charset> after content → it must be among the first things in <head>.

Quick Quiz

What does UTF-8 stand for?
Where must <meta charset> be placed in your HTML?
What happens if encoding is missing or wrong?

Sample Answers

“Unicode Transformation Format — 8-bit.”
At the very top of the <head>.
Text may display as random symbols (“mojibake”).

Mini Project — Multilingual Greeting

Create a page with greetings in multiple languages (e.g., English, Spanish, Arabic, Chinese, Hindi). Save with <meta charset="UTF-8"> and confirm all render correctly.

Lesson 11 Dictionary

C
<meta charset>: Declares character encoding of the document. Use UTF-8.
M
Mojibake: Unreadable garbled characters shown when encoding is wrong.
U
UTF-8: Universal encoding supporting nearly all characters, recommended for HTML.