URL Encoding Explained: What %20, %3D and %26 Mean

Why URLs are encoded

A URL can only safely carry a limited set of characters: letters, digits and a few symbols such as hyphen, underscore, dot and tilde. Anything else, including spaces, accented letters, emoji and symbols that have a special job in a URL, must be written as a percent sign followed by two hexadecimal digits. This is called percent-encoding. A space becomes %20, an equals sign becomes %3D and an ampersand becomes %26.

Reserved characters

Some characters have a meaning inside a URL. A question mark starts the query string, an ampersand separates parameters, an equals sign joins a name to a value, a hash starts the fragment and a slash separates path segments. If one of these appears inside a value, it has to be encoded or the URL will be read the wrong way.

For example, in a search for tea & coffee, the ampersand must be written as %26. Otherwise the server sees the query q=tea and a new, empty parameter named coffee.

Encode a component or a full URL

There are two common cases, and they need different treatment.

• Component mode encodes everything that is not safe, including slashes, question marks and ampersands. Use it for a single value that will be placed inside a URL, such as a search term or a redirect address passed as a parameter. In JavaScript this is encodeURIComponent.
• Full URL mode leaves the structural characters alone and only encodes what cannot appear anywhere in a URL, such as spaces and non-English letters. Use it when you already have a complete address. In JavaScript this is encodeURI.

Spaces: %20 or a plus sign

In a path, a space is always %20. In a query string sent by an HTML form, a space is often written as a plus sign instead. This is a leftover of the form encoding format. The result is that a plus in a query may mean a space or a real plus, depending on who reads it.

When decoding query strings that came from a form, turn on the option to treat plus as space. When decoding anything else, leave it off. A real plus sign that you want to keep should be written as %2B.

Non-English text

Characters outside basic English are first turned into UTF-8 bytes, and each byte is then percent-encoded. The letter e with an acute accent becomes %C3%A9 because it takes two bytes. A single emoji can take twelve or more encoded characters. This is normal, and a decoder will turn it back into the original text.

Double encoding and other problems

Double encoding happens when an already encoded value is encoded again. The percent sign itself becomes %25, so %20 turns into %2520. If a link shows %2520 or %253D in the address bar, something encoded it twice. Decode once and compare the result.

Other common problems are encoding a whole URL in component mode, which breaks the slashes and the colon after https, and forgetting to encode a value that contains an ampersand. When a link behaves strangely, paste it into the decoder, read the plain text, and check each parameter on its own.