Have you ever noticed that when you search for something with spaces on Google, the web address suddenly fills up with weird characters like %20 or + signs? This happens because of a strict rule: URLs can only be sent over the internet using the ASCII character set.
Because URLs cannot contain spaces or special symbols (like ♥, ã, or even a simple ? used in the wrong context), these characters must be translated into a format the internet understands. This translation process is called URL Encoding.
URL encoding works by replacing unsafe characters with a % symbol followed by two hexadecimal digits that represent that specific character's code in the ASCII table.
The most famous and common example is the space character.
https://example.com/my new page.html
https://example.com/my%20new%20page.htmlWhile modern browsers will often encode characters automatically for you behind the scenes when you submit a form, as a web developer, you must know how to read these codes to understand what your URLs are actually requesting.
| Character | Name | URL Encoded Value | Why is it dangerous? |
|---|---|---|---|
[space] |
Space | %20 (or +) |
URLs cannot contain blank spaces under any circumstances. |
! |
Exclamation | %21 |
Often triggers issues in older routing systems. |
# |
Hash / Pound | %23 |
HTML uses the `#` specifically for page bookmarks (Anchor targets). |
& |
Ampersand | %26 |
Used by the browser to separate variables in a URL query string. |
? |
Question Mark | %3F |
Signals to the server that the URL path has ended and query parameters are beginning. |
@ |
At Symbol | %40 |
Historically used in URLs for passing username/password credentials. |
When you are building dynamic web applications, you should never try to manually replace spaces with %20 yourself using search-and-replace. What if the user types a Chinese character or a complex emoji?
Instead, modern JavaScript provides a built-in function called encodeURIComponent() that instantly translates any string of text into a perfectly safe, web-ready URL format.
<script>
// A string with spaces and special characters
let userInput = "Hello World! @RedoHub";
// Convert it into a safe URL format
let safeString = encodeURIComponent(userInput);
// Output: Hello%20World!%20%40RedoHub
console.log(safeString);
</script>