HTML Charsets

❮ Previous Next ❯
Lesson 49 of 58

For your web page to display correctly, the browser needs to know which character set you are using. The character set determines how letters, numbers, symbols, and emojis are shown.

The HTML charset Attribute

The character set is specified in the <meta> tag inside the <head> section. For modern websites, you should always use UTF-8:

Required Meta Tag 
<meta charset="UTF-8">

UTF-8 covers almost every character and symbol in the world. It supports English, Arabic, Chinese, Japanese, Korean, Russian, emojis, and thousands of other characters.

Tip: Always include <meta charset="UTF-8"> in every HTML page you create. It is the standard and prevents character display issues.

What Happens Without UTF-8?

If you forget the charset tag or use the wrong one, special characters and emojis might show up as weird symbols, question marks, or empty boxes.

With UTF-8 (Correct)

Without UTF-8, those same characters might not display correctly on some browsers.

A Brief History of Character Sets

Before UTF-8 became the standard, there were many different character sets. Here is a quick history:

ASCII (1960s)

ASCII was the first character encoding standard. It defined 128 characters: English letters (a-z, A-Z), numbers (0-9), and basic symbols like ! @ # $ %.

But ASCII could not handle other languages like Arabic, Chinese, or even emojis.

ANSI (Windows-1252)

Microsoft created ANSI for Windows. It was similar to ASCII but added more special characters. It was used mostly on Windows computers.

ISO-8859-1 (HTML 4 Standard)

This was the official character set for HTML 4. It supported 256 characters, including many European language letters.

UTF-8 (Modern Standard)

UTF-8 is now the standard for HTML5. It supports over 1 million characters, including every language in the world and all emojis.

Character Set Comparison

Character Set Number of Characters Languages Supported
ASCII 128 English only
ANSI (Windows-1252) 256 English + Western European
ISO-8859-1 256 English + Western European
UTF-8 Over 1 million All languages + emojis

How to Specify Character Set in Different HTML Versions

HTML5 (Modern – Use this):

<meta charset="UTF-8">

HTML 4 (Old way):

<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">

For Windows-1252 (ANSI):

<meta charset="Windows-1252">
Note: Always use UTF-8 for new websites. The old character sets are only mentioned for historical context. You should not use them unless you have a very specific reason.

UTF-8 Character Examples

UTF-8 supports many different alphabets and symbols. Here are some examples:

Basic Latin

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

! @ # $ % ^ & * ( ) – _ = +

Latin Extended A

Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č

Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě

Greek Alphabet

Α α Β β Γ γ Δ δ Ε ε Ζ ζ

Η η Θ θ Ι ι Κ κ Λ λ Μ μ

Ν ν Ξ ξ Ο ο Π π Ρ ρ Σ σ

Cyrillic (Russian)

А а Б б В в Г г Д д Е е

Ё ё Ж ж З з И и Й й К к

Л л М м Н н О о П п Р р

Arabic

ا ب ت ث ج ح خ د ذ ر ز

س ش ص ض ط ظ ع غ ف ق

ك ل م ن ه و ي

Chinese / Japanese / Korean

你好世界 (Chinese)

こんにちは世界 (Japanese)

안녕하세요 세계 (Korean)

Mathematical Symbols

∀ ∃ ∄ ∅ ∈ ∉ ∋ ∌ ∏ ∑

− × ÷ ± √ ∞ ≈ ≠ ≤ ≥

∂ ∇ ∫ ∮ ∯ ∰ ∱ ∲ ∳

Arrows

← ↑ → ↓ ↔ ↕ ↖ ↗ ↘ ↙

↚ ↛ ↜ ↝ ↞ ↟ ↠ ↡ ↢ ↣

⇐ ⇑ ⇒ ⇓ ⇔ ⇕ ⇖ ⇗ ⇘ ⇙

Emojis

😀 😁 😂 🤣 😃 😄 😅 😆 😉 😊

😍 🥰 😘 😗 😙 😚 😋 😛 😜 🤪

❤️ 🧡 💛 💚 💙 💜 🖤 🤍 🤎 💔

Special Characters Using Entity Numbers

You can also display special characters using their entity numbers. This is useful when you cannot type the character directly on your keyboard.

Entity Numbers Example

The format is &#number; where “number” is the character’s Unicode value.

UTF-8 in Practice: Complete Example

Here is a complete webpage showing UTF-8 in action with different languages:

Multilingual Page with UTF-8

Quick Summary

  • Always include <meta charset="UTF-8"> in every HTML page.
  • UTF-8 supports over 1 million characters including every language and all emojis.
  • ASCII was the first character set (128 characters, English only).
  • ANSI and ISO-8859-1 were used in older systems (256 characters).
  • Without proper character encoding, text may appear as garbled symbols (mojibake).
  • You can display any character using its entity number: &#number;

What Just Happened? Let Me Explain

  • Think of character sets like translation tables. The browser sees a number and looks up what character that number represents.
  • UTF-8 has a huge translation table that covers almost everything. ASCII has a tiny table that only covers English.
  • When you see � or other weird symbols on a website, it usually means the page is using the wrong character set.
  • Always save your HTML files with UTF-8 encoding. Most code editors do this by default.
  • If you work with users from around the world, UTF-8 is essential. It ensures everyone can read your content.
Tip: In VS Code, you can check the character set at the bottom right of the window. It should say “UTF-8”. If it says something else, click it and select “Save with Encoding” then choose UTF-8.

HTML Charset Reference

Here are the character sets we covered in this chapter:

Character Set Meta Tag When to Use
UTF-8 <meta charset="UTF-8"> All new websites (recommended)
ISO-8859-1 <meta charset="ISO-8859-1"> Legacy HTML 4 websites only
Windows-1252 <meta charset="Windows-1252"> Legacy Windows applications only
ASCII Default without meta tag English-only content (not recommended)
❮ Previous Next ❯
Lesson 49 of 58