How to Encode and Decode URLs - Complete Guide with Examples

URL encoding is a method to convert special characters and non-ASCII characters into a safe format that can be transmitted over the internet. When URLs contain spaces, accented characters, or reserved symbols like &, =, or ?, these must be encoded to ensure proper transmission between web browsers and servers.

The encoding process replaces unsafe characters with a percent sign (%) followed by two hexadecimal digits representing the byte value in UTF-8 encoding. For example, a space becomes %20, and the ampersand (&) becomes %26. This process ensures that URLs remain valid and can be correctly interpreted by web servers.

URL decoding is the reverse process, converting percent-encoded characters back to their original form. This is essential when processing form data, query parameters, or any user input that was encoded before being included in a URL.

The URL encoding formula follows the percent-encoding standard (RFC 3986):

Encoding Formula: Replace each unsafe character with % + 2-digit hex code

Step-by-step methodology:

1. Identify characters that need encoding: spaces, special characters (<>#%{}|\^~[]`), non-ASCII characters (accents, emojis, CJK characters), and reserved characters (&;=+?$@!)
2. Convert the character to its UTF-8 byte representation
3. Convert each byte to a 2-digit hexadecimal number
4. Prepend each hex value with %

Example conversions:

• Space (ASCII 32) → 0x20 → %20
• Ampersand (ASCII 38) → 0x26 → %26
• Equal sign (ASCII 61) → 0x3D → %3D
• Umlaut 'ü' (UTF-8: C3 BC) → %C3%BC
• Emoji '😀' (UTF-8: F0 9F 98 80) → %F0%9F%98%80

Example 1: Simple query parameter with spaces

Original URL: https://example.com/search?q=hello world

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

Step-by-step: The space character (ASCII 32 = 0x20) is replaced with %20

Example 2: URL with special characters

Original URL: https://example.com/api?name=John&age=30&city=New York

Encoded: https://example.com/api?name=John%26age%3D30%26city%3DNew%20York

Step-by-step: & (ASCII 38 = 0x26) → %26, = (ASCII 61 = 0x3D) → %3D, space → %20

Example 3: International characters

Original: https://example.com/greet?message=Hello Café

Encoded: https://example.com/greet?message=Hello%20Caf%C3%A9

Step-by-step: 'é' in UTF-8 is bytes C3 A9, so it becomes %C3%A9

1. Double encoding: Encoding an already encoded URL. For example, encoding %20 again produces %2520. Always check if your data is already encoded before applying encoding.

2. Encoding the entire URL: Only encode the query parameters and path segments, not the protocol, domain, or reserved characters that have structural meaning. Encoding the entire URL like https://example.com to %68%74%74%70%3A%2F%2F... breaks the URL structure.

3. Incorrect character set: Always use UTF-8 encoding. Using legacy encodings like ISO-8859-1 can cause mojibake (garbled text) when handling international characters.

4. Encoding reserved characters unnecessarily: Characters like / in path segments or ? in the query string separator should not be encoded unless they are part of the actual data value.

5. Forgetting to decode server-side: When receiving URL-encoded data on the server, remember to decode it before processing. Failing to decode means your database will store %20 instead of spaces.