URL Encoding Guide — What is Percent Encoding?
URL encoding, also known as percent encoding, is the mechanism for translating special characters in URLs into a format that can be safely transmitted over the internet. Without it, URLs with spaces, Unicode characters, or symbols would break. Use our free URL Encode/Decode Tool to encode and decode URLs instantly.
Why URL Encoding Exists
URLs are restricted to a limited set of ASCII characters. Letters (A-Z, a-z), digits (0-9), and a few special characters (- _ . ~) are allowed directly. All other characters must be encoded. The encoding replaces each character with a percent sign (%) followed by its two-digit hexadecimal ASCII value. For example, a space (ASCII 32) becomes %20.
This is defined in RFC 3986 (Uniform Resource Identifier: Generic Syntax), which specifies the rules for URI syntax and percent-encoding. Without encoding, characters like ? and # would be misinterpreted as URL structure delimiters rather than literal characters.
Characters That Must Be Encoded
| Character | Name | Encoded | Why Encode? |
|---|---|---|---|
| Space | %20 | Not a valid URL character | |
| ! | Exclamation | %21 | Unsafe character |
| # | Hash | %23 | Reserved for fragment identifier |
| $ | Dollar | %24 | Reserved in some implementations |
| % | Percent | %25 | Used for encoding itself |
| & | Ampersand | %26 | Query parameter separator |
| + | Plus | %2B | Represents space in query strings |
| , | Comma | %2C | Reserved in some URI schemes |
| / | Forward slash | %2F | Path separator |
| : | Colon | %3A | Port/protocol separator |
| ; | Semicolon | %3B | Reserved in some contexts |
| = | Equals | %3D | Key-value pair separator |
| ? | Question mark | %3F | Query string start |
| @ | At sign | %40 | User info separator |
encodeURI vs encodeURIComponent
JavaScript provides two functions for URL encoding, and they serve different purposes:
encodeURI()
Encodes a complete URI by escaping special characters but preserving characters that are part of the URI syntax (/, ?, #, &, =, etc.). Use when encoding a full URL address.
encodeURI("https://example.com/my path") // "https://example.com/my%20path"encodeURIComponent()
Encodes a URI component by escaping ALL special characters except letters, digits, and - _ . ~. Use when encoding query parameter values that might contain special characters.
encodeURIComponent("name=John & Doe") // "name%3DJohn%20%26%20Doe"Common Bug: Using encodeURIComponent on a full URL or encodeURI on query parameters. Always match the function to your use case — encodeURI for full URLs, encodeURIComponent for parameter values.
Unicode and Emoji in URLs
URL encoding handles Unicode characters (including emojis) by first encoding the character as UTF-8 bytes, then percent-encoding each byte. For example, the emoji 🔥 (fire) becomes %F0%9F%94%A5 in encoded form. Modern browsers handle this transparently — what you see as https://example.com/🔥 is actually https://example.com/%F0%9F%94%A5 in the actual HTTP request.
URL Decoding
Decoding reverses the encoding process: %20 becomes a space, %26 becomes &, and so on. JavaScript provides decodeURI() and decodeURIComponent() corresponding to the encoding functions. Most web frameworks automatically decode URL parameters before they reach your application code.
Common Pitfalls
Double encoding
If you encode an already-encoded URL, %20 becomes %2520 (because % is encoded to %25). Some APIs require non-encoded values; others expect encoding. Know your API.
Spaces: %20 vs +
In query strings (after ?), spaces can be encoded as %20 or +. The application/x-www-form-urlencoded spec uses + for spaces, but RFC 3986 uses %20. New systems prefer %20.
Forgetting to decode output
When displaying encoded URLs to users, always decode them first. Nobody wants to see %20 when they expect a space.
Not encoding user input in URLs
If you're building URLs with user-provided values (search queries, form inputs), always encode them. Otherwise, a user typing &name=foo could inject extra query parameters.
Frequently Asked Questions
What is the difference between URL encoding and HTML entities?
URL encoding (percent-encoding) is for URLs and uses % followed by hex codes. HTML entities use & syntax for HTML content. They serve different purposes.
Do modern browsers automatically encode URLs?
Browsers encode URLs in the address bar automatically, but when you construct URLs programmatically in JavaScript, you must encode them yourself using encodeURI/encodeURIComponent.
Is %20 or + preferred for spaces in URLs?
%20 is the standard RFC 3986 encoding for spaces. The + encoding is from the older application/x-www-form-urlencoded spec. Use %20 for modern URLs.
How does URL encoding handle non-ASCII characters?
Non-ASCII characters are first encoded as UTF-8 bytes, then each byte is percent-encoded. For example, é (U+00E9) becomes %C3%A9.
Can I use our URL Encode/Decode tool offline?
Yes! All encoding and decoding happens locally in your browser using the built-in encodeURIComponent/decodeURIComponent functions. No internet connection is needed after the page loads.