👀 Live Preview
With UTF-8 declared, multilingual text renders correctly:
Hello! café — 日本語 — 😀
This tutorial page itself uses UTF-8 via <meta charset> in the document head.
HTML charset Attribute
Overview
Introduction
The charset attribute in HTML plays a crucial role in specifying the character encoding for the document. Character encoding tells the browser how to interpret bytes as text, ensuring that special characters, symbols, and various languages are rendered accurately.
What You’ll Learn
UTF-8
Modern default.
meta tag
Where it lives.
Early head
First 1024 bytes.
Mojibake
Garbled text fix.
characterSet
JS read API.
vs accept
Page vs form.
Fundamentals
Purpose of charset
The primary purpose of the charset attribute is to define the character encoding for the HTML document. This helps browsers interpret and display text correctly, avoiding issues such as mojibake (garbled characters) that may arise when the character encoding is not specified or mismatched with the actual file bytes.
Not the same as accept-charset
<meta charset> controls how the browser decodes the HTML page. accept-charset on a <form> controls how submitted form data is encoded. They solve different problems.
Foundation
📝 Syntax
Place charset on a <meta> element in the document <head>:
charset.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Your Page Title</title>
</head>
<body>...</body>
</html>Syntax Rules
- Use on
<meta charset="UTF-8">in HTML5 (nohttp-equivneeded). - Place as early as possible in
<head>, within the first 1024 bytes. - Value is a character encoding label such as
UTF-8orISO-8859-1. - The server may also send encoding via the HTTP
Content-Typeheader. - For new sites, always choose
UTF-8.
Reference
💎 Values
The charset attribute takes a character encoding name (IANA charset label). Common values include:
UTF-8— Unicode encoding; supports all languages and emoji. Standard for modern web pages.ISO-8859-1— Latin-1 Western European encoding. Legacy; avoid for new projects.Windows-1252— Common legacy Windows encoding. Prefer UTF-8 instead.
charset-values.html
<!-- Recommended -->
<meta charset="UTF-8">
<!-- Legacy HTML4 style (still valid but verbose) -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">Cheat Sheet
⚡ Quick Reference
| Attribute | Purpose | Notes |
|---|---|---|
<meta charset="UTF-8"> | Declare document encoding | Place early in <head> |
UTF-8 | Unicode (recommended) | Default for HTML5 |
accept-charset | Form submission encoding | Different attribute on <form> |
document.characterSet | Read encoding in JS | Preferred DOM property |
| HTTP header | Content-Type: text/html; charset=UTF-8 | Server-level alternative |
| HTML5 status | Valid and essential | Always include on every page |
Scope
Applicable Elements
| Element | Supported? | Notes |
|---|---|---|
<meta> | Yes | Primary use: <meta charset="UTF-8"> |
<script> (external) | Legacy only | Obsolete in HTML5; server should send correct type |
<form> | No | Use accept-charset instead |
<table> | No | Not related to table char attribute |
<html> | No | Set encoding via <meta> or HTTP header |
Hands-On
Examples Gallery
Example with meta charset and reading the encoding with JavaScript.
Example
To include the charset attribute in an HTML document, place it within the <meta> tag in the document’s <head> section:
charset.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Your Page Title</title>
</head>
<body>
<p>Hello! This page uses UTF-8 character encoding.</p>
</body>
</html>How It Works
In this example, the charset attribute is set to UTF-8, indicating Unicode encoding for the document. The browser reads this before parsing body content so every character displays correctly.
Dynamic Values with JavaScript
You can read the document’s character encoding with JavaScript. Changing encoding after the page has loaded does not re-decode existing content, so always declare charset in <head> first:
charset.html
<p id="encoding"></p>
<script>
// Read the document character encoding
document.getElementById("encoding").textContent =
"Document encoding: " + document.characterSet;
</script>How It Works
document.characterSet returns the encoding the browser used for the document (typically UTF-8). The legacy alias document.charset also works, but changing either property after load does not re-parse the page—declare encoding in markup instead.
A11y
♿ Accessibility
- Correct encoding enables readable text — Without UTF-8, screen readers may receive garbled content.
- Supports multilingual users — UTF-8 ensures names and labels in any script display correctly.
- Pair with lang attribute — Use
<html lang="en">alongside charset for language and encoding. - Avoid mojibake in forms — Correct page encoding helps users see what they type before submission.
- Test special characters — Verify accented letters and non-Latin text in real assistive tech sessions.
🧠 How charset Works
1
Author declares charset
Add <meta charset="UTF-8"> early in the document head.
Markup
2
Browser reads bytes
The parser uses the declared encoding to convert file bytes into characters.
Decoding
3
Text renders correctly
Accented letters, CJK scripts, emoji, and symbols display as intended.
Display
=
Universal readable page
UTF-8 charset on every page prevents mojibake across languages.
Compatibility
Browser Support
The HTML5 <meta charset> attribute is universally supported in all modern browsers. UTF-8 is the HTML5 default encoding.
HTML5 standard · Essential
Supported everywhere
Always include <meta charset="UTF-8"> as the first element in <head>.
100% Modern browsers
Google Chrome Full support
SupportedMozilla Firefox Full support
SupportedApple Safari Full support
SupportedMicrosoft Edge Full support
Supportedmeta charset attribute Universal
Bottom line: Every HTML page should declare UTF-8 with <meta charset="UTF-8"> in the head.
Pro Tips
💡 Best Practices
✅ Do
- Always use
<meta charset="UTF-8">on every page - Place charset as the first element inside
<head> - Save HTML files as UTF-8 on disk
- Match server
Content-Typeheader to UTF-8 - Pair with
<html lang="...">for accessibility
❌ Don’t
- Omit charset and rely on browser guessing
- Confuse charset with
accept-charseton forms - Use legacy ISO-8859-1 for new projects
- Try to change encoding after the page has loaded
- Confuse charset with table
charattribute
- Always specify the
charsetattribute to ensure proper text rendering. The default value for modern web pages isUTF-8, which supports a wide range of characters. - Be consistent with the chosen character encoding throughout your website to avoid conflicts and display issues.
- Test your web pages across different browsers to ensure consistent rendering, especially when dealing with special characters and multilingual content.
Wrap Up
Conclusion
The charset attribute is a fundamental element in HTML, determining how text is encoded and displayed on your web pages. Declared on <meta charset="UTF-8">, it prevents mojibake and supports global audiences.
By understanding and correctly implementing this attribute, you contribute to a seamless and accurate presentation of content for your website visitors. Make it the first line in every document head.
Summary
Key Takeaways
Knowledge Unlocked
Five truths every developer should know about charset
Bookmark these before publishing any HTML page.
5
Core concepts 01
UTF-8
Always use.
Default 02
meta tag
In head.
Syntax 03
Early
First in head.
Placement 04
characterSet
Read in JS.
Script 05
vs accept
Page vs form.
Compare❓ Frequently Asked Questions
It tells the browser which character encoding to use when decoding the HTML document, such as UTF-8.
Inside
<head> as <meta charset="UTF-8">, ideally as the first element.meta charset decodes the HTML page. accept-charset on a form encodes submitted field values.UTF-8 for virtually all modern websites. It supports every language and emoji.
You can read it with
document.characterSet, but changing encoding after load does not re-decode the page. Declare it in <head> instead.The browser may guess the encoding, which can cause mojibake (garbled text) for non-ASCII characters.
Declare UTF-8 on every page
Practice the charset attribute with a proper <meta charset="UTF-8"> document and read the encoding with JavaScript.
About the author
5 people found this page helpful