DocHero
Lesson 49 +10 XP

HTML Charsets

HTML Charsets

A charset is the "alphabet" a page uses to show characters. Pick the right one and every letter, symbol, and emoji shows up!

What is a character set?

A character set maps numbers to characters. Think of it like a translator book: "number 65 means the letter A."

The most important one: UTF-8

UTF-8 is the modern standard. It can show characters from almost every language and all the emojis.

<meta charset="UTF-8">

Put it in the <head>. This one line handles almost everything!

The <meta charset> tag

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <p>Hello! ¡Hola! こんにちは 😄</p>
</body>
</html>

What if you don't set it?

The browser has to guess. Guesses can be wrong, and you'll see weird symbols like é instead of é. Setting the charset fixes that!

ASCII (the old days)

The first character set, ASCII, had only 128 characters: letters, numbers, and basic punctuation. No emojis, no accents!

ANSI and others

Over time, different sets appeared (like Windows-1252). They added some characters but still weren't enough. Then Unicode came along and fixed everything.

Unicode / UTF-8

Unicode has a code for EVERY character in the world. UTF-8 is how we store it on the web. It's the current best practice, hands down.

TL;DR

  • A charset is a translator book from numbers to characters.
  • Use <meta charset="UTF-8"> in the head.
  • UTF-8 supports all languages and emojis.
  • Without it, characters can look like gibberish.
  • UTF-8 is the modern standard.