What Is URL Encoding? Why URLs Have %20 (and How to Decode It)
Ever seen %20 or %E4%B8%AD in a URL? This plain-English guide explains what URL encoding is, why URLs need it, why non-Latin URLs sometimes turn into garbage, the difference between encodeURI and encodeURIComponent, and how to encode/decode online.
You've definitely seen a URL with %20 in it, or a long run of %E4%B8%AD — and on first glance it looks broken. It isn't: that's URL encoding, the mechanism that lets URLs travel safely. Understand it and URLs, query parameters and non-Latin links stop being a mystery.
Why do URLs need encoding?
A URL is only allowed to contain a limited set of characters. Problems arise with:
- Spaces — a URL can't contain a raw space
- Non-Latin characters (Chinese, Arabic, etc.)
- Special symbols —
?,&,=,/have special meaning in a URL
Put these directly into a URL and a browser or server may misread them. URL encoding converts them into a safe "% + two hex digits" form.
What are those %XX sequences?
space → %20
中 → %E4%B8%AD (UTF-8 encoded)
? → %3F
& → %26
So https://example.com/search?q=taipei food (with a space) becomes:
https://example.com/search?q=taipei%20food
It looks alarming, but it's just the safe form — decode it and you get the original back.
Why does non-Latin text turn into garbage?
Usually an encoding/decoding mismatch. Non-Latin text must be encoded as UTF-8; if one side uses a different encoding, or the text is accidentally encoded twice, decoding produces garbage.
The fix:
- Ensure encoding is UTF-8 and happens exactly once
- For a confusing
%XXstring, paste it into a decoder to recover it
encodeURI vs encodeURIComponent
A pair developers often confuse:
| Function | Encodes | Use for |
|---|---|---|
encodeURIComponent |
also ? & = / |
a single parameter value |
encodeURI |
preserves URL-structure chars | a whole URL |
For query parameters, encodeURIComponent is the usual pick, so a value's & or = doesn't break the whole URL.
How to encode and decode
The fastest way is our URL encoder / decoder — paste a URL, parameter or text, choose encode or decode, and convert instantly. It supports UTF-8, runs entirely in your browser so nothing is uploaded, and uses encodeURIComponent, the most practical choice for query parameters.
Encode: taipei food → taipei%20food
Decode: %E4%B8%AD → 中
The bottom line
URL encoding turns "characters a URL can't use directly" (spaces, non-Latin text, special symbols) into the safe %XX form so data travels without breaking — those %20 and %E4%B8%AD aren't garbage, they're normal encoding. Non-Latin garbage is almost always an encoding mismatch or double-encoding. To encode or decode, drop it into the URL encoder. To understand another common encoding, see what Base64 is.
FAQ
What is URL encoding?
URL encoding (percent-encoding) converts characters that can't be used directly in a URL into a safe '%' + two-hexadecimal-digit form. URLs only allow a limited set of characters, so spaces, non-Latin text, or symbols with special meaning (like ?, & and =) must be encoded — for example %20 for a space — so browsers and servers don't misread them.
Why do %20 and %E4%B8%AD appear in URLs?
Those are URL-encoded results. %20 is what a space becomes; a non-Latin character (encoded as UTF-8) becomes a sequence like %E4%B8%AD. They aren't errors or garbage — they're the safe form of characters that can't sit directly in a URL. Decode them and you get the original space or character back.
Why do non-Latin URLs sometimes turn into garbage?
Usually a mismatch between encoding and decoding. Non-Latin text must be encoded as UTF-8 into %XX form to travel safely in a URL; if one side uses a different encoding, or the text is accidentally encoded twice, decoding produces garbage. The fix is to ensure UTF-8 and encode exactly once; if you see a confusing %XX string, paste it into a URL decoder to recover it.
What's the difference between encodeURI and encodeURIComponent?
Both are JavaScript URL-encoding functions; they differ in scope. encodeURIComponent is more thorough — it also encodes ?, &, = and /, which makes it right for encoding a single parameter value. encodeURI preserves those URL-structure characters, so it's for encoding a whole URL. For query parameters, encodeURIComponent is the most common choice, so a value's special symbols don't break the URL structure.