What Is URL Encoding? A Simple Explanation with Examples

You have probably noticed that some web addresses contain strange sequences like %20 or %3A instead of spaces or colons. These are URL-encoded characters, and they exist because URLs have strict rules about which characters are allowed. Understanding URL encoding helps you debug broken links, build web applications correctly, and make sense of seemingly garbled addresses.

The Problem URL Encoding Solves

URLs were designed in the early days of the internet with a limited set of allowed characters. The original specification (RFC 1738, later updated by RFC 3986) permits only:

• Letters: A–Z and a–z
• Digits: 0–9
• A handful of special characters: - _ . ~
• Reserved characters with specific meanings: : / ? # [ ] @ ! $ & ' ( ) * + , ; =

Everything else — spaces, accented letters, Chinese characters, emoji, and many symbols — is not allowed in a raw URL. URL encoding (formally called percent encoding) is the mechanism for representing these forbidden characters in a URL-safe way.

How URL Encoding Works

The process is simple: each unsafe character is replaced with a percent sign (%) followed by two hexadecimal digits representing the character's byte value in UTF-8 encoding.

Here are common examples:

• Space → %20 (or + in form data)
• & → %26
• = → %3D
• ? → %3F
• # → %23
• / → %2F
• @ → %40
• % → %25 (yes, the percent sign encodes itself)

For multi-byte characters like accented letters or non-Latin scripts, each byte is encoded separately. For example, the e-acute character (é) in UTF-8 is two bytes (0xC3 0xA9), so it becomes %C3%A9.

A Real-World Example

Suppose you want to search Google for "best coffee & tea shops". The search URL would look like:

https://www.google.com/search?q=best%20coffee%20%26%20tea%20shops

Without encoding, the & would be interpreted as a parameter separator (since & separates query parameters in URLs), and the spaces would break the URL entirely. Encoding ensures the entire search phrase is transmitted correctly as a single parameter value.

When Does URL Encoding Happen?

In most cases, URL encoding happens automatically:

• Web browsers: When you type a URL with spaces or special characters, the browser encodes them before sending the request.
• HTML forms: When a form is submitted with GET method, the browser encodes all field values in the URL query string.
• Programming languages: Functions like JavaScript's encodeURIComponent(), Python's urllib.parse.quote(), and PHP's urlencode() handle encoding in application code.

You typically only need to encode manually when constructing URLs in code or debugging issues where encoding has gone wrong.

URL Encoding vs. HTML Encoding

These are different things that solve different problems, and confusing them is a common mistake:

• URL encoding (%26 for &) makes characters safe for use in URLs.
• HTML encoding (& for &) makes characters safe for use in HTML documents.

When you have a URL inside an HTML attribute (like an href), you may need both: the URL itself uses percent encoding, and then any ampersands in the URL use HTML encoding in the markup. For example:

<a href="page?name=John%20Doe&amp;city=New%20York">Link</a>

Common Encoding Mistakes

Double encoding: This happens when an already-encoded string is encoded again. For example, %20 becomes %2520 (the % gets encoded as %25). The result is a broken URL. Always check whether your input is already encoded before encoding it.

Encoding reserved characters unnecessarily: Characters like / and ? have special meaning in URLs. If you are building a path, you should not encode the slashes. Only encode characters within individual path segments or parameter values.

Using the wrong function: In JavaScript, encodeURI() encodes a full URL (leaving reserved characters intact), while encodeURIComponent() encodes a single component (encoding reserved characters too). Using the wrong one produces broken URLs.

The Space Character: %20 vs. +

Spaces can be encoded as either %20 or +, depending on context. The + notation is used in the application/x-www-form-urlencoded format (HTML form submissions). In all other parts of a URL (path segments, fragment identifiers), %20 is the correct encoding. When in doubt, %20 is always safe.

Decoding URL-Encoded Strings

Decoding reverses the process: %20 becomes a space, %26 becomes &, and so on. This is useful when you need to read the actual content of a URL parameter, debug a redirect chain, or process user input from a query string. Our URL encoder/decoder tool handles both directions instantly.