You have probably seen URLs sprinkled with %20, %3D, and %26 and wondered what they mean. That is URL encoding at work โ a small but essential mechanism that keeps links from breaking when they contain spaces, symbols, or non-English characters. Get it wrong and your query parameters silently corrupt; get it right and everything just works. This guide explains when and how to use it.
Why URLs Need Encoding
A URL has a strict structure. Certain characters are reserved because they mark boundaries: ? starts the query string, & separates parameters, = joins a key to its value, # begins a fragment, and / divides path segments. Other characters โ spaces, quotes, and most non-ASCII letters โ are simply unsafe in a URL and may be altered in transit.
The problem arises when your actual data contains one of these characters. If a search term is "salt & pepper", the & would be misread as a parameter separator, splitting your value in two. URL encoding prevents this by replacing problem characters with a percent sign followed by their hexadecimal code โ so a space becomes %20 and & becomes %26.
What Encoding Looks Like
Percent-encoding is mechanical: each unsafe byte becomes % plus two hex digits. A few common ones:
| Character | Encoded |
|---|---|
| space | %20 |
| & | %26 |
| = | %3D |
| ? | %3F |
| # | %23 |
| / | %2F |
The URL Encoder/Decoder applies these instantly in both directions, so you never have to look them up.
The Crucial Distinction: Whole URL vs. One Value
This is where most mistakes happen. There are two encoding jobs, and they are not the same:
- Encoding a full URL. You want to keep the structure โ the
/,?,&, and=should stay as separators. In JavaScript this isencodeURI. - Encoding a single value. When you have one piece of data โ a search term, a name, a redirect URL โ that will sit inside a query parameter, you must encode everything, including
/,?, and&, so the data cannot break the URL structure. In JavaScript this isencodeURIComponent.
The rule of thumb: encode each query parameter value separately with component encoding, then assemble the URL. Encoding the whole finished URL is usually a mistake.
Tip: A frequent bug is passing one URL as a parameter to another (a redirect link). The inner URL must be fully component-encoded, or its own
?and&will hijack the outer URL's parameters.
Step-by-Step: Encode a URL Value
Use the URL Encoder/Decoder, which runs in your browser.
- Paste the value you want to put into a URL โ a search phrase, a path, or a nested link.
- Click Encode to get the percent-encoded string.
- Drop it into your URL as a parameter value.
- To reverse the process, paste an encoded string and Decode it to read the original.
Encoding and Related Formats
URL encoding often appears alongside its cousins. If you are placing binary or a token in a URL, you might first Base64-encode it (URL-safe variant) and then it needs no further percent-encoding. And if the same data will land in HTML rather than a URL, you need HTML entity encoding instead. Each format protects a different context โ URLs, binary channels, and HTML respectively.
Common Mistakes to Avoid
- Double encoding. Encoding an already-encoded string turns
%20into%2520. Encode once. - Encoding the whole URL when you meant one value. This mangles the separators. Encode components individually.
- Forgetting to encode user input. Any value that comes from a user and goes into a URL must be encoded.
- Confusing space representations.
%20and+both mean space but in different contexts; let the tool handle it.
Conclusion
URL encoding is the quiet guardian of every link that carries data. The key insight is the split between encoding a full URL (keep the structure) and encoding a single value (encode everything). Encode each parameter value once, assemble your URL, and special characters will travel safely. When in doubt, run it through a tool rather than guessing at hex codes.
Encode or decode a URL now with the free URL Encoder/Decoder โ private and instant.