URL Encode vs Base64 vs HTML Encode: Complete Comparison

Overview of Three Encoding Methods

In web development, three encoding methods are commonly encountered, each designed for a specific purpose. Mixing them up or using the wrong one is a frequent source of bugs.

Full Feature Comparison Table

Property	URL Encoding	Base64	HTML Entities
Standard	RFC 3986	RFC 4648	HTML5 / WHATWG
Input type	Text characters	Any bytes (binary)	HTML text content
Output format	%XX hexadecimal	A-Z, a-z, 0-9, +, /	&name; or &#XXX;
Size overhead	Non-ASCII chars +200%	Fixed +33%	Varies; usually small
Reversible	Yes (decode)	Yes (decode)	Yes (HTML parser)
Encryption	No	No	No
Primary use	URL query strings, paths	Binary data transfer, JWT, data URIs	HTML page output

URL Encoding (Percent-Encoding) — Deep Dive

Encoding Rules

Only English letters (A-Z, a-z), digits (0-9), and the four symbols - _ . ~ do not need encoding. All other characters are first converted to UTF-8, then each byte is represented as %XX.

// Examples
encodeURIComponent('Hello World!')  // → "Hello%20World%21"
encodeURIComponent('Cafe & Bar')    // → "Cafe%20%26%20Bar"
encodeURIComponent('a=1&b=2')       // → "a%3D1%26b%3D2"
encodeURIComponent('price: $9.99')  // → "price%3A%20%249.99"

Use Cases

• URL query string parameter values (most common)
• RESTful API parameter passing
• Sharing links that contain non-ASCII characters or special symbols
• Browser address bar auto-encoding

Base64 — Deep Dive

Encoding Rules

Every 3 bytes (24 bits) are converted to 4 Base64 characters (6 bits each). When fewer than 3 bytes remain, = padding is added.

// Standard Base64
btoa('Hello')         // → "SGVsbG8="
btoa('Hello World')   // → "SGVsbG8gV29ybGQ="

// Note: btoa does not support non-ASCII characters directly
// Use this workaround for Unicode:
btoa(unescape(encodeURIComponent('Cafe')))  // → "Q2FmZQ=="

// URL-safe Base64 (replace + → - and / → _)
// Commonly used for JWT header and payload

Use Cases

• JWT token header and payload
• Embedding images in HTML (data URI)
• HTTP Basic Auth header
• Email attachments (MIME encoding)
• Transmitting binary data inside JSON

HTML Entity Encoding — Deep Dive

Characters That Must Be HTML-Encoded

Character	HTML Entity (Named)	HTML Entity (Numeric)	Reason
&	&	&	Entity start character
<	&lt;	&#60;	HTML tag open
>	&gt;	&#62;	HTML tag close
"	&quot;	&#34;	Attribute value quote
'	&apos;	&#39;	Attribute value single quote
	&nbsp;	&#160;	Non-breaking space

// HTML entity encoding in JavaScript
function escapeHtml(str) {
  return str
    .replace(/&/g, '&')
    .replace(//g, '>')
    .replace(/"/g, '"')
    .replace(/'/g, ''');
}

escapeHtml('<script>alert("XSS")</script>')
// → "&lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;"

// Frameworks usually handle this automatically
// Vue: {{ userInput }}  // auto HTML-encoded
// React: {userInput}   // auto HTML-encoded

Use Cases

• Outputting user-supplied text to an HTML page (XSS prevention)
• Embedding dynamic values in HTML attributes
• Displaying code samples (where < and > must be encoded)
• HTML email content

Correct Example: Combining Multiple Encoding Methods

In real web development, you often need to deal with multiple encodings at once. Here is the correct order of operations:

// Scenario: display a dynamic URL link on an HTML page
// User search keyword: "coffee & tea shops"

const keyword = 'coffee & tea shops';

// Step 1: URL encode for the URL parameter
const encodedKeyword = encodeURIComponent(keyword);
// → "coffee%20%26%20tea%20shops"

// Step 2: HTML entity encode for output into HTML
const safeUrl = `/search?q=${encodedKeyword}`;
const safeHtml = escapeHtml(safeUrl);
// Ensures & in the URL is safe inside an HTML href attribute

// Final HTML output:
// <a href="/search?q=coffee%20%26%20tea%20shops">...</a>

How to Choose the Right Encoding Method

Scenario	Use This
I need to put a special character in a URL query string	URL Encoding encodeURIComponent()
I need to embed an image directly in HTML	Base64 data URI format
I need to output user-supplied text in HTML	HTML Entities prevent XSS
I need to pass API authentication credentials	Base64 HTTP Basic Auth
I need to transmit a binary file inside JSON	Base64 serialization
My URL appears inside HTML output	URL Encoding + HTML Entities — both required
I need special characters to survive URL sharing	URL Encoding standard approach
I am creating a JWT token	Base64 URL-safe variant