URL Encoding: What, Why, and How

Introduction

URL encoding (also called percent-encoding) is a method to encode special characters in URLs so they can be safely transmitted over the internet. Understanding URL encoding is essential for web development, API integration, and handling form data.

This guide explains how URL encoding works and when to use it.

Why URL Encoding is Needed

URLs can only contain certain ASCII characters. Special characters must be encoded to:

• Prevent misinterpretation by browsers and servers
• Handle spaces and special characters safely
• Support non-ASCII characters (Unicode)
• Avoid conflicts with URL syntax (?, &, =, #)

How URL Encoding Works

Special characters are converted to % followed by their hexadecimal ASCII code:

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

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

  // Space = %20 (ASCII 32 = 0x20)

Common Character Encodings

Practical Examples

Search Queries:

// Original
  https://google.com/search?q=web development tips

  // Encoded
  https://google.com/search?q=web%20development%20tips

Email Addresses:

// Original
  https://example.com/user?email=john@example.com

  // Encoded
  https://example.com/user?email=john%40example.com

Special Characters:

// Original
  https://api.com/search?q=100% free!

  // Encoded
  https://api.com/search?q=100%25%20free%21

URL Encoding in Code

JavaScript:

// Encode entire URL component
  const query = "hello world";
  const encoded = encodeURIComponent(query);
  // Result: "hello%20world"

  // Encode full URL (preserves :, /, ?)
  const url = "https://example.com/path?q=hello world";
  const encoded = encodeURI(url);
  // Result: "https://example.com/path?q=hello%20world"

  // Decode
  const decoded = decodeURIComponent("hello%20world");
  // Result: "hello world"

Python:

from urllib.parse import quote, unquote

 # Encode
  encoded = quote("hello world")
  # Result: 'hello%20world'

  # Decode
  decoded = unquote("hello%20world")
  # Result: 'hello world'

Common Mistakes

• Double encoding: Encoding already encoded strings
• Wrong function: Using encodeURI instead of encodeURIComponent
• Forgetting to encode: Sending unencoded special characters
• Encoding entire URL: Should only encode values, not structure

// Wrong - encodes the entire URL structure
  const wrong = encodeURIComponent("https://api.com/user?id=123");
  // Result: "https%3A%2F%2Fapi.com%2Fuser%3Fid%3D123"

  // Correct - only encode the value
  const id = encodeURIComponent("user@123");
 const url = `https://api.com/user?id=${id}`;
  // Result: "https://api.com/user?id=user%40123"

Best Practices

• Always encode user input before adding to URLs
• Use encodeURIComponent for query parameters
• Use encodeURI for full URLs
• Decode on the server side
• Test with special characters: &, =, ?, #, %
• Handle Unicode characters properly

Try Our Tools

Explore our free online developer tools: