Guide

URL Encoding Explained — What is %20 and Why URLs Look Like That

URL encoding (percent encoding) replaces characters that are not allowed in URLs with a % followed by two hex digits. Learn why it exists, which characters need encoding, and how to encode and decode URLs correctly.

Why %20 exists

A URL can only contain a limited set of characters defined by RFC 3986. Spaces, accented letters, and punctuation like &, =, and # are not allowed — or they carry special meaning that would confuse the parser.

URL encoding (also called percent encoding) solves this by replacing each forbidden character with a % followed by its two-digit hexadecimal ASCII code. A space is ASCII 32, which is 20 in hex — hence %20.

Example: a search query with spaces and special characters
Original: https://example.com/search?q=hello world & more
Encoded: https://example.com/search?q=hello%20world%20%26%20more

Safe vs unsafe characters

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

A–Z a–z 0–9 - _ . ~

Everything else should be percent-encoded when used as data — especially when passing values in a query string.

Common encoded characters

CharacterEncodedNotes
%20Space — most common one you will see
!%21Exclamation mark
#%23Hash — reserved as fragment identifier
$%24Dollar sign
&%26Ampersand — reserved as query param separator
'%27Single quote / apostrophe
(%28Open parenthesis
)%29Close parenthesis
+%2BPlus sign (sometimes used for space in query strings)
,%2CComma
/%2FForward slash — reserved as path separator
:%3AColon — reserved in scheme (https:)
=%3DEquals — reserved as key=value separator
?%3FQuestion mark — reserved as query start
@%40At sign — reserved in authority section
[%5BOpen bracket
]%5DClose bracket

encodeURI vs encodeURIComponent

JavaScript has two built-in encoding functions — and choosing the wrong one is a common mistake:

encodeURI(url)

Encodes a complete URL. Leaves reserved characters like /, ?, &, =, and # untouched because they are structural parts of the URL.

encodeURIComponent(value)

Encodes a value to embed inside a URL — a query string parameter, a path segment. Encodes reserved characters too, including & and =. Use this when encoding user input going into a URL.

encodeURI('https://x.com/path?q=a&b')
→ 'https://x.com/path?q=a&b' ← & not encoded
encodeURIComponent('a&b=c d')
→ 'a%26b%3Dc%20d' ← &, =, space all encoded

+ vs %20 in query strings

In the query string portion of a URL, a + is traditionally interpreted as a space by HTML form encoding (application/x-www-form-urlencoded). This is why Google search URLs use q=hello+world. %20 is the stricter, unambiguous form and is preferred in modern APIs. When in doubt, use encodeURIComponent which always produces %20.

Encode and decode URLs instantly

Paste any URL or string and get the encoded or decoded result

Open URL Encoder →
URL Encoding Explained — What is %20 and Why URLs Look Like That | DataToolkit | DataToolkit