URL Encoding vs HTML Encoding
URL encoding and HTML encoding serve completely different purposes and are NOT interchangeable. URL encoding (percent encoding) escapes characters for web addresses using %20, %3D, etc. HTML encoding prevents XSS attacks in page content using <, &, ". Use URL encoding for links and query parameters. Use HTML encoding when displaying user content. Mixing them up causes security vulnerabilities and broken functionality.
Critical: Never Mix URL and HTML Encoding!
Using the wrong encoding creates security vulnerabilities: URL encoding in HTML breaks XSS protection. HTML entities in URLs break links. Always use URL encoding for URLs and query parameters, HTML encoding for page content. Mixing them is a common cause of XSS attacks.
Key Differences at a Glance
URL Encoding
- Syntax: Percent signs (%20, %3D)
- Purpose: Make URLs valid and safe
- Context: Web addresses, query strings
- Encodes: Spaces, &, =, ?, #, +, /
- Example: "hello world" → "hello%20world"
- Security: Prevents broken URLs
HTML Encoding
- Syntax: Ampersand entities (<, &)
- Purpose: Display special characters safely
- Context: HTML page content
- Encodes: <, >, &, ", '
- Example: "<script>" → "<script>"
- Security: Prevents XSS attacks
Encoding Examples
Example 1: Search Query
Original Text:
cats & dogs URL Encoding (for query parameter):
cats%20%26%20dogs ✅ Correct for: ?q=cats%20%26%20dogs
HTML Encoding (for page display):
cats & dogs ✅ Correct for: <p>cats & dogs</p>
Example 2: User Input with HTML Tags
Original Text:
<script>alert("XSS")</script> HTML Encoding (prevents XSS):
<script>alert("XSS")</script> ✅ Safe: Displays as text, doesn't execute
URL Encoding (WRONG - doesn't prevent XSS):
%3Cscript%3Ealert(%22XSS%22)%3C%2Fscript%3E ❌ Dangerous: Browser decodes and executes script!
Example 3: Complete URL
Original URL:
https://example.com/search?q=price<$100&category=shoes URL Encoded (correct for href attribute):
https://example.com/search?q=price%3C%24100&category=shoes ✅ Parameters URL-encoded, & in HTML attribute encoded as &
Feature-by-Feature Comparison
| Feature | URL Encoding | HTML Encoding |
|---|---|---|
| Primary Purpose | Make URLs valid and transmittable | Prevent XSS and display special chars |
| Encoding Format | Percent (%) + hex code | Ampersand (&) entities |
| Space Character | %20 or + | or   |
| Ampersand (&) | %26 | & |
| Less Than (<) | %3C | < |
| Greater Than (>) | %3E | > |
| Quote (") | %22 | " |
| Use in URLs | ✅ Required | ❌ Breaks URLs |
| Use in HTML Content | ❌ No XSS protection | ✅ Prevents XSS |
| Browser Auto-Decode | ✅ Yes (in URLs) | ✅ Yes (in HTML) |
When to Use Each Encoding
Use URL Encoding For:
- ✅ Query string parameters (?q=value)
- ✅ Form data in GET requests
- ✅ URL path segments with special characters
- ✅ API request parameters
- ✅ Anchor fragments (#section-name)
- ❌ Never: HTML page content (use HTML encoding)
Use HTML Encoding For:
- ✅ Displaying user-generated content
- ✅ Preventing XSS attacks in web pages
- ✅ HTML attribute values (title, alt, etc.)
- ✅ Comments, blog posts, forum content
- ✅ Special characters (©, ™, €, etc.)
- ❌ Never: URLs or query strings (use URL encoding)
Common Mistakes to Avoid
❌ Using URL Encoding in HTML
Wrong: <p>Price%3A%20%2410</p>
Right: <p>Price: $10</p>
URL encoding in HTML displays ugly %20 characters and doesn't prevent XSS.
❌ Using HTML Encoding in URLs
Wrong: ?q=hello&world
Right: ?q=hello%26world
HTML entities in URLs break query parameter parsing.
❌ Double Encoding
Wrong: %2526 (encoding % itself)
Right: %26 (encode once)
Encoding already-encoded data creates unreadable garbage.
❌ Not Encoding User Input
Dangerous: <div>{ user_input }</div>
Safe: <div>{htmlEncode(user_input)}</div>
Always HTML-encode user content to prevent XSS attacks.
Frequently Asked Questions
Can I use URL encoding to prevent XSS attacks?
No! URL encoding does NOT prevent XSS attacks. Browsers automatically decode URL-encoded characters in HTML, so %3Cscript%3E becomes <script> and executes. Always use HTML encoding (not URL encoding) for displaying user content in web pages.
What happens if I use HTML entities in a URL?
URLs with HTML entities like & or < will break. Web servers don't understand HTML entities in URLs. Use percent encoding (%26, %3C) instead. The exception is in HTML attributes where both the parameter value needs URL encoding AND the & in the href attribute needs HTML encoding.
How do I encode a complete URL in an HTML href attribute?
First, URL-encode the query parameters. Then, HTML-encode the & characters in the URL. Example: <a href="search?q=cats%20%26%20dogs&page=2">. This ensures both the URL is valid and the HTML is safe.
When should I use + vs %20 for spaces in URLs?
Use + for spaces in query parameters (application/x-www-form-urlencoded format). Use %20 for spaces in URL paths and for URL-safe encoding. Both are valid in query strings, but %20 is more universal and works everywhere.
What's the difference between < and %3C?
< is HTML encoding for the less-than character (<), used in HTML content. %3C is URL encoding for the same character, used in web addresses. They represent the same character but are used in different contexts. Never mix them up.
Do I need to encode all special characters?
For URL encoding: encode reserved characters (?, &, =, #, +, /, :) and spaces when they appear in parameter values. For HTML encoding: always encode <, >, &, and encode quotes (", ') in attributes. When displaying user content, encode everything to be safe.
Ready to Encode Your Data Safely?
Use the right encoding for the right context - URLs or HTML content.