URL Encoding Explained: What It Is, When to Use It, and How to Encode/Decode URLs Online

Introduction

If you've ever seen a URL full of %20 and %2F symbols, or had a form submission break because a space or an ampersand ended up somewhere it shouldn't, you've run into URL encoding — or the lack of it. URLs can only safely contain a limited set of characters, and everything else has to be converted into a special format before it can travel across the internet reliably. This guide explains exactly how URL encoding works, when encodeURIComponent and encodeURI behave differently, and how to encode or decode URLs and build query strings instantly using InstantToolsPro's URL Encoder & Decoder.

What Is URL Encoding?

URL encoding — also called percent-encoding — converts characters that aren't allowed in a URL into a format that can be safely transmitted over the internet. Each unsafe character is replaced with a % followed by two hexadecimal digits representing that character's byte value. A space becomes %20, a forward slash becomes %2F, an ampersand becomes %26, and so on.

URLs are restricted to a specific set of safe characters (letters, digits, and a handful of symbols) because certain characters already have structural meaning within a URL — a ? marks the start of a query string, an & separates parameters, a # marks a fragment. If those characters appeared unencoded inside a value (say, inside someone's name or a search term), the URL parser would misinterpret the structure of the URL itself. Encoding is what keeps arbitrary text safe to embed inside a URL without breaking it.

encodeURIComponent vs encodeURI — Why the Difference Matters

This is the single most common point of confusion when working with URL encoding, and getting it wrong causes real bugs.

encodeURIComponent encodes everything except letters, digits, and a small set of characters (- _ . ! ~ * ' ( )). This is what you use for encoding an individual piece of a URL — a query parameter's key or value — because it doesn't assume anything about the surrounding URL structure. If you're inserting a user's search term, name, or any dynamic value into a URL, this is almost always the function you want.

encodeURI is more conservative: it preserves characters that have structural meaning in a URL — : / ? # @ ! $ & = + , — and only encodes characters that would genuinely break the URL. This is meant for encoding an entire URL at once, where you want to keep the slashes, question marks, and ampersands intact as structural elements rather than encoding them into %2F, %3F, and %26.

Using encodeURI on a single query parameter value, or encodeURIComponent on a full URL, is a common mistake that produces broken or double-encoded URLs. The rule of thumb: encode individual values with encodeURIComponent, and only reach for encodeURI when you genuinely have a complete URL and want to preserve its structural characters.

Component Mode vs Full URL Mode

This is exactly why a good URL encoder tool offers two modes instead of one:

• Component mode behaves like encodeURIComponent — it aggressively encodes everything except the safest characters, ideal for encoding a single value that will be inserted into a query string.
• Full URL mode behaves like encodeURI — it preserves the structural characters of a complete URL (/, ?, &, =, #, :, @), so encoding an entire link doesn't corrupt its structure.

Picking the wrong mode is the most common reason people end up with a URL that looks "double encoded" or broken after using an online encoder — always check whether you're encoding a single value (Component mode) or a full link (Full URL mode) before converting.

What Is the Query String Builder?

Manually constructing a query string by hand — remembering to encode each value, adding & between parameters, and getting the ? in the right place — is tedious and error-prone. A Query String Builder solves this with a simple visual interface: add key-value pairs one at a time, and the tool automatically encodes each value and assembles the full query string for you.

For example, adding name = John Doe and city = New Delhi as separate key-value pairs automatically generates ?name=John%20Doe&city=New%20Delhi — correctly encoded and properly joined, without you needing to manually insert %20 or remember which characters need escaping. This is particularly useful when building API endpoints, search URLs, or tracking links with multiple UTM parameters.

Common Characters You'll See Encoded

• Space → %20 (or sometimes + in older form-encoding contexts — see below)
• / → %2F — encoded when it's part of a value rather than URL structure
• ? → %3F — encoded when it's part of a value, not marking the start of a query string
• & → %26 — encoded when it's part of a value, not separating query parameters
• = → %3D — encoded when it's part of a value, not assigning a query parameter
• # → %23 — encoded when it's part of a value, not marking a URL fragment
• @ → %40, : → %3A, + → %2B, % → %25 (the percent sign itself must be encoded too, since it's the escape character)

Space as %20 vs Space as + — What's the Difference?

This trips up a surprising number of developers. Standard percent-encoding (RFC 3986) represents a space as %20. However, an older encoding convention used specifically for HTML form submissions (application/x-www-form-urlencoded) represents a space as + instead. Both are technically valid in their respective contexts, but mixing them up causes bugs — a + decoded incorrectly as itself instead of as a space will show up as a literal plus sign in your data. If you're working with form-submitted data, expect + for spaces; for URLs and query strings you're building manually, %20 is the standard.

How to Use the URL Encoder/Decoder

1. Paste your text, URL, or query string into the input
2. Choose Component mode or Full URL mode depending on whether you're encoding a single value or a complete link
3. The tool auto-detects whether to encode or decode based on your input
4. Use the Query String Builder to add key-value pairs and auto-generate a fully encoded query string
5. Copy the result or download it directly