HTML Character Encoding.

Character encoding tells the browser how to convert the bytes of your file into the characters you see on screen. UTF-8 is the universal standard for the web.

The Essentials

The <meta charset='UTF-8'> tag is the standard way to set encoding.

UTF-8 covers almost all characters and symbols from all languages.

It must be placed within the first 1024 bytes of your HTML file.

Without it, special characters like ©, €, or emojis may appear as broken boxes ().

Encoding ensures your site looks the same on every computer in the world.

The server can also send encoding information via HTTP headers.

Professional Insights

Why UTF-8 Won the Web

Before UTF-8, there were hundreds of conflicting encodings (like ISO-8859-1). If a browser used the wrong one, the text became unreadable 'mojibake'. UTF-8 unified everything into one system.

Broken Character 'Mojibake'

If you see symbols like 'Ã©' instead of 'é', it means your file was saved in one encoding but the browser is reading it in another. Setting the charset meta prevents this.

ASCII vs. UTF-8

ASCII is a very old system that only supports English characters. UTF-8 is 'backwards compatible' with ASCII but adds support for over 1 million additional characters.

Byte Order Mark (BOM)

Some text editors add a hidden 'BOM' at the start of a file. While UTF-8 doesn't require it, some older systems might trip over it. Modern web development usually avoids BOM.

Critical Pitfalls

Placing the <meta charset> tag too low in the <head>—it should be the very first tag.

Saving your file as 'UTF-16' or 'ANSI' in your editor but declaring 'UTF-8' in the HTML.

Thinking that 'lang=en' is the same as character encoding. They are completely different!

Forgetting the charset tag entirely, leading to unpredictable 'broken' text for international users.

Interactive Lab

Sprint Tasks

Add the meta tag to set the character encoding to UTF-8

Ensure it is placed at the very top of the <head>

Loading editor...

Production Preview