URL Encoding Explained: When and Why to Percent-Encode

A URL can only safely contain a limited set of characters, so anything outside that set, a space, an ampersand inside a value, an accented letter, has to be rewritten. URL encoding, also called percent-encoding, is that rewrite. It is the reason a search for "fish and chips" shows up in the address bar as fish%20and%20chips. Encode or decode any string with the URL Encoder, right in your browser.

How percent-encoding works

The rule is simple: take the byte you cannot use directly, write its value in two hexadecimal digits, and put a percent sign in front. A space is byte 32, which is 20 in hex, so it becomes %20. An ampersand is byte 38, hex 26, so it becomes %26. For characters beyond plain ASCII, the character is first turned into its UTF-8 bytes and then each byte is percent-encoded, which is why a single accented letter can become two percent codes.

space      ->  %20
&          ->  %26
?          ->  %3F
=          ->  %3D
é (UTF-8)  ->  %C3%A9

Which characters are always safe

A small group of characters, called unreserved, never need encoding and should be left alone. Everything else is either reserved, meaning it has a structural job in the URL, or simply unsafe to send raw.

The reserved characters are the interesting case. A slash that separates path segments must stay a literal /, but a slash inside a value, say a date written 2026/06/30 used as a single parameter, has to become %2F or the URL parser will read it as a new path segment. The same goes for & and = inside a query value: unencoded, they look like the boundaries between parameters rather than part of one.

The %20 versus + confusion

encodeURIComponent vs encodeURI in JavaScript

JavaScript ships two encoders, and picking the wrong one is a common bug. The difference is how much of the URL structure they assume you want to keep.

• encodeURIComponent encodes a single piece of a URL, such as one query value. It escapes the reserved delimiters too, so & : / ? = all become percent codes. Use it for the value you are dropping into a parameter.
• encodeURI encodes a whole URL and deliberately leaves the structural characters : / ? # & = alone, on the assumption they are doing their delimiter job. Use it only when you have a complete URL string that is already shaped correctly.

Encoding is for correctness, not secrecy

Like Base64, percent-encoding is fully reversible and hides nothing. Its job is to keep a URL syntactically valid, not to protect what it carries. In fact the opposite caution applies: because URLs end up in server logs, browser history, and referrer headers, you should not put genuinely sensitive data in a query string at all, encoded or not. Encoding makes a value safe to transmit, never safe to expose.

Encode it locally

The URL Encoder percent-encodes and decodes text in your browser, so even a URL with a token or an internal path never leaves your machine. The grammar of what is reserved and what is unreserved comes straight from the URI standard, RFC 3986, with MDN's guide to encodeURIComponent covering the JavaScript side in practical terms.