URL Encoding and Decoding Explained

A URL is more than plain text. Certain characters have special meanings inside a web address, such as separating a path from a query or one parameter from the next. URL encoding is the mechanism that lets you place arbitrary data inside a URL without breaking its structure or changing its meaning.

This guide explains how URL encoding works, why characters such as spaces become percent-encoded, and how to encode or decode URLs and query values correctly.

What is URL encoding?

URL encoding, also called percent-encoding, replaces characters that are unsafe or reserved with a percent sign followed by their byte value in hexadecimal. A few common examples when a character is encoded as data:

• A space becomes %20
• A slash becomes %2F
• A question mark becomes %3F

Whether a specific character needs encoding depends on context: the same character can be structural in one position and data in another. A slash separates path segments, but a slash inside a query value should be encoded so it is treated as data.

Why URLs need encoding

• Spaces are not allowed as raw characters in a URL.
• Reserved characters have structural meaning that must be preserved.
• Non-ASCII text needs a byte representation that URLs can carry.
• Query parameters must separate keys and values unambiguously.
• Fragment identifiers after a hash need consistent handling.
• Encoding removes ambiguity between the URL's structure and the data inside it.

Reserved and unreserved characters

Some characters are considered unreserved and generally do not need encoding, while reserved characters carry structural meaning.

• Unreserved examples: letters, digits, hyphen, underscore, period, and tilde.
• Reserved examples: colon, slash, question mark, hash, brackets, at sign, ampersand, equals, plus, comma, and semicolon.

URL encoding examples

A plain phrase with a space:

hello world  ->  hello%20world

A query value that contains a space and an ampersand:

red & blue  ->  red%20%26%20blue

Non-ASCII text is encoded as its UTF-8 bytes. For example, the accented word café becomes:

café  ->  caf%C3%A9

Full URL versus component encoding

There is an important difference between encoding a whole URL and encoding a single piece of it:

• Encoding a whole URL should preserve the characters that make it a valid URL, such as the scheme separator and slashes.
• Encoding a single query parameter value should encode more characters, because that value must not accidentally introduce URL structure.
• Encoding a path segment sits in between, keeping the segment intact while escaping data.

In JavaScript, four functions cover these needs:

• encodeURI() encodes a full URL while preserving characters that form its structure.
• encodeURIComponent() encodes an individual component and escapes more characters, including & = ? / and #.
• decodeURI() reverses encodeURI().
• decodeURIComponent() reverses encodeURIComponent().

In short, encodeURI is for a complete URL, and encodeURIComponent is for the individual values you place inside it. These functions are not the same as application/x-www-form-urlencoded handling, which has its own rules.

Why plus signs sometimes represent spaces

• In form-encoded query strings, a space is often represented as a plus sign.
• Ordinary percent-encoding usually represents a space as %20.
• A literal plus sign that must survive as data may need to be encoded as %2B.
• How a plus sign is interpreted depends on the parser reading the query string, so the two conventions can conflict.

Common URL encoding mistakes

• Encoding a value that is already encoded, producing sequences like %2520
• Decoding a value twice and corrupting it
• Encoding an entire URL with encodeURIComponent, which escapes the slashes and colon that make it a URL
• Leaving ampersands unencoded inside a parameter value, which splits it into extra parameters
• Confusing a plus sign meant as a space with a literal plus
• Producing malformed percent sequences that fail to decode
• Forgetting that non-ASCII text needs consistent character encoding

How to use the WebToolkit URL Encoder / Decoder

The URL Encoder / Decoder offers four modes so you can match the operation to what you are handling.

1. Open the URL Encoder / Decoder.
2. Choose a mode: Encode URI, Decode URI, Encode Component, or Decode Component.
3. Paste the URL, query value, or text.
4. Run the operation to see the result.
5. Copy or download the output.

Practical examples

• Encoding a search query so spaces and symbols travel safely in a query parameter
• Encoding a redirect parameter so its own query string does not merge with the outer URL
• Decoding a copied URL to read its parameters clearly
• Encoding Unicode text into its UTF-8 percent-encoded form
• Encoding a single path segment while leaving the rest of the path intact

Troubleshooting checklist

• Check whether the value is already encoded before encoding it again
• Identify whether you are handling a full URL or a single component
• Encode ampersands and equals signs inside parameter values
• Avoid decoding a value more than once
• Look for malformed percent sequences
• Keep character encoding consistent from start to finish

Frequently asked questions

Conclusion

URL encoding keeps data safe inside a URL by escaping characters that would otherwise change its structure. Match the operation to what you are handling, encode components separately from full URLs, and remember that encoding is not encryption. When you need to encode or decode quickly, use the URL Encoder / Decoder.