What is URL Encoding?
Percent-encoding explained: which characters must be encoded, how it works, and the difference between encodeURI and encodeURIComponent.
URL encoding (also called percent-encoding) is the process of converting characters into a format that can be safely transmitted in a URL. It replaces unsafe characters with a % sign followed by two hexadecimal digits representing the character's UTF-8 byte value. A space, for example, becomes %20.
The rules are defined in RFC 3986. Every URL you see in a browser is subject to these rules — only a limited set of characters are allowed as-is.
Safe vs reserved characters
RFC 3986 divides URL characters into two groups:
- Unreserved characters — safe to use anywhere without encoding:
A–Z a–z 0–9 - _ . ~ - Reserved characters — have special meaning in URLs (
: / ? # [ ] @ ! $ & ' ( ) * + , ; =). They must be percent-encoded when used as data, not as URL structure.
Any character outside these two groups — including spaces, accented characters, emoji, and symbols like < or > — must always be encoded.
How encoding works
Each byte of the UTF-8 representation of a character is encoded as %XX, where XX is the byte's hexadecimal value. For single-byte ASCII characters this is straightforward:
| Character | Encoded | Why |
|---|---|---|
| Space | %20 | Byte 0x20 in ASCII |
/ | %2F | Reserved path separator |
? | %3F | Reserved query delimiter |
& | %26 | Reserved parameter separator |
= | %3D | Reserved key=value separator |
# | %23 | Reserved fragment delimiter |
@ | %40 | Reserved authority delimiter |
+ | %2B | Ambiguous (means space in forms) |
é | %C3%A9 | Two UTF-8 bytes: 0xC3 0xA9 |
€ | %E2%82%AC | Three UTF-8 bytes |
URL encoding vs form encoding
There are two different encoding schemes you will encounter, and they differ in one key place: the space character.
- Percent-encoding (RFC 3986) — space →
%20. Used in path segments and query strings built manually or in headers. - Form encoding (
application/x-www-form-urlencoded) — space →+. Used when an HTML form is submitted with the default method. The+is only valid in the query string, not in path segments.
When in doubt, use %20 — it is unambiguous in all contexts.
JavaScript: encodeURI vs encodeURIComponent
JavaScript provides two built-in functions, and choosing the wrong one is a common source of bugs:
| Function | Does NOT encode | Use when |
|---|---|---|
encodeURI() | A–Z a–z 0–9 - _ . ~ : / ? # [ ] @ ! $ & ' ( ) * + , ; = | Encoding a complete URL to make it safe for a header or attribute without breaking its structure |
encodeURIComponent() | A–Z a–z 0–9 - _ . ~ ! | Encoding individual query parameter values or path segments — it encodes / ? # & = and everything else |
Rule of thumb: if you are encoding a value that goes inside a URL (a search query, a redirect URI, a file name), use encodeURIComponent(). If you are encoding the entire URL itself, use encodeURI().
Common pitfalls
- Double encoding — encoding an already-encoded string turns
%20into%2520. Always decode first, or check whether the input is already encoded. - Encoding the
&separator — in?a=1&b=2, the&is structure, not data. Only encode&when it appears inside a value. - OAuth and redirect URIs — the
redirect_uriparameter must be percent-encoded, and the value itself may contain characters like=or&that need encoding inside the outer query string.
URL encoding is closely related to Base64 encoding — both convert data to a safe text representation, but Base64 is for binary data in text channels, while percent-encoding is specifically for URLs.
Try it now