INTRODUCTION
Have you ever opened a webpage and seen something like ₹ instead of ₹, or strange symbols where normal text should appear?
This usually happens when the browser and the webpage disagree about character encoding.
The good news is that the fix is often simple: use the correct charset, save your file with the matching encoding, and make sure your server sends the right information.
In this guide, we’ll understand HTML charset through practical examples and learn how to avoid common encoding problems.
What Is HTML Charset?
HTML charset specifies the character encoding an HTML document uses.
Computers store text as bytes. Character encoding tells the browser how to convert those bytes into readable characters.
For example, a webpage might contain:
Hello, नमस्ते, こんにちは, ₹, ©
The browser needs to interpret the underlying bytes correctly to display this text as intended.
Think of encoding as a language agreement between your HTML file and the browser. If both use the same encoding, the text displays correctly.
Why Is UTF-8 So Important?
UTF-8 is the recommended character encoding for modern HTML documents.
It can represent characters from many writing systems, including:
- English
- Hindi
- Arabic
- Japanese
- Chinese
- Mathematical symbols
- Currency symbols
- Emojis
For example:
- English: Hello
- Hindi: नमस्ते
- Japanese: こんにちは
- Arabic: مرحبا
- Symbols: ₹ © ∑
This makes UTF-8 a practical choice for websites that support multiple languages or special characters.
How to Set UTF-8 in HTML
Add the following element inside the section:
Here is a complete example:
<!DOCTYPE html>
<meta charset="UTF-8">
<title>UTF-8 Character Encoding</title>
<h1>Welcome to My Website 🌐</h1>
<p>English: Hello World!</p>
<p>Hindi: नमस्ते दुनिया!</p>
<p>French: Bonjour, ça va?</p>
<p>Currency: ₹999</p>
<p>Emoji: 😀 🚀 ❤️</p>
The browser uses this declaration to understand how the document’s characters should be interpreted.
Best practice: Place the charset declaration near the beginning of the so the browser can identify the encoding early.
A Real-World Example: When Text Breaks
Suppose you want to display the Indian rupee symbol:
Product price: ₹999
If the file is saved using one encoding but the browser interprets it using another, the symbol may appear incorrectly.
For example, you might see:
Product price: ₹999
The exact result depends on the encoding mismatch, but the underlying problem is the same: the bytes are being interpreted incorrectly.
How to Fix It
Add to the HTML document.
Save the file using UTF-8 encoding.
Ensure the server sends a matching charset.
Refresh the page and test the characters again.
HTML Charset vs. HTTP Charset
There are two common places where character encoding can be declared.
1. HTML Meta Tag
This declaration is written inside the HTML document.
2. HTTP Response Header
A web server can also send the encoding through an HTTP response header:
Content-Type: text/html; charset=UTF-8
The header tells the browser how to interpret the response.
Important: The HTML file’s actual encoding and the server’s declared encoding should match. If they do not, the browser may display unexpected characters.
Common Character Encoding Types
ASCII
ASCII is an older character encoding standard that supports basic English letters, numbers, punctuation, and control characters.
Example:
A B C 1 2 3 ! @ #
It is useful for basic English text but cannot represent most international characters.
ISO-8859-1
ISO-8859-1, also called Latin-1, supports many Western European characters.
However, it does not cover the full range of characters needed for modern multilingual websites.
UTF-8
UTF-8 supports a very wide range of characters and is the standard choice for most modern HTML documents.
For new HTML projects, UTF-8 is generally the best option.
How to Check Encoding in Visual Studio Code
If your webpage displays strange characters, check how the file is saved.
In Visual Studio Code:
Open your HTML file.
Look at the encoding indicator in the bottom-right corner.
Click it.
Choose Save with Encoding.
Select UTF-8.
Save the file and reload the webpage.
This helps ensure that the file’s actual encoding matches the charset declaration.
Common HTML Charset Mistakes
Mistake 1: Forgetting the Charset Declaration
<title>My Webpage</title>
Better:
<meta charset="UTF-8">
<title>My Webpage</title>
Mistake 2: Saving the File in a Different Encoding
Declaring UTF-8 does not automatically convert a file that was saved using another encoding.
Fix: Save the HTML file as UTF-8.
Mistake 3: Incorrect Server Header
Your HTML may contain:
But the server could send:
Content-Type: text/html; charset=ISO-8859-1
This mismatch can cause encoding problems.
Fix: Configure the server to send the correct charset.
Mistake 4: Assuming Every Symbol Needs an HTML Entity
UTF-8 allows you to write many characters directly:
Price: ₹999
You can also use HTML character references when appropriate:
Price: ₹999
Both can represent the rupee symbol, but UTF-8 makes writing multilingual text directly much easier.
A Practical Multilingual HTML Example
<!DOCTYPE html>
<meta charset="UTF-8">
<title>Multilingual Webpage</title>
<h1>Welcome to My Website</h1>
<p>English: Hello!</p>
<p>Hindi: नमस्ते!</p>
<p>Japanese: こんにちは!</p>
<p>Arabic: مرحبا!</p>
<p>Currency: ₹ € ¥</p>
This example demonstrates how one HTML document can contain text from several languages.
HTML Charset Best Practices
Use UTF-8 for modern HTML documents.
Declare the charset near the beginning of the .
Save your HTML files using UTF-8.
Keep the server’s Content-Type charset consistent with the file.
Test special characters and multilingual text.
Avoid relying on automatic encoding detection.
Use a text editor that clearly shows the file encoding.
Frequently Asked Questions
What is the default charset in HTML?
Modern HTML documents should explicitly declare their encoding rather than relying on a default or browser guess. UTF-8 is the recommended choice.
Is UTF-8 the same as Unicode?
No. Unicode is a character standard that assigns characters and code points, while UTF-8 is an encoding used to represent those characters as bytes.
Where should I put the charset tag?
Place it inside the section, preferably near the beginning:
Can UTF-8 display emojis?
Yes. UTF-8 supports emojis and many other modern characters.
Why are Hindi or other language characters appearing incorrectly?
This can happen when the file encoding, HTML charset, or server response encoding does not match. Check all three.
Conclusion
HTML charset is a small but essential part of web development. It tells the browser how to interpret the characters in your webpage and helps prevent broken text.
For most modern websites, UTF-8 is the recommended encoding because it supports a wide range of languages, symbols, and special characters.
By declaring UTF-8 correctly, saving files with the matching encoding, and configuring your server properly, you can avoid many common character-display problems.
For more examples and related HTML concepts, explore the HTML Charset tutorial on TPointTech.
Top comments (0)