URL Encoding vs HTML Encoding: What's the Difference?

URL Encoding vs HTML Encoding

URL encoding and HTML encoding serve similar purposes — converting special characters to safe formats — but they operate in different contexts. Using the wrong one can cause bugs or security vulnerabilities. This guide explains the differences and when to use each.

Quick Comparison

Understanding URL Encoding

URL encoding (percent encoding) converts characters that are not allowed or have special meaning in URLs.

• Building URLs with user input
• Creating query strings
• Encoding path segments
• Handling non-ASCII characters in URLs

Input:  "hello world & more"
URL:    hello%20world%20%26%20more
Input:  "100% sure"
URL:    100%25%20sure
Input:  "路径/文件"
URL:    %E8%B7%AF%E5%BE%84%2F%E6%96%87%E4%BB%B6

Understanding HTML Encoding

HTML encoding converts characters that have special meaning in HTML into safe entities.

• Displaying user-generated content
• Showing code examples in HTML
• Preventing XSS attacks
• Including special characters like ©, ™, →

< → <
> → >
& → &
" → "
' → '
© → ©
→ → →

When They Overlap

Some scenarios require both URL and HTML encoding:

#### Scenario 1: Links with Query Parameters

<!-- User searches for "A & B" -->
<a href="/search?q=A%20%26%20B">Search: A & B</a>

<!-- The URL is URL-encoded: A%20%26%20B -->
<!-- The display text is HTML-encoded: A & B -->

#### Scenario 2: Redirect URLs in HTML

<!-- Redirect to a URL that contains special characters -->
<meta http-equiv="refresh" content="0;url=https://example.com/search?q=hello%20world">

<!-- Both URL encoding (for the URL) and HTML attribute encoding (for quotes) apply -->

#### Scenario 3: JavaScript in HTML

<script>
  // URL encoding inside JavaScript inside HTML
  const url = '/api?name=' + encodeURIComponent('<?php echo $name; ?>');
</script>

Practical Examples

#### Example 1: User Search Form

// User types: <script>alert('xss')</script>
const userInput = '<script>alert(\'xss\')</script>';

// URL encode for the URL
const url = /search?q=${encodeURIComponent(userInput)};
// /search?q=%3Cscript%3Ealert(%27xss%27)%3C%2Fscript%3E
// HTML encode for display
const display = userInput
  .replace(/&/g, '&')
  .replace(/</g, '<')
  .replace(/>/g, '>')
  .replace(/"/g, '"')
  .replace(/'/g, ''');
// <script>alert('xss')</script>

#### Example 2: API Response Rendering

// API returns: { "name": "O'Brien & Sons", "website": "https://example.com?a=1&b=2" }

const data = await response.json();
// HTML encode for display
element.innerHTML = <p>Name: ${escapeHtml(data.name)}</p>;
// <p>Name: O'Brien & Sons</p>
// URL encode for links
const link = <a href="${data.website}">Visit</a>;
// The URL is already valid, but if building dynamically:
const link2 = <a href="https://example.com?name=${encodeURIComponent(data.name)}">Visit</a>;

Common Mistakes

#### Mistake 1: Using HTML Encoding for URLs

// WRONG: HTML encoding in URL
const url = /search?q=${htmlEncode(userInput)};
// If user enters "A & B", URL becomes /search?q=A & B
// The & creates a new parameter!

// CORRECT: URL encoding in URL
const url = /search?q=${encodeURIComponent(userInput)};
// /search?q=A%20%26%20B

#### Mistake 2: Using URL Encoding for HTML Display

// WRONG: URL encoding in HTML
element.innerHTML = <p>${encodeURIComponent(userInput)}</p>;
// If user enters "<b>", display shows %3Cb%3E

// CORRECT: HTML encoding in HTML
element.innerHTML = <p>${escapeHtml(userInput)}</p>;
// Display shows <b> as text

#### Mistake 3: Forgetting to Encode in Both Contexts

// WRONG: No encoding
const link = <a href="/search?q=${userInput}">${userInput}</a>;
// Vulnerable to both URL injection and XSS

// CORRECT: Encode for both contexts
const encodedUrl = encodeURIComponent(userInput);
const encodedHtml = escapeHtml(userInput);
const link = <a href="/search?q=${encodedUrl}">${encodedHtml}</a>;

Encoding Functions Reference

Using Our Tool

For URL encoding tasks, use our URL Encoder. It handles:

• Standard URL encoding (percent encoding)


• URL decoding


• Unicode and special character support


• Both component and full URL encoding

Conclusion

URL encoding and HTML encoding are both essential but serve different purposes. URL encoding makes data safe for URLs, while HTML encoding makes data safe for HTML display. Using the right encoding in the right context prevents bugs and security vulnerabilities. Use our URL Encoder for all your URL encoding needs, and always HTML-encode user content before displaying it.