← Back to HTML Course | Chapter 10: Reference & Interview Prep | Lesson 3 of 20

HTML Character Sets

Imagine writing an email to a friend using standard letters. But when they open it, every space is replaced by a weird symbol, and accented letters display as garbled characters (like 'café' instead of café). This issue is called mojibake. Computers only understand binary code (0s and 1s). A character set is a standardized key that tells the browser how to translate those binary numbers into readable text, accents, and emojis. Declaring the correct character set prevents your webpage from displaying broken, unreadable text characters.

In this page:

  1. Evolution of Character Encodings
  2. The Universal UTF-8 Standard
  3. Declaring Charsets in the head Section
  4. Troubleshooting Mojibake Errors
  5. Server Headers vs. HTML Meta Tags

Evolution of Character Encodings

In the early days of computing, different systems used different character encoding keys.

ASCII supported only basic English characters, while ISO-8859-1 added support for Western European accents, creating layout conflicts as the web expanded globally.

Note: Avoid using legacy, region-specific character encodings in modern web projects.
Warning: Using outdated character encodings can cause your text, accents, and symbols to render as broken characters.

Example: Evolution of Character Encodings

markup 
<!-- ASCII: basic English only. ISO-8859-1: adds Western European accents -->
<meta charset="ISO-8859-1">

The Universal 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 Universal UTF-8 Standard

markup 
<meta charset="UTF-8">

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

markup 
<head>
  <meta charset="UTF-8">
  <title>My Page</title>
</head>

Troubleshooting Mojibake 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 é). 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: Troubleshooting Mojibake Errors

markup 
<!-- 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

markup 
<!-- HTTP header: Content-Type: text/html; charset=UTF-8 -->
<meta charset="UTF-8">
Live Example
Related Topics

HTML Browser Support · HTML Doctypes · HTML Keyboard Shortcuts · HTML Audio/Video Reference

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Forgetting to include the meta charset tag inside the head section of your HTML document.
  2. Placing the charset meta tag below heavy script or stylesheet links inside your head section.
  3. Saving your HTML files in a legacy format in your code editor while declaring UTF-8 in your code.
Chapter Summary
  • 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.
Browser Support

Standard HTML5 character declarations are natively supported by all modern and legacy web browsers.

🔒

Chapter Quiz — Complete all 20 topics to unlock

0/20 topics done

Complete these topics first:

← Previous Lesson HTML Browser Support Next Lesson → HTML Doctypes

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.