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

Introduction

URL encoding and HTML encoding are two fundamental encoding techniques used in web development. While they serve similar purposes—representing special characters safely—they operate in entirely different contexts and have distinct rules. Confusing the two can lead to broken links, rendering issues, or even security vulnerabilities like XSS (Cross-Site Scripting).

What is URL Encoding?

URL encoding (also called percent-encoding) converts characters into a format that can be safely transmitted in a URL. Since URLs can only contain a limited set of ASCII characters, any character outside this set must be encoded as %XX where XX is the character’s hexadecimal ASCII value.

For example, the space character becomes %20, and the ampersand & becomes %26.

// URL encoding in JavaScript
const url = 'https://example.com/search?q=hello world&lang=en';
const encoded = encodeURI(url);
console.log(encoded);
// "https://example.com/search?q=hello%20world&lang=en"

// Encoding a query parameter value
const query = 'price < $100 & free shipping';
const encodedQuery = encodeURIComponent(query);
console.log(encodedQuery);
// "price%20%3C%20%24100%20%26%20free%20shipping"

encodeURI vs encodeURIComponent

JavaScript provides two functions for URL encoding, and understanding the difference is crucial:

Function	Encodes	Does NOT encode	Use case
`encodeURI`	Most special chars	`:/?#[]@!$&'()*+,;=`	Full URLs
`encodeURIComponent`	All special chars	`-_.!~*'()`	Query parameter values

// encodeURI preserves URL structure characters
encodeURI('https://example.com/path?query=value&other=123');
// "https://example.com/path?query=value&other=123"

// encodeURIComponent encodes everything that could break a URL
encodeURIComponent('https://example.com/path?query=value&other=123');
// "https%3A%2F%2Fexample.com%2Fpath%3Fquery%3Dvalue%26other%3D123"

Use encodeURI when you have a complete URL, and encodeURIComponent when you’re encoding individual parameter values.

Try the URL encoder/decoder tool on CodeKit to encode or decode URLs instantly.

What is HTML Encoding?

HTML encoding (also called HTML entity encoding) converts special characters into HTML entities so they can be safely displayed in an HTML document. Without encoding, characters like <, >, and & would be interpreted as HTML markup rather than displayed as text.

Common HTML entities:

Character	Entity Name	Entity Number
`<`	`<`	`<`
`>`	`>`	`>`
`&`	`&`	`&`
`"`	`"`	`"`
`'`	`'`	`'`
`©`	`©`	`©`

// HTML encoding in JavaScript
function htmlEncode(str) {
  const div = document.createElement('div');
  div.textContent = str;
  return div.innerHTML;
}

console.log(htmlEncode('<script>alert("xss")</script>'));
// "&lt;script&gt;alert(&quot;xss&quot;)&lt;/script&gt;"

// HTML decoding
function htmlDecode(str) {
  const div = document.createElement('div');
  div.innerHTML = str;
  return div.textContent;
}

Use the HTML encoder/decoder tool on CodeKit for quick HTML entity encoding and decoding.

Key Differences

Aspect	URL Encoding	HTML Encoding
Context	URLs and query strings	HTML document content
Format	`%XX` (percent + hex)	`&name;` or `&#NNN;`
Primary goal	Safe URL transmission	Safe HTML rendering
Space handling	`%20` or `+`	` ` or stays as space
Security role	Prevents URL injection	Prevents XSS attacks

When to Use Which

Use URL Encoding When:

Building query strings with user input
Constructing URLs dynamically
Sending data in HTTP requests
Encoding path segments in URLs

// Correct: URL-encode user input in query parameters
const userInput = 'coffee & tea';
const url = `https://api.example.com/search?q=${encodeURIComponent(userInput)}`;
// "https://api.example.com/search?q=coffee%20%26%20tea"

Use HTML Encoding When:

Displaying user-generated content on a web page
Rendering text that might contain HTML characters
Preventing XSS in server-rendered templates
Showing code examples in HTML

// Correct: HTML-encode user input before displaying
const comment = 'I love <b>bold</b> text & more!';
const safe = htmlEncode(comment);
// "I love &lt;b&gt;bold&lt;/b&gt; text &amp; more!"
document.getElementById('output').innerHTML = safe;

Common Mistakes

1. Double Encoding

Encoding already-encoded data leads to broken output:

// Wrong: double encoding
const encoded = encodeURIComponent('hello world'); // "hello%20world"
const doubleEncoded = encodeURIComponent(encoded); // "hello%2520world" — broken!

// Right: encode only once
const correct = encodeURIComponent('hello world'); // "hello%20world"

2. Using the Wrong Encoding Type

// Wrong: HTML-encoding a URL
const url = htmlEncode('https://example.com?q=a&b=c');
// Won't work correctly in an href attribute

// Wrong: URL-encoding HTML content
const html = encodeURIComponent('<div>Hello</div>');
// Won't render as expected in the browser

3. Forgetting to Encode User Input

This is the most dangerous mistake—it opens the door to injection attacks:

// DANGEROUS: Unencoded user input
element.innerHTML = `Hello, ${userInput}!`; // XSS vulnerability!

// Safe: HTML-encode first
element.innerHTML = `Hello, ${htmlEncode(userInput)}!`;

Conclusion

URL encoding and HTML encoding serve different purposes in web development. URL encoding ensures data can travel safely through URLs, while HTML encoding ensures data can display safely in web pages. Using the right encoding in the right context is essential for both functionality and security.

Need to encode or decode URLs or HTML entities? Try the URL encoder and HTML encoder tools on CodeKit—all processing happens locally in your browser.