HTML Encoding is the process of converting characters into a format that can be safely transmitted over the internet and displayed correctly by browsers.
Every webpage you see is made up of characters. Each character (A, B, 1, $, ₹, ©, 😍, etc.) has a specific numeric value stored in computer memory.
Browsers use character encoding to read those numeric values and show the right symbols.
Each character you type is represented by a code number.
- The letter A → Unicode
U+0041→ Decimal 65 - The emoji 😊 → Unicode
U+1F60A→ Decimal 128522
The character set is specified in the <meta> tag:
<meta charset="UTF-8">It interprets those numbers according to UTF-8 rules and displays them properly.
Common Types of HTML Encoding
| Encoding Type | Description | Recommended |
|---|---|---|
| UTF-8 | Universal standard for all modern websites; supports all languages and emojis. | Yes |
| ISO-8859-1 (Latin-1) | Older standard used for English and Western European languages. | Legacy only |
| UTF-16 | Supports extended Unicode characters but heavier in size. | Rarely used |
| ASCII | Basic English letters and numbers only. | Outdated |
Declaring Character Encoding in HTML
To declare the encoding type in an HTML page, use the <meta> tag inside the <head> section.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <!-- Character encoding -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Encoding Example</title>
</head>
<body>
<h1>HTML Encoding Example</h1>
<p>Hello (English)</p>
<p>नमस्ते (Hindi)</p>
<p>© ™ ₹ 😍</p>
</body>
</html>Example of Without UTF-8 Encoding
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>UTF-8 demo</title>
</head>
<body>
<p>नमस्ते (Hello in Hindi)</p>
</body>
</html>Wrong Output: नमसà¥à¤¤à¥‡
Correct Fix: <meta charset=”UTF-8″>
Now it displays properly as: नमस्ते