Markup CityISSUE #37 of 39

charsets · utf-8 by default

Tagg the BuilderVSThe Unclosed Tag

Tagg the Builder saysSet <meta charset="utf-8"> first thing in the head so every character — accents, symbols, emoji — decodes correctly.

A charset tells the browser how to turn the file's bytes back into characters. UTF-8 covers every language and symbol, and it's the web standard. Declare it as the very first thing in the head: <meta charset="utf-8">.

If the declaration is missing or wrong, accented letters and emoji turn into garbage ("mojibake"). Save your file as UTF-8 in your editor too — the meta tag and the actual file encoding must agree.

Power-ups you unlock

UTF-8 covers every language and symbol
<meta charset="utf-8"> goes first in <head>
Wrong/missing charset → mojibake (Ã©, â€™)
File encoding and the meta tag must match

The Unclosed Tag attacks — common mistakes

Declaring charset late, after some bytes were already decoded
Saving the file as Windows-1252 while the tag says UTF-8
Assuming ASCII is enough — it breaks on the first accent or emoji

Boss battleAdd accented text (café, naïve) and an emoji, confirm they render, then mentally note what would happen without the charset line.

Example code

<!doctype html>
<html><head>
  <meta charset="utf-8">
  <title>encoding</title>
</head>
<body style="background:#06040d;color:#e6e0ff;font-size:18px">
  <p>café · naïve · Köln · 北京 · 🚀</p>
  <p style="font-size:13px;color:#8a82b0">all of this needs utf-8 to render right.</p>
</body></html>

▶ Open the interactive comic issue

‹ Emojis · Unicode In The Page Url Encoding · Safe Characters ›