HTML Character Sets

1) ASCII

<!-- ASCII uses only 7 bits, giving 128 possible characters -->
<!-- It covers English letters (A-Z, a-z), digits (0-9), and basic punctuation -->

ASCII (American Standard Code for Information Interchange) was one of the earliest character sets. It only defines 128 characters, which is enough for basic English text but has no support for accented letters, currency symbols, or non-English scripts.

2) ISO-8859-1 (Latin-1)

<meta charset="ISO-8859-1">

ISO-8859-1, also called Latin-1, extends ASCII to 8 bits (256 characters). It adds support for many Western European languages by including accented letters such as é, ñ, and ü. It was widely used as the default encoding for HTML in the early days of the web, but it still cannot represent most world languages or emoji.

3) UTF-8 (The Modern Standard)

<meta charset="UTF-8">

UTF-8 is a variable-length encoding capable of representing every character in the Unicode standard — virtually every language on Earth, mathematical symbols, and even emoji 😀. It is backward-compatible with ASCII (the first 128 characters are identical), which is one reason it became the dominant encoding on the web. Today, UTF-8 is used by well over 95% of all websites.

4) Declaring the Charset in HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- This should be the very first line inside <head> -->
  <title>My Page</title>
</head>

The <meta charset="UTF-8"> tag tells the browser how to interpret the bytes of the document. It should be placed as the very first element inside <head>, before any other tag that outputs text (like <title>), because browsers may start parsing content before they see a charset declared later in the document.

5) What Happens With the Wrong Charset? (Mojibake)

<!-- Intended text (encoded in UTF-8): -->
Café — naïve — 😀

<!-- If the browser wrongly reads this as ISO-8859-1, it may render as: -->
Café — naïve — 😀

When a browser guesses the wrong encoding, multi-byte UTF-8 characters get misread as several separate Latin-1 characters, producing garbled text known as mojibake. This is why every UTF-8 encoded byte sequence must be paired with a correct charset declaration — without it, accented letters, currency symbols, and emoji can turn into strange symbol strings instead of the intended text.

6) Try It: Correct vs Declared Encoding

Every page on this site declares <meta charset="UTF-8">, which is why special characters below render correctly:

If this page did not declare UTF-8 (or declared the wrong charset), the characters above could appear as broken symbol sequences instead of readable text.