HTML HTML Character Encoding Mismatches: How to Diagnose Them

If accented letters turn into strange symbols, the bytes may be decoded using the wrong character encoding. Saving the file as UTF-8 and declaring UTF-8 near the top of head solves most beginner cases.

What You Need to Know

The declaration cannot repair text that was already damaged or saved with the wrong bytes. Confirm the editor's encoding and the HTTP response headers when a server is involved.

Example: See It in Action

Here is a simple example to experiment with. Type it, save the file, and check what the browser displays.

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Text Encoding</title>
    </head>
    <body>
        <p>Café, résumé, and π</p>
    </body>
</html>

Let’s Understand the Example

• The html element holds the complete page and usually names its language.
• The head contains useful page information for the browser, such as its title and character encoding.
• A meta element gives the browser short information about the document. Different attributes control different hints.
• Lang tells tools which language the text uses, helping pronunciation and language-aware features.
• Charset tells the browser how to decode the page text; UTF-8 is the usual choice.

Some of the markup affects the browser tab or page settings rather than appearing as visible text. Check the browser tab and inspector as well as the page itself.

What Should You See?

The browser tab should show “Text Encoding”.

Try removing one piece of markup in a scratch copy, refresh the page, and compare the behavior. This is often the fastest way to understand what that piece contributes.

Try It Yourself

1. Type café in the page, save as UTF-8, and confirm it displays correctly.
2. Save your changes, open or refresh the page, and compare the result with the original example.
3. Tell a friend what your change did. If you are not sure, undo it, refresh the page, and compare.

Common Beginner Mistakes

• Adding a charset meta element while leaving the actual file saved in an incompatible encoding.
• Avoid picking tags just for their default bold, italic or spaced appearance. Use CSS for presentation.

Key Takeaways

• If accented letters turn into strange symbols, the bytes may be decoded using the wrong character encoding.
• The html element holds the complete page and usually names its language.
• The declaration cannot repair text that was already damaged or saved with the wrong bytes. Confirm the editor's encoding and the HTTP response headers when a server is involved.