Markup CityISSUE #36 of 39

emojis · unicode in the page

Tagg the BuilderVSThe Unclosed Tag

Tagg the Builder saysEmojis are just Unicode characters — with UTF-8 you can paste them straight into your HTML.

An emoji is a regular Unicode code point, so once your page declares <meta charset="utf-8"> you can paste 🎮 or 🚀 directly into the markup and it renders. No special tag required.

For accessibility, wrap a meaningful emoji in <span role="img" aria-label="rocket"> so screen readers announce it; mark purely decorative ones aria-hidden="true". Rendering varies by platform — the same emoji looks different on iOS, Android, and Windows.

Power-ups you unlock

Emojis are Unicode — paste them with charset utf-8 set
No special element needed; they are just text
Add role="img" aria-label="…" for meaningful emojis
Appearance differs per operating system

The Unclosed Tag attacks — common mistakes

Missing charset utf-8 → emojis turn into mojibake (Ã°Å¸)
Relying on an emoji alone to convey critical meaning
Forgetting aria-label, leaving screen-reader users with gaps

Boss battlePaste three emojis into the page, then give one an aria-label and mark another aria-hidden="true".

Example code

<!doctype html>
<html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;font-size:28px">
  <p>🎮 🚀 🦊</p>
  <p style="font-size:14px">
    <span role="img" aria-label="rocket">🚀</span> meaningful ·
    <span aria-hidden="true">✨</span> decorative
  </p>
</body></html>

▶ Open the interactive comic issue

‹ Symbols · Math · Currency · Arrows Charsets · Utf-8 By Default ›