TL;DR: URL encoding (percent-encoding) replaces unsafe characters with %XX sequences so links survive spaces, accents, and symbols. A space becomes %20, an ampersand becomes %26. The trick is knowing when to encode a whole URL versus a single query value — and that encodeURIComponent and encodeURI are not interchangeable.

A URL can only safely contain a limited set of characters. Everything else — spaces, accented letters, and reserved symbols like ?, &, # and = — has to be percent-encoded, or the link breaks or points somewhere unexpected.

Encoding Explained

What percent-encoding actually does

Each unsafe character is replaced by a percent sign followed by its hexadecimal byte value. A space is %20, an ampersand %26, a question mark %3F. Decoding reverses the process, turning every valid %XX back into the original character.

%20 versus + for spaces

Both can mean "space", but not in the same place. %20 is the percent-encoded space used throughout a URL path and query. The plus sign + means a space only in the application/x-www-form-urlencoded context — form submissions and query strings — and is treated literally elsewhere. When in doubt, %20 is the safer, more universal choice.

encodeURIComponent versus encodeURI

This is the distinction that trips people up. Use encodeURIComponent for an individual value you are dropping into a URL — the search term in ?q=hello%20world, for example. It encodes reserved characters like & and = so they can't be mistaken for URL structure. Use encodeURI only on a complete URL, where those reserved characters need to keep their structural meaning. Encoding a whole URL with encodeURIComponent would mangle its own :// and ?; encoding a lone parameter with encodeURI leaves dangerous characters unescaped.

When to encode

  • Building a query string from user input (search terms, filters, names).
  • Putting a link inside another link as a ?redirect= or ?url= parameter.
  • Handling filenames or paths that contain spaces or accents.
  • Debugging a link that works locally but breaks when shared.

URL encoding is not Base64

They solve different problems. Percent-encoding makes unsafe characters safe inside a URL; Base64 re-encodes binary data into a compact ASCII string for transport, and its output still needs URL-encoding if it goes into a link. Reaching for the wrong one produces links that look encoded but don't work.

A practical workflow

Paste the raw value into the URL Encoder / Decoder to encode a parameter or decode a suspicious %XX string — it decodes valid sequences and flags invalid ones instead of silently corrupting them. If the same content is also going through Base64, check it with the Base64 Encoder / Decoder so you apply the two steps in the right order.

Common mistakes to avoid

  • Encoding a full URL with encodeURIComponent and breaking its structure.
  • Assuming + means a space everywhere in a URL.
  • Double-encoding — running an already-encoded string through the encoder again.
  • Confusing percent-encoding with Base64.

Encode the parts, not the whole, and a link with spaces, accents, or a nested URL will travel intact.