HTML URL Encoding
Learn how to properly encode URLs and special characters for the web
Quick Answer
What is URL encoding?
URL encoding (percent encoding) converts special characters into URL-safe format using % followed by hexadecimal values (e.g., space becomes %20, & becomes %26). Required for special characters in URLs, query strings, and form data. Use encodeURI() for full URLs or encodeURIComponent() for URL parameters in JavaScript.
URLs can only be sent over the Internet using the ASCII character set. Since URLs often contain characters outside the ASCII set, the URL must be converted into a valid ASCII format. URL encoding replaces unsafe ASCII characters with a "%" followed by two hexadecimal digits.
What is URL Encoding?
URL encoding, also known as percent encoding, is a method to encode information in a Uniform Resource Identifier (URI). It converts characters into a format that can be transmitted over the Internet.
Why URL Encoding is Needed
- URLs can only use ASCII characters (0-127)
- Some characters have special meaning in URLs (?, &, =, etc.)
- Special characters must be encoded to be used literally
- Spaces and non-ASCII characters must be encoded
How URL Encoding Works
Percent encoding represents bytes as % followed by two hexadecimal digits. Non-ASCII characters are commonly encoded as several UTF-8 bytes. Encode the appropriate URL component, rather than assuming each character maps to one ASCII byte.
Example - Basic URL Encoding
Original: Hello World!
Encoded: Hello%20World%21
Original: user@example.com
Encoded: user%40example.com
Original: 100% Success
Encoded: 100%25%20Success
Format: %[HEX][HEX] where HEX is a
hexadecimal digit (0-9, A-F)
URL Structure
A typical URL consists of several parts:
Example - URL Parts
https://www.example.com:8080/path/to/page?name=value&key=data#section
Protocol: https://
Domain: www.example.com
Port: :8080
Path: /path/to/page
Query: ?name=value&key=data
Fragment: #sectionNote: Different parts of a URL have different encoding rules. Query parameters usually need the most encoding.
Reserved Characters
Some characters are reserved in URLs because they have special meanings. These characters must be encoded if you want to use them literally.
Common Character Encodings
Practical Examples
Example 1: Search Query
URL with Spaces
Original: https://example.com/search?q=html tutorial
Encoded: https://example.com/search?q=html%20tutorial
Or using + for space:
Encoded: https://example.com/search?q=html+tutorialExample 2: Special Characters
URL with Special Characters
Original: https://example.com/search?email=user@example.com&topic=HTML & CSS
Encoded: https://example.com/search?email=user%40example.com&topic=HTML%20%26%20CSSExample 3: International Characters
URL with Non-ASCII Characters
Original: https://example.com/search?name=José
Encoded: https://example.com/search?name=Jos%C3%A9
Original: https://example.com/product/café
Encoded: https://example.com/product/caf%C3%A9Example 4: Multiple Parameters
URL with Query String
Original: https://example.com/products?category=Books & Magazines&sort=priceℴ=desc
Encoded: https://example.com/products?category=Books%20%26%20Magazines&sort=price&order=descJavaScript URL Encoding
JavaScript provides built-in functions for URL encoding and decoding:
encodeURIComponent()
Encodes a URI component by escaping all characters except:
A-Z a-z 0-9 - _ . ! ~ * ' ( )
Example - encodeURIComponent()
Unavailable or blocked: markup context “Matching lesson markup is not supplied; this fragment uses a generic HTML scaffold.”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.
let url = "search?q=html & css";
let encoded = encodeURIComponent(url);
console.log(encoded);
// Output: search%3Fq%3Dhtml%20%26%20cssencodeURI()
Encodes a complete URI, preserving special URI characters like
: / ? # [ ] @ ! $ & ' ( ) * + , ; =
Example - encodeURI()
Unavailable or blocked: markup context “Matching lesson markup is not supplied; this fragment uses a generic HTML scaffold.”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.
let url = "https://example.com/search?q=html tutorial";
let encoded = encodeURI(url);
console.log(encoded);
// Output: https://example.com/search?q=html%20tutorialDecoding Functions
Example - Decoding URLs
// Decode URI component
let encoded = "html%20%26%20css";
let decoded = decodeURIComponent(encoded);
console.log(decoded); // Output: html & css
// Decode full URI
let fullUrl = "https://example.com/search?q=html%20tutorial";
let decodedUrl = decodeURI(fullUrl);
console.log(decodedUrl);
// Output: https://example.com/search?q=html tutorial
Tip: Use encodeURIComponent() for
query parameters and encodeURI() for complete URLs.
URL Encoding in Forms
When HTML forms are submitted with the GET method, form data is automatically URL encoded and appended to the URL.
Example - Form Submission
<form action="/search" method="GET">
<input type="text" name="query" value="HTML & CSS" />
<input type="text" name="category" value="Web Development" />
<button type="submit">Search</button>
</form>
<!-- Submits to: -->
<!-- /search?query=HTML+%26+CSS&category=Web+Development -->Note: The browser automatically handles URL encoding when forms are submitted. You don't need to manually encode form values.
Unsafe and Safe Characters
Unsafe Characters (Must be Encoded)
- Space and control characters (0-31, 127)
- Non-ASCII characters (128-255)
-
Reserved characters:
: / ? # [ ] @ ! $ & ' ( ) * + , ; = -
Unsafe characters:
" < > % { } | \ ^ ~ [ ] `
Safe Characters (No Encoding Needed)
- Alphanumeric:
A-Z a-z 0-9 - Unreserved:
- _ . ~
URL Encoding Best Practices
✓ Guidelines
- Always encode user-generated content before including in URLs
-
Use
encodeURIComponent()for query parameters - Use
encodeURI()for complete URLs - Encode spaces as %20 or + in query strings
- Be aware that + means space in query strings
- Test URLs with special characters to ensure proper encoding
- Decode URLs when displaying them to users
- Use UTF-8 encoding for international characters
- Don't double-encode URLs (encoding already encoded URLs)
- Keep URLs as short and readable as possible
Common Mistakes
❌ Avoid These Mistakes
-
Forgetting to encode:
?name=John&Jane(the & will break parameters) - Double encoding: Encoding an already encoded URL
-
Wrong function: Using
encodeURI()for query parameters - Manual encoding: Trying to manually replace characters instead of using built-in functions
- Not decoding: Displaying encoded URLs to users
Test Your Knowledge
5 practice questions are available. Choose Start practice to try them.