URL Encoding Explained: What Every Developer Needs to Know

What Is URL Encoding?

URL encoding (also called percent-encoding) converts special characters into a format that can be transmitted over the Internet. Characters like spaces, ampersands, and question marks need to be encoded because they have special meaning in URLs.

Why URL Encoding Matters

URLs can only be sent over the Internet using a limited set of characters. All other characters must be encoded:

• Spaces become %20
• Ampersands become %26
• Question marks become %3F
• Unicode characters become multiple %XX sequences

Common Encoded Characters

| Character | Encoded |

| --- | --- |

| Space | %20 |

| ! | %21 |

| # | %23 |

| $ | %24 |

| & | %26 |

| = | %3D |

| ? | %3F |

| @ | %40 |

When to Encode

Query Parameters

Always encode values in query strings:

```

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

```

Path Segments

Encode special characters in URL paths:

```

https://example.com/user/John%20Doe

```

Form Data

HTML forms encode data automatically when submitted.

Encoding vs. Decoding

Encoding

Converts special characters to percent-encoded format:

```

Hello World! → Hello%20World%21

```

Decoding

Converts percent-encoded format back to regular characters:

```

Hello%20World%21 → Hello World!

```

Common Pitfalls

Double Encoding

Don't encode already-encoded URLs:

```javascript

// Wrong

encodeURIComponent(encodeURIComponent(str))

// Correct

encodeURIComponent(str)

```

Partial Encoding

Only encode the parts that need it:

```javascript

// Encode just the value, not the whole URL

const url = 'https://example.com?q=' + encodeURIComponent(query)

```

Use Cases

• Building URLs with user input
• API request parameters
• Query strings
• Form submissions
• Sharing URLs with special characters

Try our URL Encoder to encode and decode URLs instantly!