Developer Tools

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

URL encoding converts special characters into percent-encoded sequences so they can be safely transmitted in a URL. Here is why %20 is a space, which characters need encoding, and how to do it correctly.

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

URLs can only contain a limited set of characters defined by RFC 3986. Any character outside this set spaces, Unicode characters, ampersands, equals signs must be percent-encoded to prevent misinterpretation by servers, browsers, and intermediaries. Encode or decode any URL string instantly with the URL Encoder.

How Percent-Encoding Works

Each character is represented as a percent sign followed by its two-digit hexadecimal ASCII code:

  • Space → %20 (ASCII 32 = 0x20)
  • & → %26
  • = → %3D
  • # → %23
  • + → %2B (in query strings, + also represents a space)

Unicode characters (non-ASCII) are first converted to UTF-8 bytes, then each byte is percent-encoded. The emoji 😀 encodes to %F0%9F%98%80 four bytes because it is a 4-byte UTF-8 character.

Reserved vs Unreserved Characters

RFC 3986 divides characters into:

  • Unreserved A–Z, a–z, 0–9, - _ . ~ never encoded
  • Reserved : / ? # [ ] @ ! $ & ' ( ) * + , ; = have special meaning in URLs; encode when used as data, not structure
  • Everything else must always be encoded

encodeURI vs encodeURIComponent in JavaScript

JavaScript provides two functions with importantly different behaviour:

  • encodeURI(url) encodes a complete URL, preserving reserved characters like /, ?, #
  • encodeURIComponent(value) encodes a single value to be used inside a URL, encoding reserved characters too

Rule of thumb: use encodeURIComponent() for values in query strings; use encodeURI() for full URLs you do not want to break. The MDN encodeURIComponent documentation explains the exact character exclusions.

Common URL Encoding Mistakes

  • Double-encoding encoding an already-encoded URL converts %20 to %2520. Always decode before re-encoding.
  • Encoding the full URL instead of the value encoding https://example.com/path?q=hello world as a whole breaks the structure; only hello world should be encoded
  • Using + in path segments + means space only in the query string (application/x-www-form-urlencoded format), not in URL paths. Use %20 in paths.

Frequently Asked Questions

Why does a space sometimes become + and sometimes %20?

In HTML form submissions using application/x-www-form-urlencoded encoding (the default for GET forms), spaces are encoded as +. In standard URL percent-encoding per RFC 3986, spaces must be %20. Most server-side languages handle both, but %20 is unambiguous and correct in all contexts.

Is URL encoding the same as Base64?

No. URL encoding makes specific characters safe for use in URLs. Base64 encoding converts binary data to ASCII text. They solve different problems. For encoding binary data in a URL (such as an image), you would use Base64 encoding of the binary, then URL-encode the Base64 string if necessary. See our Base64 Encoder for binary encoding.

Related

Keep reading

Apr 04, 2026 JWT Explained: Structure, Claims, and How to Decode One JSON Web Tokens appear everywhere in modern authentication flows. Understanding their three-part structure helps you debug auth issues, validate claims, and avoid common security pitfalls. Apr 08, 2026 Base64 Encoding Explained: What It Is and When to Use It Base64 encodes binary data as ASCII text, making it safe to transmit through text-only systems. Here is when to use it, when not to, and how it works under the hood. Apr 12, 2026 How to Format and Validate JSON: A Developer's Practical Guide Malformed JSON breaks APIs silently and makes debugging painful. Here is how to validate JSON, understand its syntax rules, and avoid the most common mistakes.