HTML <meta charset="utf-8">: Character Encoding

The charset declaration tells the browser how to turn stored bytes into characters. UTF-8 works for modern languages, punctuation, and symbols, and it should appear early in head.

What You Need to Know

Also save the file itself as UTF-8. A declaration cannot convert a file that was stored using another incompatible encoding.

Think of an HTML document as a small book: the browser needs a title and some information about how to read it, while visitors need the actual chapters and text.

Example: See It in Action

Add this example to the appropriate part of a practice HTML page. Read each line before you open the page in your browser.

If this is only part of a document, place metadata and style elements in the head of a complete HTML page. Keep ordinary visible content in its body.

<head>
    <meta charset="utf-8">
    <title>Language and Symbols</title>
</head>
<body>
    <p>Crème brûlée, 日本語, and ✓</p>
</body>

Let’s Understand the Example

• A meta element gives the browser short information about the document. Different attributes control different hints.
• The head contains useful page information for the browser, such as its title and character encoding.
• The title names the page in the browser tab. It is different from the heading shown on the page.
• 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 “Language and Symbols”.

Open the page and compare what appears in the browser tab with the heading inside the document. Both have different jobs.

Try It Yourself

1. Add a word with an accent and a non-Latin word; check both in the browser.
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

• Thinking the meta tag alone fixes corrupted characters already present in the file.
• The title in the browser tab and the heading visible in the page are different pieces of information.

Key Takeaways

• The charset declaration tells the browser how to turn stored bytes into characters.
• A meta element gives the browser short information about the document. Different attributes control different hints.
• Also save the file itself as UTF-8. A declaration cannot convert a file that was stored using another incompatible encoding.