HTML Tutorial: HTML Charsets
Learn about HTML character sets (charsets) and how to ensure proper display of text, symbols, and emojis with colorful examples
Character sets (charsets) tell the browser how to interpret text in your HTML page. UTF-8 is the most common and recommended charset for modern web pages.
1️⃣ Declaring Charset in HTML
INPUT:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Charset Example</title>
</head>
<body>
<p>Hello, world! 🌍</p>
</body>
</html>
OUTPUT:
Hello, world! 🌍
✔️ Use <meta charset="UTF-8"> in the head
✔️ Ensures proper display of emojis, accented characters, and symbols
2️⃣ Using Other Charsets
INPUT:
<meta charset="ISO-8859-1">
<p>French: café, résumé</p>
<p>German: über, Straße</p>
OUTPUT:
French: café, résumé
German: über, Straße
✔️ ISO-8859-1 supports Western European languages ✔️ Modern websites should prefer UTF-8 for wider compatibility
3️⃣ Displaying Emojis with Charset
INPUT:
<meta charset="UTF-8">
<p>Smiley: 😄, Heart: ❤️, Star: ⭐</p>
OUTPUT:
Smiley: 😄, Heart: ❤️, Star: ⭐
✔️ UTF-8 allows all emojis to display correctly ✔️ Without proper charset, emojis may appear as � or garbled characters
4️⃣ Best Practices for HTML Charsets
- Always use
<meta charset="UTF-8">in the <head> - Place the charset meta tag as the first element in <head>
- UTF-8 is recommended for multilingual and emoji support
- Test your website on different browsers to ensure proper rendering
- Avoid using outdated charsets unless necessary for legacy systems
🚀 What’s Next?
👉 HTML URL Encode
Next lesson will cover:
- Encoding URLs properly in HTML
- Special characters in URLs
- Using % encoding for spaces, symbols, and non-ASCII characters
Proper use of HTML charsets ensures all text, symbols, and emojis display correctly across devices, improving readability and user experience.