Have you ever copied a link and noticed strange symbols like %20, %26, or
%3D replacing normal characters? These are not errors or corruption — they are
URL encoding, also known as percent-encoding. Understanding why they exist makes
you a better developer and a more informed internet user.
Why Does URL Encoding Exist?
A URL (web address) can only safely contain a limited set of ASCII characters. Characters like spaces, ampersands, equals signs, and many punctuation marks either have special meaning within URLs or are simply not permitted by the URL specification (RFC 3986). URL encoding converts these characters into a safe, transmittable format.
How Does It Work?
URL encoding replaces an unsafe character with a percent sign (%) followed by its
two-digit hexadecimal ASCII code. A space has ASCII code 32 — which is 20 in
hexadecimal. That makes a space become %20 in a URL.
| Character | URL Encoded | Reason |
|---|---|---|
| Space | %20 | Spaces not allowed in URLs |
| & (ampersand) | %26 | Separates query parameters |
| = (equals) | %3D | Used in key=value pairs |
| ? (question mark) | %3F | Starts the query string |
| # (hash) | %23 | Fragment/anchor identifier |
| @ (at sign) | %40 | Special meaning in auth URLs |
| + (plus) | %2B | Also sometimes represents space |
Real-World Example
When you search Google for "hello world & more", the URL becomes:
https://www.google.com/search?q=hello%20world%20%26%20more
Each space becomes %20 and the ampersand becomes %26 to preserve their
literal meaning rather than being interpreted as URL syntax.
encodeURI vs. encodeURIComponent in JavaScript
Developers often need to encode URLs programmatically. JavaScript provides two functions:
- encodeURI(): Encodes a complete URL, leaving characters like
:,/,?, and#intact (since they have meaning in a full URL) - encodeURIComponent(): Encodes a URL component (like a query parameter value), encoding those reserved characters too. Use this for individual values.
💡 Note: You may also see + used in place of %20 for
spaces, particularly in HTML form submissions using the
application/x-www-form-urlencoded content type. Both are valid in different
contexts, but %20 is preferred in modern APIs.
When Do You Need URL Encoding?
- When building links with user-supplied input (names, search queries, etc.)
- When working with query parameters in API calls
- When sharing URLs containing special characters
- When reading server logs and diagnosing malformed request URLs