Web Encoding:
Base64, URL Encoding & HTML Entities

Why Encoding Matters

Every time you open a web page, send a form, or click a link, data is being encoded and decoded behind the scenes. Encoding makes sure data survives the journey from browser to server without corruption. It handles special characters, binary data, and reserved symbols so they don't break the systems that transport them.

Most developers interact with three encoding schemes regularly: Base64, URL encoding, and HTML entities. They serve different purposes but are easy to confuse. This guide explains what each one does, when to use it, and how to avoid the mistakes that trip up even experienced developers.

Base64: Turning Binary into Text

What It Does

Base64 converts binary data into a string of 64 printable ASCII characters: A-Z, a-z, 0-9, +, and /. Every 3 bytes of input become 4 Base64 characters. If the input isn't a multiple of 3 bytes, padding characters (=) are added. The result is about 33% larger than the original, but it can travel through any text-based system safely.

Think of Base64 as a universal translator for binary data. It lets you embed an image inside a CSS file, send a file attachment through email, or include binary data in a JSON payload — all things that would otherwise be impossible because those formats only support text.

When to Use It

• Data URIs — embedding small images directly in CSS: url(data:image/png;base64,iVBOR...)
• HTTP Basic Authentication — the Authorization header uses Base64 for username:password. It's not encryption, but it ensures the credentials travel as text.
• Email Attachments (MIME) — email was designed for text. Base64 makes it possible to attach images, PDFs, and other binary files.
• API Tokens — JWTs use Base64URL encoding (replacing + and / with - and _) for the header and payload.

Common Mistakes

// ❌ Don't use Base64 for passwords — it's encoding, not hashing
const encoded = btoa('myPassword123');
// Anyone can decode: atob(encoded) === 'myPassword123'

// ❌ Base64 output is ~33% larger than input
// A 1MB file becomes ~1.33MB when encoded

// ✅ Use it when you need binary data in a text channel
const dataUri = 'data:image/png;base64,' + imageBase64;

Use the Base64 Converter to encode and decode text instantly. Everything runs in your browser — no data is sent anywhere.

URL Encoding: Making URLs Safe

What It Does

URLs can only contain a limited set of characters: letters, digits, and a few symbols (-, _, ., ~). Everything else — spaces, &, ?, =, #, non-ASCII characters — must be percent-encoded. Each unsafe character becomes % followed by its two-digit hex code. A space becomes %20. An ampersand becomes %26.

encodeURI vs encodeURIComponent

JavaScript has two URL encoding functions, and using the wrong one is a common source of bugs:

const url = 'https://example.com/search?q=hello world&lang=en';

// encodeURI: preserves URL structure characters (/, ?, &, =, #)
encodeURI(url);
// → "https://example.com/search?q=hello%20world&lang=en"

// encodeURIComponent: encodes EVERYTHING except alphanumeric and -_.!~*'()
encodeURIComponent('hello world & welcome');
// → "hello%20world%20%26%20welcome"

Rule of thumb: use encodeURIComponent for individual parameter values, and encodeURI for complete URLs. Use encodeURIComponent on a full URL and you'll encode the slashes, breaking it entirely.

Test your encoding with the URL Encode/Decode tool. Paste any text to see how it looks when URL-encoded.

HTML Entities: Displaying Code as Text

What It Does

HTML entities let you display characters that have special meaning in HTML. If you want to show <div> on a web page instead of having the browser interpret it as an HTML tag, you encode the angle brackets:

&  →  &
<   →  &lt;
>   →  &gt;
"    →  &quot;
'    →  &#39;

Security: XSS Prevention

Cross-Site Scripting (XSS) attacks happen when user input is rendered as HTML without encoding. If your app inserts a comment directly into the page, a malicious user could include <script> tags that execute in other users' browsers.

HTML entity encoding is your first line of defense. Converting < to < ensures the browser displays it as text. Modern frameworks (React, Vue, Angular) do this automatically — but if you're using innerHTML or building HTML strings manually, you're on your own.

// ❌ Dangerous — user input rendered as HTML
element.innerHTML = userComment;

// ✅ Safe — browser handles encoding
element.textContent = userComment;

// ✅ Also safe — encode before using innerHTML
element.innerHTML = encodeHtmlEntities(userComment);

Use the HTML Entities encoder to convert special characters to entities and back.

Encoding Quick Reference

Encoding	Input	Output	Use Case
Base64	Hello	SGVsbG8=	Binary data in text channels
URL Encode	hello world	hello%20world	Safe URLs with special chars
HTML Entity	<div>	&lt;div&gt;	Displaying HTML as text

Putting It All Together

These three encoding schemes solve different problems with a shared purpose: making data safe for transport and display. The most common mistake is using the wrong encoding for the job. Don't Base64-encode a URL parameter. Don't URL-encode HTML content. Don't use HTML entities in a JSON string.

Each encoding has a specific context. Using the right one makes your code more reliable and your debugging sessions shorter. Bookmark the Base64 Converter, URL Encoder, and HTML Entities encoder — you'll reach for them more often than you expect.

Encoding in Authentication and Security Contexts

HTTP Basic Authentication uses Base64 to encode the credentials string "username:password" into a header: Authorization: Basic dXNlcjpwYXNz. This is encoding, not encryption — anyone who intercepts the request can decode it immediately. Basic Auth must always be sent over HTTPS. For modern API authentication, token-based methods like Bearer tokens and API keys have largely replaced Basic Auth because they don't expose the user's password on every request.

JWTs (JSON Web Tokens) use Base64URL encoding for their header and payload sections. Base64URL is a variant that replaces + with - and / with _ to be URL-safe without additional percent-encoding. The signature section uses the same encoding but contains binary data — the output of the HMAC or RSA signing algorithm. Decoding a JWT without verifying the signature reveals the header and payload, which are public to anyone who can see the token. JWTs are signed, not encrypted. Never put secrets in a JWT payload.

Cross-site scripting (XSS) prevention depends on correct HTML entity encoding. When you insert user-supplied data into a web page, encode special characters as HTML entities. Most frameworks (React, Vue, Angular) do this automatically in their template syntax. XSS vulnerabilities happen when developers bypass the framework — using innerHTML, building HTML strings with concatenation, or writing custom render functions that skip the escaping layer. Trust your framework's escaping. Verify when you bypass it.