Understanding Character Encoding
Character encoding tells a browser how the bytes in an HTML document should be interpreted as letters, numbers, punctuation, symbols, and other characters.
Modern HTML documents should normally use UTF-8, a Unicode character encoding capable of representing characters from languages around the world along with many symbols and emoji. Declaring the encoding correctly helps prevent text from appearing as incorrect or unreadable characters.
What Is Character Encoding?
Computers store information as numbers rather than as visible letters or symbols. A character encoding defines how those numerical values correspond to the characters people read and write.
For example, a document may contain ordinary English letters along with accented characters, mathematical symbols, currency symbols, or characters from other writing systems:
Hello
Café
€100
日本語
✓ CompleteThe browser needs to know which character encoding was used when the file was saved so it can interpret those values correctly.
If the browser uses the wrong encoding, some characters may be replaced with unexpected symbols, question marks, or other unreadable text.
What Is UTF-8?
UTF-8 is a character encoding for Unicode. Unicode provides a common system for representing characters used by many languages and writing systems throughout the world.
UTF-8 can represent ordinary ASCII characters as well as accented letters, international scripts, mathematical symbols, technical symbols, and emoji.
For example, all of the following can be represented using UTF-8:
HTML
Résumé
£25
© 2026
你好
こんにちは
😀Because of its broad character support and compatibility with existing ASCII text, UTF-8 is the standard encoding used for modern HTML documents.
The charset Declaration
An HTML document declares its character encoding with the charset attribute on a meta element inside the document's head.
<meta charset="utf-8">This declaration tells the browser that the HTML document is encoded using UTF-8.
A basic HTML document therefore commonly begins like this:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Webpage</title>
</head>
<body>
<h1>My Webpage</h1>
</body>
</html>The declaration is short, but it performs an important job by helping the browser interpret the document correctly.
Where to Place the Charset Declaration
The character encoding declaration belongs inside the head element and should appear very early in the HTML document.
<head>
<meta charset="utf-8">
<title>My Webpage</title>
</head>Placing the declaration near the beginning allows the browser to determine the encoding before it processes much of the document.
A good practice is to place <meta charset="utf-8"> immediately after the opening head tag, before most other metadata.
Why Use UTF-8?
UTF-8 is recommended because it supports an extremely large range of characters while remaining compatible with ordinary ASCII text.
Using UTF-8 provides several practical advantages:
- It supports characters used by languages around the world.
- It supports many mathematical, technical, and typographic symbols.
- It supports Unicode emoji.
- It is compatible with ordinary ASCII characters.
- It allows one encoding to be used consistently throughout a website.
- It reduces problems caused by mixing older regional character encodings.
For new HTML documents, there is rarely a reason to choose an older character encoding instead of UTF-8.
UTF-8 & Special Characters
When a document is correctly saved and served as UTF-8, many characters can be entered directly into the HTML source.
<p>Copyright © 2026</p>
<p>Price: €25</p>
<p>Temperature: 72°F</p>Browsers can interpret these characters directly when the document uses the correct UTF-8 encoding.
HTML also provides character references that can represent certain characters using text-based codes:
<p>Copyright © 2026</p>Character references remain useful for some situations, particularly when a character has special meaning in HTML syntax or when using the reference makes the source easier to understand.
UTF-8 & Emoji
Emoji are Unicode characters and can be used directly in an HTML document that is correctly encoded as UTF-8.
<p>Welcome! 👋</p>
<p>Great job! 🎉</p>Many emoji can also be represented with numeric character references:
<p>👋</p>
<p>👋</p>The first example uses a decimal numeric character reference, while the second uses a hexadecimal numeric character reference. Both represent the waving hand character.
Some emoji are made from sequences of multiple Unicode characters rather than a single character. Those sequences will be covered in greater detail in the Emoji Tutorial.
Character Encoding Problems
When a document is saved using one encoding but interpreted using another, the browser may display incorrect characters. This problem is sometimes called garbled text or mojibake.
For example, text intended to appear as:
Cafémight appear incorrectly as something similar to:
CaféThis can happen when the bytes representing the text are decoded using the wrong character encoding.
Encoding problems may affect accented letters, punctuation, currency symbols, international text, and other Unicode characters even when ordinary English letters appear normal.
Saving Files as UTF-8
The HTML declaration alone does not convert a file to UTF-8. The file itself should also be saved using UTF-8 encoding.
Most modern code editors use UTF-8 by default or provide an option for choosing the file encoding when a document is created or saved.
When working with an editor, verify that your HTML files are saved as UTF-8, particularly if accented characters, international text, symbols, or emoji display incorrectly.
The server should also identify the document with a compatible character encoding when it sends the HTML response. Keeping the file, HTML declaration, and server configuration consistent helps avoid encoding conflicts.
Common Character Encoding Mistakes
Character encoding problems often occur because the document declaration, saved file encoding, or server information do not agree.
Common mistakes include:
- Leaving the character encoding declaration out of the document.
- Placing the declaration too late in the document.
- Declaring UTF-8 while saving the actual file using a different encoding.
- Using different encodings across files in the same website.
- Assuming visible English text means the encoding is correct.
- Trying to fix encoding problems by replacing every special character with an HTML entity.
- Confusing character encoding with the HTML
langattribute.
The lang attribute describes the language of content, while character encoding describes how characters are represented in the document. They perform different jobs and should not be confused.
Character Encoding Best Practices
Using one consistent encoding throughout a website is the simplest way to avoid most character-related problems.
- Use UTF-8 for modern HTML documents.
- Include
<meta charset="utf-8">near the beginning of thehead. - Save HTML files using UTF-8 encoding.
- Keep server character-encoding information consistent with the document.
- Test pages containing accented letters, symbols, international characters, or emoji.
- Do not confuse character encoding with document language.
- Use character references when they are needed, not as a substitute for correct encoding.
A consistent UTF-8 setup allows your HTML source to contain a broad range of text and symbols without requiring different encodings for different languages or character sets.
Summary
Character encoding determines how the bytes in an HTML document are interpreted as readable characters. Modern HTML documents should normally use UTF-8 because it supports characters from languages around the world along with symbols and emoji.
Declare UTF-8 near the beginning of the document with <meta charset="utf-8">, save the file itself as UTF-8, and keep the server configuration consistent with that encoding. Correct character encoding helps ensure that visitors see the text exactly as intended.