HTML Charset

Beginner
⏱️ 11 min read
📚 Updated: Jul 2026
🎯 6 Examples + 6 Try It
UTF-8
HTML Charset tutorial — UTF-8 character encoding in web pages
Overview

Introduction

Character encoding tells the browser how to turn the bytes in your HTML file into readable text. Without the correct charset, accented letters, symbols, and non-English scripts can display as gibberish.

This tutorial explains what charset means, why UTF-8 is the web standard, how to declare it with <meta charset>, and how different encodings compare.

What You’ll Learn

01

Charset

Encoding.

02

UTF-8

Standard.

03

meta

Declare it.

04

Types

Compare.

05

i18n

Multilingual.

06

Fix

Mojibake.

Fundamentals

What Is HTML Charset?

HTML charset refers to the character encoding used to interpret and display text in an HTML document. It defines how numeric byte values map to characters you see on screen.

The most widely used charset today is UTF-8 (Unicode Transformation Format, 8-bit). It supports virtually all writing systems, is backward-compatible with ASCII, and is the recommended default for every new HTML page.

To declare charset, use the <meta> tag in <head>:

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML Document</title>
</head>
<body>
  <!-- Content of the HTML document -->
</body>
</html>

The browser reads charset="UTF-8" and decodes the file accordingly. The charset in your HTML must match how the file is saved in your editor—both should be UTF-8.

💡
Beginner Tip

Place <meta charset="UTF-8"> within the first 1024 bytes of the document (ideally right after <head>) so the browser detects encoding before parsing body text.

Encodings

Types of Charset

Several character encodings exist. Here are the ones you are most likely to encounter:

  1. UTF-8 — Default for the modern web. Supports all Unicode characters including emoji. Backward-compatible with ASCII for English text.
  2. ISO-8859-1 (Latin-1) — Covers Western European languages. Cannot represent Cyrillic, CJK, Arabic, or emoji. Legacy pages only.
  3. Windows-1252 — Extension of Latin-1 used on Windows. Common in old Western European web pages. Not suitable for global content.
  4. UTF-16 — Encodes Unicode with 16-bit units. Used internally by some systems; rare in HTML files compared to UTF-8.
  5. ASCII — 7-bit encoding for basic English letters and symbols. Subset of UTF-8; too limited alone for international sites.
  6. ISO-8859-2, -3, -4, … — Latin alphabet variants for Central European and other regional languages. Largely replaced by UTF-8.

Recommendation: Use UTF-8 for all new HTML documents unless you have a specific legacy requirement.

Reference

Character Set Comparison

The table below shows how the same numeric code points appear in different encodings. For basic ASCII range (0–127), ASCII, Latin-1, and UTF-8 agree. Extended characters differ—UTF-8 handles all of them.

CodeASCIIWindows-1252ISO-8859-1UTF-8Description
32(space)(space)(space)(space)space
65AAAALatin capital letter A
97aaaaLatin small letter a
128—€——euro sign (Windows-1252 only)
169—©©©copyright sign
233—éééLatin small letter e with acute
241—ñññLatin small letter n with tilde
8364———€euro (Unicode code point in UTF-8)
12354———あHiragana letter a (UTF-8 only)
127757———🌍globe emoji (UTF-8 only)

ASCII and ISO-8859-1 cannot represent emoji or most non-Latin scripts. UTF-8 encodes the full Unicode range using one to four bytes per character.

Troubleshooting

Fixing Mojibake (Garbled Text)

When charset declaration and file encoding disagree, you see mojibake—broken characters like é instead of é, or 🌠instead of emoji.

  • Add <meta charset="UTF-8"> in <head>.
  • Save the file as UTF-8 in your editor (VS Code: bottom-right encoding indicator → Save with Encoding → UTF-8).
  • Ensure your web server sends Content-Type: text/html; charset=utf-8 (most servers do by default for .html).
  • Avoid mixing encodings when copying text from Word or PDF into HTML.
Cheat Sheet

⚡ Quick Reference

TaskCode / action
Declare UTF-8 (HTML5)<meta charset="UTF-8">
Legacy HTML4 form<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
Recommended encodingUTF-8
Save file in editorUTF-8 (not ANSI / Windows-1252)
Pair with language<html lang="en"> — see Language Code
Special characters in HTMLUTF-8 directly or HTML entities
Hands-On

Examples Gallery

Six examples showing UTF-8 in action. Each includes View Output and Try It Yourself.

Example 1 — UTF-8 meta Tag

html
<head>
  <meta charset="UTF-8">
  <title>UTF-8 page</title>
</head>
Try It Yourself

How It Works

One line in head tells every browser to decode the page as UTF-8.

Example 2 — Accented Characters

html
<h1>Café & naïve</h1>
<p>El niño comió jalapeños. Ça va bien!</p>
Try It Yourself

How It Works

UTF-8 encodes accented Latin letters. Without UTF-8, these often appear as question marks or mojibake.

Example 3 — Emoji and Symbols

html
<h1>Hello 🌍</h1>
<p>Price: €19 · Rating: ★★★★☆ · Check ✓</p>
Try It Yourself

How It Works

Emoji and symbols like € require UTF-8 (or entities). ASCII alone cannot represent them.

Example 4 — Multilingual Page

html
<head>
  <meta charset="UTF-8">
</head>
<body>
  <h1>Multilingual UTF-8</h1>
  <p>English: Hello</p>
  <p>Japanese: こんにちは</p>
  <p>Arabic: مرحبا</p>
  <p>Hindi: नमस्ते</p>
</body>
Try It Yourself

How It Works

One UTF-8 page can mix scripts. Pair with lang attributes for accessibility (see Language Code).

Example 5 — UTF-8 with HTML Entities

html
<head>
  <meta charset="UTF-8">
</head>
<body>
  <h1>Entities &amp; UTF-8</h1>
  <p>Copyright: &copy; 2026</p>
  <p>Less than: &lt;tag&gt;</p>
  <p>Numeric ref: &#233; = é</p>
</body>
Try It Yourself

How It Works

With UTF-8 you can type characters directly. Entities remain useful for <, &, and legacy workflows. See HTML Entities.

Example 6 — Complete Document

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Global Website</title>
</head>
<body>
  <header><h1>Welcome / Bienvenue / 欢迎</h1></header>
  <main>
    <p>UTF-8 lets one page display text from many languages.</p>
  </main>
</body>
</html>
Try It Yourself

How It Works

Combines meta charset, viewport, and international content—the pattern every global site should follow.

Pro Tips

Best Practices

✅ Do

  • Use <meta charset="UTF-8"> on every page
  • Save HTML files as UTF-8 in your editor
  • Put charset early in <head>
  • Combine with lang on <html>
  • Verify server sends UTF-8 Content-Type header

❌ Don’t

  • Use ISO-8859-1 or Windows-1252 for new projects
  • Declare UTF-8 but save the file as ANSI
  • Assume ASCII is enough for public websites
  • Omit charset and rely on browser guessing
  • Mix encodings when pasting from other apps
Compatibility

Universal Browser Support

All modern browsers support UTF-8 when declared with meta charset. UTF-8 has been the dominant web encoding for over a decade.

✓ Baseline · Since HTML

UTF-8 in HTML5

All modern browsers support UTF-8 when declared with meta charset. UTF-8 has been the dominant web encoding for over a decade.

100% Core tag support
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
UTF-8 in HTML5 Universal

Bottom line: UTF-8 is safe everywhere. No fallback encoding needed for new sites.

Wrap Up

Conclusion

HTML charset defines how browsers interpret your text. UTF-8 is the clear standard: declare it with <meta charset="UTF-8">, save files as UTF-8, and your pages will display any language or emoji correctly.

For attribute-level details, see the charset attribute reference. Next, learn how to build data tables with HTML Table.

Try multilingual UTF-8 Next: HTML Table
Summary

Key Takeaways

🔤 01

UTF-8

Use always.

Standard
📄 02

meta

In head.

Declare
💾 03

Save

UTF-8 file.

Editor
🌐 04

i18n

All scripts.

Global
⚠️ 05

Match

No mojibake.

Fix

❓ Frequently Asked Questions

Charset (character set) is the encoding the browser uses to interpret bytes in your HTML file as letters, numbers, and symbols. UTF-8 is the standard—it supports virtually all languages and emoji.
Add <meta charset="UTF-8"> inside <head>, ideally as the first element after <head>. HTML5 shortened the old http-equiv form to this single line.
UTF-8 encodes the full Unicode character set, is backward-compatible with ASCII, and is the default for the modern web. It handles English, accented Latin, Cyrillic, CJK scripts, Arabic, emoji, and more in one encoding.
Mojibake is garbled text (like é instead of é) caused by a mismatch between the charset declared in HTML and how the file was actually saved, or missing meta charset.
Unicode is the character catalog (code points). UTF-8 is one way to encode those characters as bytes in a file. HTML pages almost always use UTF-8 to represent Unicode text.
UTF-8 can store any character directly, so you can type é instead of &eacute;. Entities remain useful for characters that are special in HTML syntax, like < (&lt;) and & (&amp;).
Did you know?

Over 98% of web pages use UTF-8. The W3C recommends UTF-8 as the default encoding for HTML. Before UTF-8 dominated, sites often maintained separate encodings per language—UTF-8 eliminated that complexity by supporting all Unicode in one format.

Test UTF-8 in the editor

Add accented text and emoji, set meta charset, and confirm everything renders correctly.

Open Try It editor →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

6 people found this page helpful

HTML Editors HTML Table