Markup CityISSUE #38 of 39

url encoding · safe characters

Tagg the BuilderVSThe Unclosed Tag

Tagg the Builder saysURL encoding (percent-encoding) replaces unsafe characters in a URL with %XX codes so links and queries stay valid.

URLs can only safely contain a limited set of characters. Spaces, &, ?, #, and non-ASCII letters must be percent-encoded: a space becomes %20, an ampersand %26. In JavaScript, encodeURIComponent() does this for query values.

This matters most in query strings and when building share links. Encode each value, not the whole URL, so you don't accidentally encode the ? and & separators that structure it.

Power-ups you unlock

Percent-encoding: space → %20, & → %26, etc.
encodeURIComponent() encodes a single value
encodeURI() preserves separators in a full URL
Encode query values so & and = inside them do not break parsing

The Unclosed Tag attacks — common mistakes

Putting raw spaces or & inside a query value
Double-encoding (encoding an already-encoded string)
Using encodeURI on a value, leaving its & unescaped

Boss battleIn the sandbox console-style demo, build a search URL whose query contains a space and an ampersand, encoded with encodeURIComponent.

Example code

<!doctype html>
<html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;font-family:monospace">
  <pre id="out" style="white-space:pre-wrap"></pre>
  <script>
    const q = 'salt & pepper recipe';
    const url = 'https://example.com/search?q=' + encodeURIComponent(q);
    document.getElementById('out').textContent = 'raw:  ' + q + '\nurl:  ' + url;
  </script>
</body></html>

▶ Open the interactive comic issue

‹ Charsets · Utf-8 By Default Html Vs Xhtml · The Strictness Divide ›