What Is URL Encoding? A Complete Beginner's Guide

What Is URL Encoding?

URL encoding (also known as percent encoding) is the process of converting special characters into a format that can be safely transmitted in a URL. Since URLs can only contain ASCII alphanumeric characters and a few special symbols, any other characters must be encoded.

Why URL Encoding Is Necessary

URLs are designed to be transmitted over the internet using the ASCII character set. However, many characters have special meanings in URLs or cannot be transmitted reliably. URL encoding solves this problem.

#### Characters That Need Encoding

How URL Encoding Works

URL encoding replaces unsafe characters with a % symbol followed by a two-digit hexadecimal code:

Original: Hello World!
Encoded:  Hello%20World%21
Original: name=John Doe&age=30
Encoded:  name%3DJohn%20Doe%26age%3D30
Original: https://example.com/搜索?q=hello world
Encoded:  https://example.com/%E6%90%9C%E7%B4%A2?q=hello%20world

Reserved vs Unreserved Characters

#### Unreserved Characters (No encoding needed)

A-Z a-z 0-9 - _ . ~

#### Reserved Characters (Need encoding when used as data)

URL Encoding in Different Languages

#### JavaScript

// encodeURI: Encodes a complete URL
const url = encodeURI('https://example.com/搜索?q=hello world');
// https://example.com/%E6%90%9C%E7%B4%A2?q=hello%20world

// encodeURIComponent: Encodes a URL component
const param = encodeURIComponent('hello world & more');
// hello%20world%20%26%20more
// decodeURIComponent: Decodes an encoded component
const decoded = decodeURIComponent('hello%20world%20%26%20more');
// hello world & more

#### Python

import urllib.parse

# Encode a URL component
encoded = urllib.parse.quote('hello world & more')
# 'hello%20world%20%26%20more'
# Encode query parameters
params = urllib.parse.urlencode({'name': 'John Doe', 'q': 'hello world'})
# 'name=John+Doe&q=hello+world'
# Decode
decoded = urllib.parse.unquote('hello%20world')
# 'hello world'

encodeURI vs encodeURIComponent

This is one of the most common sources of confusion:

Common Use Cases

#### 1. Building Query Strings

const params = new URLSearchParams({
  name: 'John Doe',
  email: 'john@example.com',
  message: 'Hello & welcome!'
});
const url = https://api.example.com/contact?${params};
// https://api.example.com/contact?name=John+Doe&email=john%40example.com&message=Hello+%26+welcome%21

#### 2. Encoding Path Segments

const category = encodeURIComponent('electronics & gadgets');
const url = https://shop.example.com/category/${category};
// https://shop.example.com/category/electrics%20%26%20gadgets

#### 3. Handling Non-ASCII Characters

const searchTerm = encodeURIComponent(' café résumé');
// 'caf%C3%A9%20r%C3%A9sum%C3%A9'

How to Use Our Tool

Our URL Encoder makes encoding and decoding simple:

• Paste your URL or text
• Choose encode or decode
• Copy the result
• Use in your application

Best Practices

• Always encode user input — Never put raw user data in URLs
• Use the right function — encodeURI for URLs, encodeURIComponent for parameters
• Encode early, decode late — Store encoded, decode when displaying
• Use URLSearchParams — Modern API handles encoding automatically
• Don't double-encode — Check if data is already encoded
• Validate after decoding — Decoded data may contain injection attacks

Conclusion

URL encoding is fundamental to web development. It ensures that data can be safely transmitted in URLs, regardless of special characters or language. Understanding when and how to encode URLs prevents bugs and security vulnerabilities. Use our URL Encoder to encode or decode your URLs instantly.