← Back to Blog

Guide to URL Encoding: How Percent-Encoding Works

February 12, 2026 · 8 min read · Developer

Every time you search Google, click a link with special characters, or build an API request, URL encoding is happening behind the scenes. Understanding how it works is essential for developers, SEO professionals, and anyone working with web technologies. In this guide, we'll break down everything you need to know about URL encoding — also known as percent-encoding.

What Is URL Encoding?

URL encoding is the process of converting characters into a format that can be safely transmitted over the Internet. URLs can only contain a limited set of characters from the ASCII character set. Any character outside this set — including spaces, special symbols, and non-ASCII characters like accented letters — must be encoded.

The encoding works by replacing unsafe characters with a percent sign (%) followed by the two-digit hexadecimal representation of the character's ASCII value. For example:

Why Is URL Encoding Necessary?

URLs have a strict syntax defined by RFC 3986. Certain characters have special meaning in URLs:

If your data contains any of these characters, they must be encoded so the browser and server can distinguish between structure and content. Without encoding, a search query like rock & roll would break the URL structure because & is interpreted as a parameter separator.

Safe vs Unsafe Characters

Characters that don't need encoding include letters (A-Z, a-z), digits (0-9), and a few special characters: - _ . ~. Everything else should be encoded when used as data in a URL.

How Percent-Encoding Works Step by Step

The encoding process follows these steps:

  1. Convert the character to its byte representation using UTF-8 encoding
  2. For each byte, write a percent sign followed by the two hex digits
  3. Multi-byte characters (like emoji or CJK characters) produce multiple percent-encoded triplets

For example, the euro sign € is encoded as %E2%82%AC because its UTF-8 representation is three bytes: 0xE2, 0x82, 0xAC.

URL Encoding in JavaScript

JavaScript provides two built-in functions for URL encoding, and understanding the difference is critical:

encodeURIComponent()

Use encodeURIComponent() to encode individual values in a URL — query parameters, path segments, or form data. It encodes everything except: A-Z a-z 0-9 - _ . ~ ! ' ( ) *

const query = 'hello world & goodbye';
const encoded = encodeURIComponent(query);
// "hello%20world%20%26%20goodbye"

const url = `https://example.com/search?q=${encoded}`;
// "https://example.com/search?q=hello%20world%20%26%20goodbye"

encodeURI()

Use encodeURI() to encode a complete URL. It preserves characters that have special meaning in URLs like : / ? # [ ] @ ! $ & ' ( ) * + , ; =

const url = 'https://example.com/path with spaces/file.html';
const encoded = encodeURI(url);
// "https://example.com/path%20with%20spaces/file.html"
Rule of thumb: Use encodeURIComponent() for values, encodeURI() for complete URLs.

Common URL Encoding Mistakes

Here are pitfalls developers frequently encounter:

1. Double Encoding

Encoding a string that's already encoded turns %20 into %2520. Always check if data is already encoded before applying encoding again.

2. Using encodeURI for Query Values

If you use encodeURI() on a query parameter value containing & or =, those characters won't be encoded, breaking your URL structure.

3. Forgetting to Decode

When reading URL parameters on the server side, always decode them with the matching function: decodeURIComponent() or decodeURI().

4. Space Encoding: %20 vs +

In URL paths, spaces are encoded as %20. In HTML form submissions (application/x-www-form-urlencoded), spaces are encoded as +. Both are valid in their respective contexts, but mixing them up causes bugs.

URL Encoding in Other Languages

Most programming languages have built-in URL encoding functions:

URL Encoding and SEO

Search engines can handle URL-encoded characters, but clean, readable URLs are preferred for SEO. Instead of /products?category=men%27s%20shoes, consider using slugs like /products/mens-shoes. Google recommends using hyphens instead of spaces or encoded characters in URLs.

Practical Use Cases

Building API Requests

When constructing API URLs with query parameters, always encode user-supplied values to prevent injection and broken requests.

Sharing URLs with Special Characters

If a URL contains characters like brackets, pipes, or non-Latin characters, encoding ensures it works when pasted into emails, chat apps, or documents.

Form Submissions

HTML forms automatically encode data before sending, but AJAX/fetch requests require manual encoding when building query strings.

Try our free URL Encoder/Decoder tool:

⚡ URL Encoder / Decoder

Quick Reference Table

Here are the most commonly encoded characters:

Conclusion

URL encoding is one of those foundational web concepts that every developer should understand. Whether you're building APIs, handling form data, or debugging broken links, knowing how percent-encoding works will save you hours of frustration. Use encodeURIComponent() for values, encodeURI() for full URLs, and always be aware of double encoding. For quick encoding and decoding, try our free URL Encoder/Decoder tool — it works entirely in your browser.