URL Encoding Explained - Everything You Need to Know

URL encoding, also known as percent-encoding, is a crucial technique for safely transmitting data in URLs. Whether you're building web applications, consuming APIs, or handling user input, understanding URL encoding is essential.

What is URL Encoding?

URL encoding converts characters into a format that can be transmitted over the Internet. URLs can only contain a limited set of characters: letters, digits, and a few special symbols. All other characters must be encoded.

The Percent-Encoding Format

Each encoded character consists of a % followed by two hexadecimal digits representing the character's ASCII value:

Space → %20
! → %21
@ → %40
# → %23
$ → %24
& → %26
+ → %2B

Why URL Encoding Matters

Safe URL Transmission

URLs must be transmitted using ASCII characters. URL encoding ensures that special characters, Unicode characters, and binary data can be safely included in URLs.

Query Parameter Handling

When passing data via query strings, spaces and special characters must be encoded:

https://example.com/search?q=hello world
                 ↓
https://example.com/search?q=hello%20world

API Development

REST APIs often require encoded URLs for proper request handling:

GET /api/users?name=John%20Doe&city=New%20York

Common Encoded Characters

Special Characters

Unicode Characters

Characters outside ASCII must be UTF-8 encoded first, then percent-encoded:

中 → %E4%B8%AD
文 → %E6%96%87

Reserved Characters

URLs have reserved characters with special meaning:

• :/?#[]@!$&'()*+,;= - These characters may have special meaning in URLs and should be encoded when used literally.

How to Use Our URL Encoder/Decoder

Our free online tool makes URL encoding and decoding simple.

Encoding URL Components

Enter any text and click "Encode" to get the percent-encoded version. The tool handles:

• Spaces and special characters
• Unicode characters
• Full URLs with multiple parameters

Decoding Encoded URLs

Paste an encoded URL or text and click "Decode" to restore the original characters. This is useful for:

• Reading encoded query parameters
• Debugging URL-related issues
• Understanding how data is transmitted

Real-Time Conversion

The tool provides instant feedback as you type or paste content, making it easy to process multiple strings quickly.

Common Use Cases

Form Submission

When users submit forms, special characters in input must be encoded:

<form action="/search">
  <input name="query" value="coffee & donuts">
</form>

The browser encodes this to: ?query=coffee%20%26%20donuts

JavaScript Encoding

const param = "Hello World!";
const encoded = encodeURIComponent(param);
console.log(encoded); // Hello%20World%21

Python Encoding

from urllib.parse import urlencode, quote

param = "Hello World!"
encoded = quote(param)
print(encoded)  # Hello%20World%21

API Query Parameters

Building API request URLs:

const baseUrl = 'https://api.example.com/search';
const params = {
  query: 'tech & innovation',
  category: 'startups'
};

const queryString = Object.entries(params)
  .map(([k, v]) => `${k}=${encodeURIComponent(v)}`)
  .join('&');

const url = `${baseUrl}?${queryString}`;
// https://api.example.com/search?query=tech%20%26%20innovation&category=startups

When to Use encodeURI vs encodeURIComponent

JavaScript provides two encoding functions with different purposes:

encodeURI

Encodes a full URL, preserving characters that are valid in URLs:

encodeURI("https://example.com/path?name=John")  // Same - doesn't encode = and ?
encodeURI("https://example.com/path name")       // Encodes space

encodeURIComponent

Encodes a URL component, encoding everything except letters and digits:

encodeURIComponent("https://example.com")       // Encodes : / and .
encodeURIComponent("name=John&age=30")           // Encodes = and &

Important: Never use encodeURI when you need to encode query parameter values.

Best Practices

Always Encode User Input

Never trust user input. Always encode data before including it in URLs to prevent injection attacks and ensure correct transmission.

Use the Right Function

Use encodeURIComponent for parameter values and encodeURI for full URLs (when appropriate).

Double Encoding Pitfalls

Be careful not to encode already-encoded values, as this leads to double encoding and incorrect data.

UTF-8 Encoding

Always use UTF-8 encoding for best internationalization support.

Frequently Asked Questions

What's the difference between URL encoding and HTML encoding?

URL encoding is for URLs and query parameters, while HTML encoding is for preventing XSS attacks in web content. They use different character sets and purposes.

Why does + become %20 in URLs?

The + character is reserved in query strings to represent spaces. When encoding for query parameters, spaces become %20. Some systems still accept + for spaces, but percent-encoding is more reliable.

Can I encode entire URLs?

You should encode URL components separately, not the entire URL at once. This preserves the URL structure while encoding the necessary parts.

What characters should never be encoded?

When using encodeURIComponent, don't encode: A-Z a-z 0-9 - _ . ! ~ * ' ( )

Conclusion

URL encoding is a fundamental skill for web developers. Our free online URL Encoder/Decoder makes it easy to encode and decode URLs and text, helping you build more robust web applications. Bookmark this page for quick access whenever you need to work with encoded URLs.

For more developer tools, check out our JSON Formatter and Unix Timestamp Converter.