URL & HTML Encoding Explained (With Examples)

What Is Percent-Encoding (and Why URLs Need It)

URLs can only safely contain a limited set of characters — letters, digits, and a handful of symbols. Anything else (spaces, accented letters, &,=) has to be replaced with a % followed by two hexadecimal digits representing that character's byte value. A space becomes %20, an ampersand becomes %26. This is called percent-encoding, and it's what "URL encoding" means in practice.

Without it, a search query like coffee & tea would break the URL, since & is the character that separates query parameters. Encoded, it becomes coffee%20%26%20tea — safe to pass as a single value.

encodeURIComponent vs encodeURI vs escape

JavaScript has three built-in functions that look similar but behave differently:

• encodeURIComponent() — encodes everything except letters, digits, and - _ . ! ~ * ' ( ). Use this for a single query parameter value, since it also encodes & = ? / — the characters that would otherwise break the URL structure.
• encodeURI() — leaves URL structure characters intact (: / ? # [ ] @) so a complete URL stays navigable. Use this only when encoding an entire URL, not a piece of one.
• escape() — deprecated, handles Unicode incorrectly. Don't use it in new code; it's kept only for legacy compatibility.

The most common bug: using encodeURI() on a query parameter value. If that value contains & or =, they won't get encoded — and they'll be misread as new parameters, silently corrupting the URL.

How to URL-Encode or Decode Online

ToolLance's URL Encoder & Decoder runs both encodeURIComponent and encodeURI modes, decodes both %20 and + as spaces, and includes a query string inspector that parses a full URL into a readable table of decoded key-value pairs — useful when you're staring at a long tracking URL and need to see what's actually in it. Everything runs locally in your browser; nothing is sent to a server.

What Is HTML Entity Encoding?

HTML encoding solves an entirely different problem: characters that have special meaning inside HTML markup. If you print a user's comment containing <script> directly into a page, the browser interprets it as an actual script tag — this is the basis of Cross-Site Scripting (XSS) attacks. HTML encoding converts those characters into entities that display as text instead: < becomes <, and the browser shows the literal characters rather than executing them as markup.

This is exactly what PHP's htmlspecialchars() does, what Python's html.escape() does, and what every templating engine's auto-escaping does behind the scenes.

The 5 Characters You Must Always Encode

Five characters have special meaning in HTML and should always be encoded when inserting untrusted text into a page:

• & (ampersand) → & — encode this one first, or you'll double-encode the ampersand inside other entities
• < (less-than) → <
• > (greater-than) → >
• " (double quote) → "
• ' (single quote) → '

Named vs Decimal vs Hex Entities

The same character can be written three ways, and all three render identically:

• Named: © — readable, but not every character has a name
• Decimal: © — the Unicode code point in base 10, works for any character
• Hex: © — the Unicode code point in hexadecimal, common in XML contexts

Use ToolLance's HTML Encoder / Decoder to convert between all three, decode entities back to plain text, or strip HTML tags entirely — all five encoding modes (essential, named, decimal, hex, attribute-safe) run instantly in your browser.

When You Need Both Encodings Together

A common real-world case: embedding a URL inside an HTML attribute, like href="...". If the URL itself contains a value with special characters, you URL-encode that value first (so the URL structure stays intact), then HTML-encode the complete URL string before inserting it into the attribute (so it doesn't break out of the quotes). Each encoding step protects a different layer — skipping either one can break the link or open an injection vulnerability.