๐Ÿ’ป Developer Tools

URL Encoding Explained: When and How to Encode URLs

Spaces, ampersands, and special characters can break a URL. Learn what URL encoding does, when you need it, and how to encode query parameters correctly.

๐Ÿ”—

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 is encodeURI.
  • 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 is encodeURIComponent.

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.

  1. Paste the value you want to put into a URL โ€” a search phrase, a path, or a nested link.
  2. Click Encode to get the percent-encoded string.
  3. Drop it into your URL as a parameter value.
  4. To reverse the process, paste an encoded string and Decode it to read the original.

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 %20 into %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. %20 and + 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.

Frequently Asked Questions

What characters need to be URL encoded?

Characters that have special meaning in a URL or are unsafe: spaces, and symbols like ? & = # / + %, plus most non-ASCII characters. Letters, digits, and a few marks (- _ . ! ~ * ' ( )) are left as-is by encodeURIComponent.

What is the difference between encodeURI and encodeURIComponent?

encodeURI is for a full URL and leaves structural characters like / ? & intact. encodeURIComponent is for a single piece, like one query value, and encodes those structural characters too. Use encodeURIComponent for individual parameter values.

Why does a space become %20 or +?

In the path and most contexts a space becomes %20. In form-encoded query strings, a space may be represented as +. Both decode back to a space in the right context.

Is encoding done privately?

Yes. The URL encoder runs in your browser, so your data is never uploaded.

๐Ÿ”— Try the URL Encoder/Decoder Tool

Free, private, and instant โ€” runs entirely in your browser with no uploads and no signup.

Open URL Encoder/Decoder โ†’
SL

Shashan Lumbhani

Founder & Developer, SJ Creation

Shashan Lumbhani is the founder and lead developer of SJ Creation Tool Box, a suite of 160+ privacy-first, browser-based tools used by people in over 50 countries. He builds fast, free utilities for PDF processing, image and video conversion, and everyday developer tasks โ€” all running entirely in the browser with zero file uploads.