URL Encoding Explained: Why Spaces Become %20

Why URLs Need Encoding

A URL (Uniform Resource Locator) is a text string that identifies a resource on the internet. The problem is that URLs are used in systems that have special meanings for certain characters. For example:

• ? signals the start of a query string.
• & separates query parameters.
• = separates a key from its value.
• # marks an anchor fragment.
• / separates path segments.

If you want to use any of these characters as data rather than as part of the URL structure, you must encode them. Otherwise the browser or server interprets them as structural characters and breaks your URL.

Spaces are particularly problematic. A URL with a literal space is technically invalid. Different systems handle raw spaces differently — some convert them to +, others to %20 — which causes inconsistencies. Encoding them removes the ambiguity.

How Percent-Encoding Works

Percent-encoding (the technical name for URL encoding) replaces unsafe characters with a % sign followed by the two-digit hexadecimal ASCII code of the character.

Character	ASCII Code (hex)	URL Encoded
Space	20	%20
!	21	%21
"	22	%22
#	23	%23
$	24	%24
&	26	%26
+	2B	%2B
/	2F	%2F
=	3D	%3D
?	3F	%3F
@	40	%40

Non-ASCII characters (like accented letters, Arabic, Chinese, emoji) are first converted to their UTF-8 byte sequence, and then each byte is percent-encoded. So the emoji 😀 becomes %F0%9F%98%80 in a URL.

Safe Characters — No Encoding Needed

These characters are always safe in a URL and never need encoding:

• Letters: A–Z and a–z
• Digits: 0–9
• Unreserved symbols: - _ . ~

Everything else is either reserved (used by URL structure) or unsafe and should be encoded when appearing as data.

encodeURI vs encodeURIComponent

JavaScript provides two built-in functions for URL encoding, and they are not interchangeable.

encodeURI()

Designed for encoding a complete URL. It leaves reserved characters (/, ?, #, &, =, :, @) intact because they are valid parts of a URL structure.

encodeURI("https://example.com/search?q=hello world")
// → "https://example.com/search?q=hello%20world"

encodeURIComponent()

Designed for encoding individual values inside a URL — query parameters, path segments. It encodes reserved characters too, because when those characters appear inside a value they need to be escaped.

encodeURIComponent("price=100¤cy=USD")
// → "price%3D100%26currency%3DUSD"

Use this when building a URL by concatenating user input, form data or API values into a query string. If you used encodeURI for a query parameter value that contains &, the server would interpret it as a parameter separator rather than part of the value.

A Practical Example

Suppose you are building a search URL for a product named Coffee & Tea Mugs:

const name = "Coffee & Tea Mugs";
const url = "https://shop.example.com/search?q=" + encodeURIComponent(name);
// → "https://shop.example.com/search?q=Coffee%20%26%20Tea%20Mugs"

The & is encoded as %26, so the server receives the full product name as one value rather than splitting on the ampersand.

Encode and Decode Online

If you just need to encode or decode a URL quickly without writing code, the ToolsBox URL Encoder / Decoder handles both encodeURI and encodeURIComponent modes, plus decoding.

Frequently Asked Questions

Why do spaces become %20 in URLs?

URLs can only contain a specific set of ASCII characters. Spaces are not allowed, so they are percent-encoded as %20. The % sign signals that the following two hex digits are the ASCII code of the original character (20 hex = 32 decimal = space).

What is the difference between encodeURI and encodeURIComponent?

encodeURI encodes a full URL and leaves reserved characters like /, ?, # and & intact. encodeURIComponent encodes those too — use it for individual query parameter values being inserted into a URL string.

Which characters are safe in URLs without encoding?

Letters (A–Z, a–z), digits (0–9) and the four unreserved symbols: hyphen (-), underscore (_), period (.) and tilde (~). Everything else should be percent-encoded when used as data.

How do I encode a URL online?

Paste your text or URL into the ToolsBox URL Encoder / Decoder and choose your mode. The encoded result updates instantly and can be copied with one click.