Encoding and Decoding Tools Compared: Base64, URL, and HTML
Base64, URL encoding, and HTML encoding serve different purposes but are often confused. This guide clarifies when to use each and how they work under the hood.
Key Takeaways
- Converts binary data to a 64-character ASCII alphabet (A-Z, a-z, 0-9, +, /).
- Replaces unsafe characters with `%` followed by two hex digits:
- Converts characters that have special meaning in HTML to their entity equivalents:
- Never use it to 'hide' sensitive data.
- Always encode user input before inserting it into URLs.
HTML Formatter
Beautify or minify HTML code with proper indentation
Three Encoding Schemes
| Encoding | Purpose | Reversible |
|---|---|---|
| Base64 | Represent binary as ASCII text | Yes |
| URL (Percent) | Escape special chars in URLs | Yes |
| HTML Entity | Escape special chars in HTML | Yes |
Base64 Encoding
Converts binary data to a 64-character ASCII alphabet (A-Z, a-z, 0-9, +, /). Each 3 bytes of input become 4 characters of output (~33% size increase).
Common Uses
- Embedding images in CSS/HTML as data URIs
- Encoding binary attachments in email (MIME)
- JWT payload and header encoding (Base64URL variant: uses - and _ instead of + and /)
- Encoding API credentials in HTTP Basic Auth
Base64 Is NOT Encryption
Base64 is trivially reversible. Never use it to 'hide' sensitive data. It is an encoding scheme, not a security measure.
URL Encoding (Percent Encoding)
Replaces unsafe characters with % followed by two hex digits:
| Character | Encoded |
|---|---|
| space | %20 (or +) |
| & | %26 |
| = | %3D |
| / | %2F |
| # | %23 |
| ? | %3F |
URL encoding ensures that special characters in query parameters and path segments do not break URL parsing. Always encode user input before inserting it into URLs.
HTML Entity Encoding
Converts characters that have special meaning in HTML to their entity equivalents:
| Character | Entity | Named |
|---|---|---|
| < | < | < |
| > | > | > |
| & | & | & |
| " | " | " |
| ' | ' | ' |
HTML encoding prevents Cross-Site Scripting (XSS) by ensuring user-supplied text is rendered as text, not executed as HTML or JavaScript.
When to Use Each
| Scenario | Encoding |
|---|---|
| Embedding binary in JSON/XML | Base64 |
| Building URL query strings | URL encoding |
| Displaying user input in HTML | HTML entity encoding |
| HTTP Basic Auth header | Base64 |
| JWT tokens | Base64URL |
| File paths in URLs | URL encoding |