URL Encoding: The Complete Guide for Web Developers

You’ve probably seen these strange character sequences in your URLs: %20, %3F, %26… That’s URL encoding in action, also known as percent encoding. Whether you’re looking to encode a URL online for free, understand how to encode special characters in a URL, or solve a URL encoding problem in PHP or JavaScript, this guide is for you.

URL encoding is essential for transmitting data correctly between browser and server. Without it, spaces, accents, and special characters like &, ?, or = would break your URLs or be interpreted incorrectly. This is a common issue that can cause hard-to-debug bugs in your web applications and APIs.

In this complete guide, we’ll demystify URL encoding and show you how to use our URL encoder to convert a URL to encoded format quickly and efficiently. You’ll also learn how to decode URLs with accents and avoid common mistakes.

What is URL Encoding?

URL encoding, also called percent encoding, is a mechanism that allows special characters to be safely represented in a URL. URLs can only contain a limited set of ASCII characters, so any character outside this set must be encoded.

How Does It Work?

Each special character is replaced by a % sign followed by its hexadecimal value in ASCII or UTF-8:

Why Encode URLs?

1. Avoid Ambiguities

Some characters have special meaning in URLs:

https://example.com/search?q=rock&roll&page=1

Without encoding, the browser interprets &roll as a new parameter instead of part of the search. The correct version:

https://example.com/search?q=rock%26roll&page=1

2. Support International Characters

URLs only natively support ASCII characters. To include accents or non-Latin characters:

# Incorrect (may not work)
https://example.com/café

# Correct
https://example.com/caf%C3%A9

3. Transmit Data Safely

In forms and APIs, URL encoding ensures your data arrives intact at the server.

Reserved Characters: The Complete List

Here are the characters that have special meaning in URLs and must be encoded if they’re part of your data:

General Reserved Characters

Reserved Characters in Query Strings

The Special Case of Spaces: %20 or +?

Why encode spaces in a URL? Because space is a forbidden character in URLs. This is a common question: should you use URL encode space %20 or +?

In the URL Path

Always use %20:

https://example.com/my%20document.pdf

In Query String Parameters

Both are technically valid, but there are nuances:

• +: Historical convention from HTML forms (application/x-www-form-urlencoded)
• %20: RFC 3986 standard, more universal

Our recommendation: Use %20 to be compatible with all situations. Our URL encoder uses this convention by default.

Using Our URL Encoder

Our URL encoder simplifies encoding and decoding your URLs. Here’s how to use it effectively:

Encoding a URL

1. Paste your text or URL in the input area
2. Click “Encode”
3. Copy the encoded result

Practical example:

Input: Search: summer 2025 & vacation
Output: Search%3A%20summer%202025%20%26%20vacation

Decoding a URL with accents

The reverse process works just as simply. Decoding a URL with accents is particularly useful when you receive encoded data from a form or API:

Input: caf%C3%A9%20cr%C3%A8me
Output: café crème

Use Cases in Development

Encoding a URL for REST API

When you need to encode a URL for REST API, it’s crucial to properly encode your parameters to avoid transmission errors:

// JavaScript
const searchTerm = "café & tea";
const url = `https://api.example.com/search?q=${encodeURIComponent(searchTerm)}`;
// Result: https://api.example.com/search?q=caf%C3%A9%20%26%20tea

// PHP
$searchTerm = "café & tea";
$url = "https://api.example.com/search?q=" . urlencode($searchTerm);

# Python
from urllib.parse import quote
search_term = "café & tea"
url = f"https://api.example.com/search?q={quote(search_term)}"

Building Dynamic Links

In your web applications, encode user values before integrating them into URLs:

// Bad - vulnerable to injections
const link = `/product/${productName}`;

// Good - secure
const link = `/product/${encodeURIComponent(productName)}`;

HTML Forms

Browsers automatically encode form data, but if you’re building requests manually:

const formData = new URLSearchParams();
formData.append('name', 'Jean-François');
formData.append('city', 'Montréal');
// Result: name=Jean-Fran%C3%A7ois&city=Montr%C3%A9al

Common Errors and How to Avoid Them

1. Double Encoding

The classic trap: encoding an already encoded URL.

Original: café
First encoding: caf%C3%A9 ✓
Double encoding: caf%25C3%25A9 ✗

Solution: Always decode first if in doubt, then re-encode if necessary.

2. Forgetting to Encode Parameters

// Problem: the & cuts the parameter
?search=rock&roll&page=1
// Server receives: search=rock, roll=undefined, page=1

// Solution
?search=rock%26roll&page=1
// Server receives: search=rock&roll, page=1

3. Encoding the Entire URL

Don’t encode the URL structure, only the data:

// Incorrect - breaks the URL
encodeURIComponent("https://example.com/search?q=test")
// Result: https%3A%2F%2Fexample.com%2Fsearch%3Fq%3Dtest

// Correct - encode only the value
"https://example.com/search?q=" + encodeURIComponent("test & value")

4. Encoding Issues with Accents

If you see characters like é instead of é, you probably have a character encoding issue (UTF-8 vs Latin-1).

Solution: Ensure your entire processing chain uses UTF-8:

• HTTP headers: Content-Type: text/html; charset=utf-8
• HTML meta: <meta charset="utf-8">
• Database: Use utf8mb4 in MySQL

Complementary Tools

For a complete web development workflow, also discover:

• Slug Generator: Create clean and SEO-friendly URLs
• Base64 Encoder: For encoding binary data
• JSON Formatter: For formatting your API responses

Conclusion

URL encoding is a fundamental skill for any web developer. By understanding when and how to encode your URLs, you’ll avoid many bugs related to data transmission and improve the robustness of your applications.

Our URL encoder is here to help you daily: whether it’s to quickly encode a string, decode a mysterious URL, or debug a data transmission problem.

Try it now and simplify your development workflow!