If you have ever copied a URL from a browser address bar and noticed that spaces became %20 and other characters turned into strings starting with a percent sign, you have seen URL encoding in action. URL encoding, also called percent encoding, is the process of converting characters that are not safe to use in a URL into a format that is. It is one of the fundamental mechanics of how the web works, and understanding it helps you work with URLs, web forms, APIs, and links more effectively.
Why URLs Need Encoding
A URL is a string of characters that identifies a resource on the web. The characters that are allowed directly in a URL are a restricted set: letters A to Z and a to z, digits 0 to 9, and a few special characters like hyphens, underscores, periods, and tildes. Everything else needs to be encoded before it can safely appear in a URL.
The reason for this restriction is that many characters have special meaning in a URL structure. The forward slash separates path segments. The question mark starts the query string. The ampersand separates query parameters. The hash sign marks a fragment identifier. If you tried to use these characters in data being passed through a URL, the browser or server might misinterpret them as structural characters rather than data.
Spaces are also a problem since they are not valid in URLs at all — a URL with a literal space in it is technically malformed. URL encoding provides a universal way to include any character in a URL safely, regardless of whether it has a special meaning or is simply not in the allowed character set.
How URL Encoding Works
The encoding process is straightforward. Each character that needs to be encoded is replaced with a percent sign followed by two hexadecimal digits representing the character's ASCII or UTF-8 code point. This is why it is called percent encoding.
A space has an ASCII code of 32, which is 20 in hexadecimal. So a space becomes %20 in a URL. The at sign used in email addresses has an ASCII code of 64, which is 40 in hexadecimal, so it becomes %40. Non-ASCII characters like letters with accents or characters from non-Latin alphabets are encoded using their UTF-8 byte sequences, which can result in multiple percent-encoded groups for a single character.
Common URL Encoding Examples
| Character | Encoded Form | Why it needs encoding |
|---|---|---|
| Space | %20 | Not valid in URLs |
| ! | %21 | Reserved character |
| # | %23 | Marks fragment identifier |
| $ | %24 | Reserved character |
| & | %26 | Separates query parameters |
| + | %2B | Sometimes used as space in forms |
| / | %2F | Separates path segments |
| : | %3A | Separates protocol and host |
| = | %3D | Separates key from value in query |
| ? | %3F | Starts query string |
| @ | %40 | Used in authentication syntax |
Real URL Encoding Examples
Search Query with Spaces
The browser automatically encodes spaces as %20 when you type a search query. The second version is what actually gets sent to the server.
Email Address in a URL Parameter
The @ symbol in an email address needs encoding as %40 when passed as a URL parameter to avoid ambiguity with URL syntax.
Hindi Text in a URL
Non-ASCII characters like Hindi, Arabic, Chinese or emoji get encoded as their UTF-8 byte sequences. Modern browsers display the human-readable version in the address bar but send the encoded version.
URL Encoding vs HTML Encoding
URL encoding and HTML encoding are two different things that are often confused. URL encoding, as explained above, uses percent signs followed by hex codes to encode characters in URLs. HTML encoding uses named entities or numeric references to encode characters in HTML content, such as using & for an ampersand in HTML text or < for a less-than sign.
They serve different purposes in different contexts. URL encoding is for characters in URLs. HTML encoding is for characters in HTML content. Using the wrong encoding in the wrong context causes errors. A URL encoded string like %26 in HTML content should stay as %26 for the URL, but if you want to display an ampersand as visible text in an HTML page, you use & in your HTML markup.
When You Need to Manually Encode a URL
Most of the time, browsers, frameworks, and libraries handle URL encoding automatically. When you type a search query, the browser encodes it. When a form submits data, the browser encodes the form values. When you use a URL in JavaScript, built-in functions like encodeURIComponent() handle the encoding.
You might need to think about URL encoding manually when building URLs by hand in code, when debugging why a link is not working as expected, when working with APIs that require properly encoded parameters, or when shortening or sharing URLs that contain special characters.
Need to shorten a long or complex URL? Try Textaura's free URL shortener tool — clean, fast, no account needed.
Open URL ShortenerFrequently Asked Questions
What is the difference between %20 and + for spaces in URLs?
Both %20 and + can represent a space, but in different contexts. In the path portion of a URL, spaces should be encoded as %20. In the query string portion, HTML forms historically encoded spaces as + signs using a format called application/x-www-form-urlencoded. Both are technically valid but %20 is more universally understood. Modern web development generally favors %20 in all contexts for consistency.
Why does my browser show a readable URL but the actual link is encoded?
Modern browsers display internationalized URLs in a human-readable format in the address bar, showing the actual characters rather than their percent-encoded versions. This is called IDN or Internationalized Domain Names display, and a similar thing happens for non-ASCII characters in paths and query strings. The actual bytes sent in the HTTP request are the encoded versions, but the browser decodes them for display purposes to make the address bar more readable.
How do I decode a percent-encoded URL?
You can decode a URL manually by looking up the hex values in an ASCII table and replacing each percent-encoded sequence with its corresponding character. In practice, most people use an online URL decoder tool or the browser's developer console, where you can use the JavaScript decodeURIComponent() function to decode any encoded string.
Does URL encoding affect SEO?
Search engines handle URL encoding correctly and understand that %20 and a space represent the same thing. However, clean human-readable URLs without unnecessary encoding are generally better for both users and SEO. For page URLs, it is better practice to use hyphens instead of spaces rather than relying on %20 encoding, since hyphens in URL paths are more conventional and readable.