What Is URL Encoding? Percent-Encoding Explained Simply

By HSP · Published October 16, 2026 · 6 min read · Developer Guides

If you have ever copied a link and found %20 or %3D scattered through it, you have seen URL encoding at work. Web addresses are only allowed to contain a small set of characters, and several of those characters (such as ?, & and /) act as separators. Percent-encoding lets a URL carry any text, including spaces, symbols, emoji and Hindi or Chinese script, without confusing browsers and servers.

Why URLs need encoding

The rules for URLs are set out in RFC 3986, the internet standard for Uniform Resource Identifiers, and in the WHATWG URL Standard that modern browsers follow. They split characters into three groups:

• Unreserved characters are always safe: A–Z, a–z, 0–9 and the four symbols - . _ ~.
• Reserved characters have a job inside a URL: : / ? # [ ] @ separate the main parts, and ! $ & ' ( ) * + , ; = are used inside parts, for example & between query parameters and = between a name and its value.
• Everything else, including the space, quotation marks, % itself and any non-English letter, must be encoded.

The problem appears when your data contains one of the reserved characters. Imagine a search for “Tom & Jerry”. If the ampersand is left as it is, the server reads ?q=Tom & Jerry as a parameter q with the value “Tom ” followed by a second, broken parameter. Encoding it as %26 tells the server the ampersand is part of the text, not a separator.

How percent-encoding works, step by step

Each character that needs encoding is turned into bytes, and each byte is written as % plus two hexadecimal digits. Here is the rupee price “₹500”:

1. Turn the text into UTF-8 bytes. The rupee sign ₹ is three bytes in UTF-8: E2, 82 and B9 in hexadecimal. The digits 5, 0, 0 are unreserved, so they stay as they are.
2. Write each byte as %XX. E2 becomes %E2, 82 becomes %82 and B9 becomes %B9.
3. Join the result. “₹500” becomes %E2%82%B9500.

For plain ASCII characters the byte is simply the character code. A space is code 32, which is 20 in hexadecimal, so it becomes %20. If hexadecimal is unfamiliar, our guide to converting binary to decimal explains number bases. RFC 3986 recommends uppercase hex digits (%2F rather than %2f), although decoders accept both.

Common characters and their codes

You can check any of these in our free URL encoder and decoder. Paste text, press Encode component, and the result appears instantly in your browser, with nothing uploaded.

Worked example: building a search link

Say you want a link that searches a shop for “red shoes & socks” in the city “São Paulo”. Encode each value separately, then join them with the normal separators:

• red shoes & socks becomes red%20shoes%20%26%20socks
• São Paulo becomes S%C3%A3o%20Paulo

The finished link is https://example.com/search?q=red%20shoes%20%26%20socks&city=S%C3%A3o%20Paulo. Notice that the ?, the & between parameters and the two = signs stay unencoded, because they are doing their normal job. Only the data inside each value is encoded.

Encoding a whole URL vs one component

This is the most common source of bugs. JavaScript has two built-in functions, and they behave differently:

• encodeURIComponent() encodes everything except letters, digits and - _ . ! ~ * ' ( ). Use it for a single value, such as a search term or a file name, because it also encodes / ? & = #.
• encodeURI() leaves reserved characters such as : / ? & = # alone, so it suits an already-built address that only needs spaces and non-ASCII letters fixed.

Encoding a full address with encodeURIComponent() breaks it: https://example.com/a b turns into https%3A%2F%2Fexample.com%2Fa%20b, which is no longer a working link. Using encodeURI() on a value lets an ampersand slip through and split your parameter. Our tool offers both modes as separate buttons, Encode component and Encode full URL, plus Parse URL to break a link into its protocol, host, path and parameters.

Plus sign or %20 for spaces?

Both appear in the wild, and the difference comes from HTML forms. When a browser submits a form with the application/x-www-form-urlencoded format, the WHATWG URL Standard says spaces in the query are written as +. In the path part of a URL, a plus is just a plus. So:

• /search?q=red+shoes sent by a form means “red shoes”.
• /files/red+shoes.pdf in a path means a file literally named “red+shoes.pdf”.

When in doubt, use %20, which means a space everywhere. If your data contains a real plus sign, as in “100+5”, encode it as %2B so it is not turned into a space on the way in.

Common mistakes to avoid

• Double encoding. Encoding text that is already encoded turns %20 into %2520, because the % itself gets encoded. If you see %25 followed by two hex digits, something was encoded twice.
• Decoding a stray % sign. Text such as “50% off” must have its percent sign encoded as %25. A lone % without two valid hex digits after it makes decodeURIComponent() throw a “URI malformed” error.
• Treating encoding as security. Like Base64, which you can test in our Base64 encoder, URL encoding is fully reversible and hides nothing. Never put passwords or tokens in a URL expecting encoding to protect them.
• Forgetting JSON inside URLs. If you pass a small JSON object as a parameter, encode the whole string, because braces, quotes and colons all need it. Our guide to JSON basics covers the format, and fixing invalid JSON helps when a decoded value will not parse.

Clean URLs need less encoding

For your own pages, the easiest approach is to avoid characters that need encoding in the first place. A readable address such as /blog/what-is-url-encoding/ is easier to share and remember than one full of % codes. Our slug generator turns a title into a lowercase, hyphenated URL slug automatically. When a link has to be printed or shared offline, a QR code generator takes care of encoding it into the code for you.