HTML Charsets

🔤 What is a Charset?

A charset (character set) tells the browser how to interpret and display text characters. UTF-8 is the most common and recommended charset for web pages.


<!-- Always include charset in head -->
<meta charset="UTF-8">

Result:

✅ Proper character encoding set

Text displays correctly: Hello, 世界, مرحبا

Common Character Sets

🌍

UTF-8

Universal encoding for all languages

<meta charset="UTF-8">
<!-- Supports all characters -->

🇺🇸

ASCII

Basic English characters only

<meta charset="ASCII">
<!-- Limited to English -->

🌐

ISO-8859-1

Western European languages

<meta charset="ISO-8859-1">
<!-- European characters -->

📱

UTF-16

16-bit Unicode encoding

<meta charset="UTF-16">
<!-- Less common for web -->

🔹 Setting Charset in HTML

Always declare charset early in the head section:

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Charset should be first or early in head -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Page</title>
</head>
<body>
    <h1>Hello World! 🌍</h1>
    <p>Supports: English, Español, 中文, العربية</p>
</body>
</html>

🔹 Why UTF-8 is Recommended

UTF-8 is the best choice for modern web development:

<!-- UTF-8 supports all these characters -->
<p>English: Hello</p>
<p>Spanish: Hola</p>
<p>Chinese: 你好</p>
<p>Arabic: مرحبا</p>
<p>Emojis: 😊🎉💻</p>
<p>Symbols: ©®™€$</p>

Output:

English: Hello

Spanish: Hola

Chinese: 你好

Arabic: مرحبا

Emojis: 😊🎉💻

Symbols: ©®™€$