URL Encoding Explained — When & Why to Encode URLs | TextNoteKit

If you've ever copied a link and noticed characters like %20 or %3F magically appear in place of spaces and punctuation, you've seen URL encoding in action. Also known as percent-encoding, it is a mechanism for safely transmitting data over the internet.

In this guide, we will explore what URL encoding is, why it's absolutely essential, which characters must be encoded, and the differences between JavaScript's built-in encoding functions.

What is URL Encoding?

URL encoding is a process that converts characters into a format that can be safely transmitted over the Internet. Uniform Resource Locators (URLs) can only be sent over the Internet using the US-ASCII character set. Because URLs often contain characters outside the ASCII set, or characters that have special meaning within a URL, they have to be converted into a valid ASCII format.

This conversion is done by replacing the unsafe character with a % followed by two hexadecimal digits that represent the character's ASCII value.

→ Try our URL Encoder/Decoder tool to see this in action

Why is URL Encoding Necessary?

URLs are constructed according to specific rules, and certain characters have special reserved meanings within a URL. For example:

• ? indicates the start of a query string.
• & separates different parameters in a query string.
• = separates a parameter's name from its value.
• / separates directories or paths.
• # indicates a fragment identifier.

If you want to pass one of these characters as data within a URL (like passing the string "Q&A" as a parameter), you must encode the & so the browser doesn't interpret it as the start of a new parameter.

Percent-Encoding Explained

Percent-encoding replaces unsafe characters with a % followed by the character's hex equivalent. Here are some of the most common URL encoded characters:

Reserved vs Unreserved Characters

In the context of URLs, characters are classified into two groups:

• Reserved characters: Characters that sometimes have special meaning. These must be encoded when not used for their special purpose. (e.g., ! * ' ( ) ; : @ & = + $ , / ? % # [ ])
• Unreserved characters: Characters that have no special meaning. These never need to be encoded. (e.g., A-Z, a-z, 0-9, -, _, ., ~)

Note: To generate clean, human-readable URLs for pages and blog posts, you should use a URL Slug Generator rather than raw URL encoding, as slugs replace spaces with hyphens instead of %20. Read our URL Slugs SEO Guide for more context.

encodeURI vs encodeURIComponent in JavaScript

If you write JavaScript, you've likely seen both of these functions. Knowing when to use which is critical for avoiding broken links.

1. encodeURI()

This function is used to encode an entire URL. It ignores characters that are needed to structure a URL properly, such as ?, /, :, &, and =.

const url = "https://example.com/search?q=hello world";
console.log(encodeURI(url));
// Output: "https://example.com/search?q=hello%20world"

2. encodeURIComponent()

This function encodes a component of a URL (like a specific query parameter value). It encodes almost everything, including structural characters like ? and /.

const param = "hello&world=true";
console.log(encodeURIComponent(param));
// Output: "hello%26world%3Dtrue"

Form Data Encoding (application/x-www-form-urlencoded)

When you submit an HTML form using the GET or POST method, the browser encodes the form data before sending it. The default encoding type is application/x-www-form-urlencoded.

This is very similar to standard URL encoding, but with one historical quirk: spaces are encoded as + (plus signs) instead of %20. This is why you sometimes see search URLs like ?q=hello+world. When parsing query parameters on a server, modern frameworks handle this conversion automatically.

Common Mistakes to Avoid

• Double Encoding: Running encodeURIComponent on a string that has already been encoded. %20 becomes %2520.
• Encoding Full URLs with encodeURIComponent: This breaks the URL completely because https:// turns into https%3A%2F%2F.
• Forgetting to Encode User Input: If you append raw user input to a URL without encoding it, users can break your application by typing & or = in their input.

Practical Examples

You can use the URL Encoder tool to experiment, but here are some common scenarios:

Scenario A: Email in a query string
Raw: user@example.com
Encoded: user%40example.com

Scenario B: JSON payload in URL
Raw: {"id":1}
Encoded: %7B%22id%22%3A1%7D

Frequently Asked Questions