HTML Charsets
In this page:
What is a Character Set?
A character set is a standardized character-encoding system. Early computer systems used ASCII (which supported only basic English characters) or ISO-8859-1, while modern web standards use UTF-8 to support global languages natively.
Note: UTF-8 is the modern, universal standard that supports almost all global languages and symbols.
Warning: Using outdated character encodings can cause your text, accents, and symbols to render as broken characters.
Example: What is a Character Set?
<meta charset="UTF-8">The UTF-8 Standard
UTF-8 is a highly efficient, variable-width character encoding standard that can represent over a million unique characters, including mathematical symbols, global alphabets, and emojis.
Note: Always save your HTML source files using UTF-8 encoding in your code editor to prevent character errors.
Warning: If your file editor is set to save in one format but your HTML declares another, the browser will render broken symbols.
Example: The UTF-8 Standard
<meta charset="UTF-8">
<p>Supports café, 日本語, and 😀</p>Declaring Charsets in the head Section
To make sure your webpage renders correctly, you must place the character set meta tag inside the head section of your document. It must be placed within the first 1024 bytes of the file so the browser reads it before loading your text.
Note: Place your meta charset tag as the very first line inside your head tag.
Warning: Placing the charset declaration below a heavy script tag can delay character decoding and slow down page load times.
Example: Declaring Charsets in the head Section
<head>
<meta charset="UTF-8">
<title>My Page</title>
</head>Identifying and Fixing Character Errors
If a webpage has a missing or incorrect character set declaration, special characters like curly quotes, dashes, and accented letters will render as broken, garbled symbols (like or é). This issue is called mojibake.
Note: If you see weird symbols on your page, check your meta charset tag spelling first.
Warning: Simply adding the meta tag might not fix the issue if your code editor is saving your files in a legacy format.
Example: Identifying and Fixing Character Errors
<!-- Missing charset can cause: café to render as café -->
<meta charset="UTF-8">Server Headers vs. HTML Meta Tags
When a visitor loads your webpage, your web server sends an HTTP header that specifies the content type and character set. While the server's HTTP header has a higher priority than your HTML meta tag, including the meta charset tag in your HTML is still essential to ensure the page renders correctly when loaded locally.
Note: Configure your web server (like Apache or Nginx) to send a default UTF-8 charset header for your pages.
Warning: If your server's HTTP headers contradict your HTML meta tags, the browser will prioritize the server settings, which can cause rendering bugs.
Example: Server Headers vs. HTML Meta Tags
<!-- HTTP header: Content-Type: text/html; charset=UTF-8 -->
<meta charset="UTF-8">- Forgetting to include the meta charset tag inside the head section of your HTML document.
- Placing the charset meta tag below heavy script or stylesheet links inside your head section.
- Saving your HTML files in a legacy format in your code editor while declaring UTF-8 in your code.
- A character set is a standardized key that tells the browser how to translate binary numbers into readable text characters.
- UTF-8 is the modern, universal web standard that supports almost all global languages, symbols, and emojis natively.
- Always place the meta charset="UTF-8" tag on the very first line inside your head section.
Standard HTML5 character declarations are natively supported by all modern and legacy web browsers.
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: