URL Encoding Explained: %20, + and When to Encode
What percent-encoding is, why spaces become %20, the difference between encodeURI and encodeURIComponent, and how to avoid double-encoding bugs.
Editorial disclosure: Pyalm publishes and maintains the products and free tools discussed on this site. Regulatory statements are linked to primary sources where applicable. No independent professional review is claimed unless a reviewer is explicitly named.
URLs can only contain a limited set of characters. Everything else — spaces, ampersands, Arabic or Hindi text, emoji — must be percent-encoded before it goes into a link. Get it wrong and parameters break, search terms get cut off, or redirects go to the wrong place.
How percent-encoding works
Each unsafe byte is written as % followed by two hex digits. A space is byte 0x20, so it becomes %20. Non-ASCII characters are first converted to UTF-8 bytes, so é becomes %C3%A9 and an Arabic letter becomes four or six characters.
| Character | Encoded |
|---|---|
| space | %20 (or + in form data) |
| & | %26 |
| = | %3D |
| / | %2F |
| ? | %3F |
| # | %23 |
| é | %C3%A9 |
Encode values, not whole URLs
The most important rule: build the URL from parts and encode each value.
https://example.com/search?q= + encode(Dubai Mall & Café)
gives ?q=Dubai%20Mall%20%26%20Caf%C3%A9. If you forgot to encode, the & would start a new parameter and your search term would be cut to "Dubai Mall ".
encodeURIComponent vs encodeURI
| Function | Leaves alone | Use for |
|---|---|---|
encodeURIComponent |
letters, digits, - _ . ! ~ * ' ( ) |
A single value — query parameter, path segment, a URL inside a parameter |
encodeURI |
all of the above plus : / ? & = # ; , + @ |
A complete URL that only needs spaces and Unicode fixed |
In almost every case you want component encoding. The free URL Encoder / Decoder offers both modes.
%20 or +?
Both can mean a space, but + only means space in the query string of form-encoded data (application/x-www-form-urlencoded). In a path, + is a literal plus sign. When decoding query strings that came from an HTML form, treat + as space; elsewhere, don't.
Double encoding
If you see %2520 in a URL, something encoded an already-encoded value: %20 became %25 + 20. Common causes: encoding a value twice in code, or passing an encoded URL to a library that encodes again. Decode once and check whether %XX sequences remain.
Inspecting a URL
Paste a full URL into the Parse mode of the URL tool to see its protocol, host, path and every query parameter decoded in a table — handy for checking UTM tags on campaign links or debugging redirect parameters.
Where this matters for business sites
- UTM-tagged campaign links with spaces or ampersands in campaign names
- WhatsApp click-to-chat links with a prefilled message — the message must be encoded
- Search and filter pages that put user input into the URL
- Redirect parameters (
?next=/account), which must be encoded and validated to prevent open redirects
Pyalm builds websites and web apps where URLs, redirects and tracking parameters are handled correctly by design.
Related free tools
URL Encoder / Decoder | Base64 Encoder | API Tester | All free tools