URL Encoding Explained: What %20 Means and Why It Matters

URLs look simple, but they have strict rules about which characters are allowed. When a URL needs to include a character that falls outside the permitted set - a space, an ampersand, a non-ASCII character like an accented letter - that character must be encoded. This process is called URL encoding or percent-encoding, and understanding it prevents a common category of web application bugs.

Why URLs Have Character Restrictions

The URL specification (RFC 3986) defines a limited set of characters that are safe to include in a URL without encoding: letters (A–Z, a–z), digits (0–9), and four unreserved symbols - hyphen (-), underscore (_), period (.), and tilde (~). Everything else must be percent-encoded.

Additionally, some characters are reserved because they have structural meaning within a URL: the slash (/) separates path segments, the question mark (?) starts the query string, the ampersand (&) separates query parameters, the equals sign (=) separates parameter names from their values, and the hash (#) begins the fragment identifier. If any of these characters appear as literal data values rather than structural separators, they must be encoded so the URL parser does not misinterpret them.

How Percent-Encoding Works

Each unsafe character is replaced with a percent sign (%) followed by two hexadecimal digits representing the character value. A space becomes %20. An ampersand becomes %26. An equals sign becomes %3D. Non-ASCII characters such as accented letters are first converted to their UTF-8 byte sequence, and then each byte is individually percent-encoded. The letter e with an acute accent (é) becomes the two-byte UTF-8 sequence %C3%A9.

encodeURI vs encodeURIComponent

JavaScript provides two encoding functions that are often confused. encodeURI() encodes a complete URL. It leaves structural characters like slash, question mark, ampersand, and equals sign unencoded, because they are needed for the URL to function. encodeURIComponent() encodes a single value such as a query parameter. It encodes everything including the structural characters, which is exactly what you want when a parameter value might contain an ampersand or equals sign.

• Use encodeURI() when you have a complete URL and want to encode only characters that are never valid in a URL.
• Use encodeURIComponent() when encoding individual query parameter names or values.
• Never use the deprecated escape() function - it handles non-ASCII characters incorrectly.

Spaces: %20 vs the Plus Sign

You will see spaces encoded two different ways. In a URL path, spaces must be %20. In a query string encoded using the application/x-www-form-urlencoded format - which is what HTML forms use by default - spaces are encoded as a plus sign (+). Both are valid in their respective contexts. When decoding, always check which convention was used, because a + in a path segment is a literal plus sign, not a space.