What Is URL Encoding and Why Does It Matter?
URL encoding, also known as percent-encoding, is a mechanism defined in RFC 3986 for representing characters that are not allowed or have special meaning inside a URL. Since URLs can only contain a limited set of ASCII characters, any character outside that set — spaces, non-ASCII letters, or reserved delimiters — must be converted into a percent sign followed by two hex digits.
Without proper encoding, URLs can break, query parameters can be misinterpreted, and web applications become vulnerable to injection attacks. Whether you are building API endpoints, constructing redirect URLs, or passing user input through query strings, correct encoding is a non-negotiable requirement.
When to Use URL Encoding
When appending user input to a URL's query string, always encode the values with encodeURIComponent to prevent characters like & and = from breaking the parameter structure.
REST APIs and webhooks frequently require encoded values in path segments and headers. Unencoded special characters in API calls are a common source of 400 Bad Request errors.
OAuth flows and SSO systems pass callback URLs as parameters inside other URLs. The inner URL must be fully encoded to avoid ambiguity between the outer and inner URL's delimiters.
HTML forms submitted via GET encode their fields into the URL using the application/x-www-form-urlencoded content type, which is a variant of percent-encoding where spaces become +.
Non-ASCII characters such as accented letters, CJK characters, or emoji are first converted to UTF-8 byte sequences, then each byte is percent-encoded. This ensures compatibility across all browsers and servers.
Common Characters and Their Encoded Forms
URL encoding replaces unsafe characters with a percent sign followed by their hexadecimal ASCII code. Some characters have special roles in URL syntax (reserved characters) and must be encoded when used as literal data rather than as delimiters.
The key distinction is between encodeURIComponent (encodes everything except unreserved characters) and encodeURI (preserves URL-structural characters like :, /, ?, and #). Use the component variant for parameter values and the URI variant for complete URLs.
Common mistake
Using encodeURI on a query parameter value is a frequent bug. Because it does not encode & or =, those characters will be interpreted as query-string delimiters instead of literal data. Always use encodeURIComponent for individual parameter values.
Frequently Asked Questions
What is URL encoding?
URL encoding (percent-encoding) converts characters that are not allowed in a URL into a safe format. Special characters are replaced with a percent sign followed by two hexadecimal digits representing the character's ASCII code. For example, a space becomes %20.
What is the difference between encodeURI and encodeURIComponent?
encodeURI encodes a full URL but preserves characters with special meaning in URL syntax (like :, /, ?, #, &, =). encodeURIComponent encodes everything except unreserved characters, making it ideal for encoding individual query parameter values or path segments.
When should I use URL encoding?
Whenever you include user-generated content in a URL. This includes query parameters, form data, path segments, and fragment identifiers. Proper encoding prevents broken links, avoids injection attacks, and ensures special characters are transmitted correctly.
Why do spaces become %20 or + in URLs?
In standard percent-encoding (RFC 3986), a space is encoded as %20. In HTML form submissions using application/x-www-form-urlencoded, spaces are represented as +. Both are valid depending on context. JavaScript's encodeURIComponent produces %20, which is the universally safe option.
Can URL encoding handle Unicode and emoji characters?
Yes. JavaScript's encodeURIComponent first converts the string to UTF-8 bytes, then percent-encodes each byte. A single emoji or non-ASCII character may produce multiple percent-encoded triplets. Decoding reverses this process to recover the original Unicode text.