URL Encoding vs HTML Encoding: Key Differences

URL encoding and HTML encoding both convert special characters into safe representations — but they're designed for completely different contexts. URL encoding produces percent-codes like %26 and is used in URLs. HTML encoding produces entities like & and is used in HTML markup.

Using the wrong one is a common source of bugs: an HTML entity in a URL looks like gibberish to a server, and a percent-code in HTML markup displays literally on the page instead of rendering correctly.

URL Encoding: Making Data Safe for URLs

URL encoding (percent-encoding) converts characters that would otherwise break URL syntax into %XX escape sequences, where XX is the character's hex code.

Common URL encodings:

• Space → %20
• & → %26
• = → %3D
• @ → %40
• / → %2F

Use URL encoding when: You're building a URL, constructing a query string, passing data in an API endpoint, or encoding form data that will be sent as an HTTP request.

HTML Encoding: Making Data Safe for Web Pages

HTML encoding converts characters that have special meaning in HTML markup into named or numeric entities that display correctly without being interpreted as HTML.

Common HTML encodings:

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

Use HTML encoding when: You're inserting user-supplied content into an HTML page or template, populating an HTML attribute value, or displaying text that might contain HTML tags or special characters.

Sell Custom Apparel — We Handle Printing & Free Shipping

When You Need Both URL and HTML Encoding

Sometimes you need both — in the right order. A common scenario: you're generating an HTML page that contains a link, and the link includes a query parameter with user-supplied data.

1. First URL encode the parameter value: search term & filters → search%20term%20%26%20filters
2. Then HTML encode the entire URL for safe use in an href attribute: the & separating query parameters becomes &

<a href="/search?q=search%20term%20%26%20filters&amp;page=2">Results</a>

Skipping either step causes either a broken URL or an HTML validation error (or an XSS vulnerability if HTML encoding is skipped).

Common Mistakes When Mixing the Two

HTML encoding a URL parameter value: If you encode & as & in a query parameter value, the server receives the literal string & — not the ampersand you intended. Always use percent-encoding for URL contexts.

Percent-encoding inside HTML attributes: If you display a URL in HTML and use & (not &) to separate query parameters, the HTML is technically invalid and browsers may misparse it. Use & in href attributes.

Double escaping: If you percent-encode and then HTML encode the same string, you get %2526 instead of %26 — two layers of encoding where one was enough.

Use the right tool for the right context: URL Encoder for URL contexts, HTML Encoder for HTML contexts.

Frequently Asked Questions

Can I use HTML encoding in a URL instead of percent-encoding?

No. HTML entities like & are not valid in URL query strings. Servers parse the raw URL bytes, not HTML — they won't recognize & as an ampersand. You must use %26 in URL contexts.

My URL contains & and it still seems to work. Why?

Some servers and frameworks are lenient and decode & as & when parsing query strings. But this is undefined behavior — you shouldn't rely on it. Use %26 for the & in URL-encoded values.

Which one prevents XSS attacks?

HTML encoding is the primary XSS defense — it prevents user-supplied data from being interpreted as HTML tags or scripts when rendered in a page. URL encoding is not sufficient to prevent XSS because browsers decode percent-encoded characters before interpreting HTML.

Is there a third type of encoding I should know about?

Yes — JavaScript string encoding (escaping backslash characters for use in JS strings) and JSON encoding. Each context has its own rules. The principle is the same: match the encoding to the context where the data will be interpreted.