HTML Charset

HTML Charset: Preventing Broken Text with UTF-8 Encoding

A character set (charset) maps raw binary bytes stored on disk into readable letters, numbers, and punctuation on screen. Modern HTML5 standardizes on UTF-8, an encoding capable of representing virtually every writing system, math symbol, and emoji in Unicode.

Declaring UTF-8 in the Head Section

Place the meta charset declaration as the very first element inside head. HTML5 requires the encoding declaration to appear within the first 1,024 bytes of the file so the browser knows how to decode the page title and body text immediately.

When the browser's declared charset mismatches the file's saved encoding (for example, interpreting UTF-8 bytes as legacy ISO-8859-1 or Windows-1252), accented letters and punctuation break into garbled characters known as mojibake.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multilingual UTF-8 Page</title>
</head>
<body style="font-family: system-ui, sans-serif; padding: 20px;">
    <h2>Global Text Support</h2>
    <p>English: Hello, World!</p>
    <p>Bengali: হ্যালো, বিশ্ব!</p>
    <p>Japanese: こんにちは世界</p>
    <p>Spanish: ¡Hola, señor! Café &euro;5</p>
</body>
</html>

Matching File Encoding and HTTP Headers

Make sure three layers all agree on UTF-8: your code editor's save format (VS Code defaults to UTF-8), your meta charset="UTF-8" tag, and your web server's Content-Type: text/html; charset=UTF-8 HTTP response header. HTTP headers take highest priority if they conflict with the HTML meta tag.

Common Mistakes to Avoid

• Saving source files as ANSI or Windows-1252 in old editors: Even with meta charset="UTF-8", non-UTF-8 file bytes display broken diamonds.
• Using the verbose HTML4 syntax: Replace old http-equiv="Content-Type" meta tags with the clean HTML5 meta charset="UTF-8" declaration.
• Placing meta charset below long comments or styles: Always keep it right inside the top of head.

Frequently Asked Questions

Is UTF-8 case-sensitive in HTML?

No. Both UTF-8 and utf-8 are treated identically by HTML5 parsers, though uppercase UTF-8 is the common convention.

Why do replacement diamonds appear on some web pages?

That symbol appears when a browser receives byte sequences that are invalid in the active character encoding—usually a mismatch between database/file encoding and UTF-8.