What is URL Encoding?
URL encoding, also known as percent-encoding, is the mechanism defined by RFC 3986 for representing characters that are not allowed in a Uniform Resource Identifier (URI). It works by replacing each unsafe character with a percent sign (%) followed by two hexadecimal digits that represent the character's byte value in UTF-8. For example, a space becomes %20 and an ampersand becomes %26.
Encoding is necessary because URLs use certain characters as structural delimiters. The question mark (?) separates the path from the query string, the ampersand (&) separates individual query parameters, and the hash (#) marks the beginning of a fragment identifier. When these characters appear as literal data rather than delimiters, such as inside a search query or a user's name, they must be encoded so that browsers and servers interpret the URL correctly.
A common source of confusion is the difference between the + sign and %20 for spaces. The + convention comes from the older application/x-www-form-urlencoded format used by HTML form submissions, while %20 is the standard defined by RFC 3986. Most modern servers accept both in query strings, but %20 is the correct encoding for spaces in URL paths. Understanding this distinction helps prevent subtle bugs when constructing URLs programmatically or debugging redirect chains.
Frequently Asked Questions
What characters need URL encoding?
Any character that is not an unreserved character must be percent-encoded when it appears as literal data within a URL component. RFC 3986 defines unreserved characters as uppercase and lowercase letters (A-Z, a-z), digits (0-9), hyphen (-), period (.), underscore (_), and tilde (~). Reserved characters like :, /, ?, #, @, !, $, &, ', (, ), *, +, ,, ;, and = serve as structural delimiters in URLs. When you need to use one of these reserved characters as actual data, for instance as part of a query parameter value, it must be percent-encoded to avoid ambiguity.
What is the difference between encodeURI and encodeURIComponent?
In JavaScript, encodeURI is designed to encode an entire URI while preserving characters that have structural meaning, such as :, /, ?, #, and &. This makes it suitable for encoding a full URL where you want the overall structure to remain intact. encodeURIComponent, on the other hand, encodes those structural characters as well, making it the right choice for encoding individual pieces of a URL like query parameter keys or values. Using encodeURI on a query value would leave ampersands and equals signs unencoded, potentially breaking the query string structure.
Why do spaces sometimes appear as + and sometimes as %20?
The + sign for spaces originates from the application/x-www-form-urlencoded content type, which is the default encoding for HTML form submissions. In this format, spaces are replaced with + to save a few bytes. The %20 representation is the standard percent-encoding defined by RFC 3986 and applies to all parts of a URL. In practice, most web servers and frameworks accept both + and %20 in query parameters, but only %20 is valid in URL paths and fragment identifiers. When building URLs in code, using %20 consistently is the safest approach.
What is percent encoding?
Percent encoding is the official name for URL encoding as defined by RFC 3986. It works by replacing each unsafe or reserved character with a percent sign (%) followed by two hexadecimal digits representing the character's byte value in UTF-8. For example, a space becomes %20 and an ampersand becomes %26. The name "percent encoding" comes from the % character used as the escape prefix.
Should I encode the entire URL or just parameters?
You should only encode the individual components of a URL, such as query parameter keys and values, not the entire URL. Encoding the full URL would escape structural characters like ://, /, ?, and & that browsers and servers need to interpret the URL correctly. Use encodeURIComponent in JavaScript for individual values, and encodeURI only when you need to encode a complete URL while preserving its structure.