URL Encoding Explained: Usage & Safety

Have you ever seen a URL filled with %20, %3F, and other strange characters? That’s URL encoding (also known as percent-encoding) in action. It’s the internet’s way of ensuring that valid URLs can be sent safely over any network.

What is URL Encoding?

URLs can only be sent over the Internet using the ASCII character set. If a URL contains characters outside this set (like spaces, emojis, or foreign language characters), they must be converted into a valid ASCII format.

URL encoding replaces unsafe ASCII characters with a % followed by two hexadecimal digits.

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

You can test this yourself using our URL Encoder tool to instantly convert any text into a URL-safe format.

Reserved vs. Unreserved Characters

The URL specification (RFC 3986) splits characters into two groups:

• Unreserved characters — letters, digits, and - _ . ~ — never need encoding.
• Reserved characters — like / ? # [ ] @ ! $ & ' ( ) * + , ; = — have special meaning in a URL. They only need encoding when they appear inside a value rather than acting as a delimiter.

This distinction is the source of most encoding bugs: a & that separates query parameters must stay raw, but a & that is part of a value (for example a company name like “Johnson & Johnson”) must become %26.

Why Do We Need It?

Imagine you want to send a search query for “Hello World!”. If you put that directly into a URL, the space character breaks the link because spaces are not allowed in URLs.

• Incorrect: https://example.com/search?q=Hello World!
• Correct: https://example.com/search?q=Hello%20World!

Browsers do this automatically for you most of the time, but as a developer, you often need to handle this manually when building APIs or redirecting users.

Encoding in JavaScript: encodeURI vs encodeURIComponent

JavaScript ships with two encoding functions, and choosing the wrong one is a classic bug:

// encodeURI: keeps URL structure intact (does NOT encode / ? & = #)
encodeURI("https://example.com/search?q=hello world");
// → "https://example.com/search?q=hello%20world"

// encodeURIComponent: encodes everything, safe for a single value
encodeURIComponent("hello world & friends");
// → "hello%20world%20%26%20friends"

Rule of thumb: use encodeURIComponent for individual query-parameter values, and encodeURI (or nothing) for a full URL you’ve already assembled. When in doubt, paste both into our URL Encoder tool and compare the output.

URL Encoding vs Base64

It’s important not to confuse URL encoding with other schemes like Base64.

• URL Encoding: Used specifically for making strings safe for use in URLs.
• Base64: Used for encoding binary data (like images) into text. You can try our Base64 Encoder tool to see the difference.

Common Pitfalls

Double Encoding

One common bug is encoding a string twice.

1. Hello World -> Hello%20World
2. Hello%20World -> Hello%2520World (The % sign itself gets encoded as %25)

Encoding the Entire URL

You should usually only encode the values of query parameters, not the entire URL string. Encoding the protocol (https://) or the path separators will break the link entirely.

Forgetting to Encode + and Spaces

In query strings, a + is sometimes interpreted as a space (a legacy from application/x-www-form-urlencoded form data). If your value genuinely contains a plus sign — like the phone number +1 555 0100 — it must be encoded as %2B, or the receiving server may read it as a space.

URL Encoding and SEO

Clean, correctly encoded URLs matter for search engines too:

• Avoid spaces and uppercase in path segments; use hyphens for readability (/blog/url-encoding/, not /blog/URL%20Encoding/).
• Keep one canonical form. %2F inside a path and a real / are different URLs to Google, which can split ranking signals or create duplicate-content issues.
• Don’t double-encode in redirects, or you’ll generate broken, un-clickable links that crawlers abandon.

Frequently Asked Questions

Q: What is the difference between URL encoding and HTML encoding? A: URL encoding (percent-encoding) makes strings safe inside a URL. HTML encoding (entities like &) makes characters safe inside HTML so they aren’t parsed as markup. They solve different problems and are not interchangeable.

Q: Why does a space sometimes become + and sometimes %20? A: %20 is the universal percent-encoding for a space. + only means “space” within the query string of application/x-www-form-urlencoded data. In a path segment, always use %20.

Q: Do I need to encode non-English characters? A: Yes. Characters like é, ü, or 中 are first converted to their UTF-8 bytes, then each byte is percent-encoded (e.g. é becomes %C3%A9). Modern browsers display them nicely but transmit the encoded form.

Conclusion

URL encoding is a fundamental part of the web. Whether you are dealing with form submissions, API parameters, or simply sharing links, understanding percent-encoding prevents broken links and security issues.

Try our free URL Encoder to practice and inspect how your text is transformed — and if you’re working with credentials or tokens, read why encoding is never a substitute for encryption.