What is the difference between URL encoding and HTML encoding?

URL encoding and HTML encoding serve different purposes and use different formats.

URL Encoding (Percent Encoding):

Used for: Making text safe in URLs Format: % + two hex digits Example: Hello World! → Hello%20World%21

Characters encoded:

• Spaces: %20 or +
• Special: ! → %21, @ → %40, # → %23
• Reserved: / → %2F, ? → %3F, & → %26

When to use:

• Query string parameters
• URL path segments
• Passing URLs as parameters
• Form data submission

HTML Encoding (Entity Encoding):

Used for: Displaying special characters in HTML Format: &name; or &#number; Example: Hello <World>! → Hello <World>!

Characters encoded:

• < → <
• > → >
• & → &
• " → "
• ' → ' or '

When to use:

• Displaying text in HTML
• Preventing XSS attacks
• Showing code examples
• User-generated content

Key Differences:

When to Use Both:

Sometimes you need both! Example:

<a href="?search=<script>alert('xss')</script>">

<a href="?search=<script>alert('xss')</script>">

Properly encoded:

<a href="?search=%3Cscript%3Ealert%28%27xss%27%29%3C%2Fscript%3E">

<a href="?search=%3Cscript%3Ealert%28%27xss%27%29%3C%2Fscript%3E">

The URL parameter is URL-encoded, and if you're displaying it in HTML, you'd also HTML-encode it.

JavaScript Encoding:

There's also JavaScript string encoding for embedding in scripts:

var text = "He said \"Hello\""; // Backslash escaping

var text = "He said \"Hello\""; // Backslash escaping

Common Mistakes:

1. Using HTML encoding in URLs: ?q=hello world (wrong!)
2. Using URL encoding in HTML: <p>Hello%20World</p> (displays literally)
3. Not encoding at all (security risk and broken functionality)
4. Double-encoding: Encoding the same text twice

Best Practice:

Always use the right encoding for the context:

• URLs → URL encoding (encodeURIComponent)
• HTML → HTML encoding (use frameworks or libraries)
• JavaScript → Backslash escaping or JSON.stringify
• SQL → Parameterized queries (not string escaping!)