Tools4U
Developer Tools

URL Encoding Explained: Why Special Characters Break Your Links

June 13, 2026
5 min read

Have you ever clicked a link in an email only for it to land on a "404 Not Found" page, even though the URL looked perfectly normal? Or perhaps you've seen a web address that looks like a bowl of alphabet soup, filled with %20, %26, and %3D.

This isn't a glitch. It's URL Encoding (also known as Percent Encoding), and it is a fundamental rule of the internet that every web user—and certainly every developer—needs to understand.

The ASCII Limit: Why We Need Encoding

The internet was built on a very old standard called ASCII (American Standard Code for Information Interchange). This standard only includes a limited set of characters: the English alphabet (A-Z), numbers (0-9), and a handful of symbols like -, _, ., and ~.

URLs can only contain these safe ASCII characters.

However, we often need to include other things in our web addresses:

  • Spaces
  • Special characters like &, ?, or = (which already have special meanings in URLs)
  • Accented letters like é or ñ
  • Emojis like 🚀

If you try to put a space directly into a URL, the browser will think the URL has ended. If you put an & into a search query, the browser will think you're starting a new parameter. To solve this, we use a translation system.

Percent Encoding Explained

URL encoding works by replacing "unsafe" characters with a % followed by two hexadecimal digits that represent the character's value in the UTF-8 character set.

For example, the ASCII value for a space is 32. In hexadecimal, 32 is 20. Therefore, a space becomes %20 in a URL.

Common Encoded Values

Here are the most common "soup" characters you'll see:

  • Space: %20
  • & (Ampersand): %26
  • = (Equals): %3D
  • ? (Question Mark): %3F
  • # (Hash): %23
  • / (Forward Slash): %2F

The Problem with Spaces: %20 vs. +

You may have noticed that sometimes spaces are represented by a plus sign (+) instead of %20. This is a common point of confusion.

  • %20 is the standard encoding for a space in any part of a URL.
  • + is a special "legacy" encoding used only in the query string (the part after the ?) of a URL, specifically for form data.

To be safe, modern developers generally prefer %20, as it works correctly in all contexts. If you're unsure which to use, the Tools4U URL Encoder defaults to the most compatible standard encoding.

Real-World Problems Caused by Missing Encoding

If you don't encode your URLs correctly, things will break in subtle and annoying ways.

1. Broken Search Queries

Imagine you have a search feature on your site. A user searches for "Jack & Jill." If your code generates the URL as yoursite.com/search?q=Jack & Jill, the server will think the search query is just Jack and that there is a new, empty parameter called Jill. By encoding the &, you get q=Jack%20%26%20Jill, which works perfectly.

2. Failed File Downloads

If you host a file called Meeting Notes 2026.pdf, many browsers will fail to download it if the link is literally mysite.com/files/Meeting Notes 2026.pdf. The space breaks the link. Encoding it to Meeting%20Notes%202026.pdf ensures it works for everyone.

3. Redirect Loops

When passing a "Return URL" as a parameter (e.g., login?return=/dashboard?user=1), the inner ? and = must be encoded. If they aren't, the login page will get confused about where its own parameters end and the return URL begins.

Encoding vs. Escaping: Is There a Difference?

In casual conversation, people often use "encoding" and "escaping" interchangeably, but in web development, they are different:

  • URL Encoding is what we've discussed here (Percent Encoding).
  • HTML Escaping is for showing code on a page (replacing < with &lt;).
  • JavaScript Escaping is for strings in code (replacing a newline with \n).

Always ensure you are using the right tool for the specific medium you are working in.

How to Encode URLs (Code Examples)

You don't have to do this math manually. Every language has built-in functions:

JavaScript:

  • encodeURIComponent("A & B") → A%20%26%20B (Use this for parameter values)
  • encodeURI("https://site.com/a b") → https://site.com/a%20b (Use this for full URLs)

Python: import urllib.parse; urllib.parse.quote("A & B")

PHP: urlencode("A & B")

For a quick manual fix, or to see what is hidden inside a long encoded string, you can use the Tools4U URL Encoder/Decoder. It's 100% private and runs entirely in your browser.

Decoding: Reading the Soup

Decoding is the process of turning the %20 back into a space. This is useful when you are looking at server logs or trying to debug a complex tracking URL from a marketing platform. By pasting the long, messy string into a decoder, you can finally read the human names, dates, and campaign titles hidden inside.

URL encoding is the invisible glue that keeps the web together. It allows us to use all the richness of our human languages and emojis within a technical system that was designed for simple English characters. Whether you are building an API or just sending a link to a friend, knowing the rules of the "URL soup" will save you from broken links and frustration. If you have a link that isn't working, try running it through our URL Encoder to see if a hidden special character is the culprit.