HTML URL Encoding

Learn how to properly encode URLs and special characters for the web

URLs can only be sent over the Internet using the ASCII character set. Since URLs often contain characters outside the ASCII set, the URL must be converted into a valid ASCII format. URL encoding replaces unsafe ASCII characters with a "%" followed by two hexadecimal digits.

What is URL Encoding?

URL encoding, also known as percent encoding, is a method to encode information in a Uniform Resource Identifier (URI). It converts characters into a format that can be transmitted over the Internet.

Why URL Encoding is Needed

  • URLs can only use ASCII characters (0-127)
  • Some characters have special meaning in URLs (?, &, =, etc.)
  • Special characters must be encoded to be used literally
  • Spaces and non-ASCII characters must be encoded

How URL Encoding Works

URL encoding replaces characters with a percent sign (%) followed by two hexadecimal digits representing the character's ASCII code.

Example - Basic URL Encoding

Original: Hello World!
Encoded:  Hello%20World%21

Original: user@example.com
Encoded:  user%40example.com

Original: 100% Success
Encoded:  100%25%20Success

Format: %[HEX][HEX] where HEX is a hexadecimal digit (0-9, A-F)

URL Structure

A typical URL consists of several parts:

Example - URL Parts

https://www.example.com:8080/path/to/page?name=value&key=data#section

Protocol: https://
Domain:   www.example.com
Port:     :8080
Path:     /path/to/page
Query:    ?name=value&key=data
Fragment: #section

Note: Different parts of a URL have different encoding rules. Query parameters usually need the most encoding.

Reserved Characters

Some characters are reserved in URLs because they have special meanings. These characters must be encoded if you want to use them literally.

Character Purpose URL Encoded
: Separates protocol and domain %3A
/ Separates path segments %2F
? Starts query string %3F
# Starts fragment %23
& Separates parameters %26
= Assigns parameter value %3D
% Starts encoded character %25
@ Separates credentials %40
+ Space in query strings %2B
(space) Space character %20 or +

Common Character Encodings

Character Description URL Encoded
(space) Space %20 or +
! Exclamation mark %21
" Quotation mark %22
# Hash/pound %23
$ Dollar sign %24
% Percent %25
& Ampersand %26
' Apostrophe %27
+ Plus sign %2B
, Comma %2C
/ Forward slash %2F
: Colon %3A
; Semicolon %3B
= Equal sign %3D
? Question mark %3F
@ At symbol %40

Practical Examples

Example 1: Search Query

URL with Spaces

Original: https://example.com/search?q=html tutorial
Encoded:  https://example.com/search?q=html%20tutorial

Or using + for space:
Encoded:  https://example.com/search?q=html+tutorial

Example 2: Special Characters

URL with Special Characters

Original: https://example.com/search?email=user@example.com&topic=HTML & CSS
Encoded:  https://example.com/search?email=user%40example.com&topic=HTML%20%26%20CSS

Example 3: International Characters

URL with Non-ASCII Characters

Original: https://example.com/search?name=José
Encoded:  https://example.com/search?name=Jos%C3%A9

Original: https://example.com/product/café
Encoded:  https://example.com/product/caf%C3%A9

Example 4: Multiple Parameters

URL with Query String

Original: https://example.com/products?category=Books & Magazines&sort=priceℴ=desc
Encoded:  https://example.com/products?category=Books%20%26%20Magazines&sort=price&order=desc

JavaScript URL Encoding

JavaScript provides built-in functions for URL encoding and decoding:

encodeURIComponent()

Encodes a URI component by escaping all characters except: A-Z a-z 0-9 - _ . ! ~ * ' ( )

Example - encodeURIComponent()

let url = "search?q=html & css";
let encoded = encodeURIComponent(url);
console.log(encoded);
// Output: search%3Fq%3Dhtml%20%26%20css

encodeURI()

Encodes a complete URI, preserving special URI characters like : / ? # [ ] @ ! $ & ' ( ) * + , ; =

Example - encodeURI()

let url = "https://example.com/search?q=html tutorial";
let encoded = encodeURI(url);
console.log(encoded);
// Output: https://example.com/search?q=html%20tutorial

Decoding Functions

Example - Decoding URLs

// Decode URI component
let encoded = "html%20%26%20css";
let decoded = decodeURIComponent(encoded);
console.log(decoded); // Output: html & css

// Decode full URI
let fullUrl = "https://example.com/search?q=html%20tutorial";
let decodedUrl = decodeURI(fullUrl);
console.log(decodedUrl);
// Output: https://example.com/search?q=html tutorial

Tip: Use encodeURIComponent() for query parameters and encodeURI() for complete URLs.

URL Encoding in Forms

When HTML forms are submitted with the GET method, form data is automatically URL encoded and appended to the URL.

Example - Form Submission

<form action="/search" method="GET">
  <input type="text" name="query" value="HTML & CSS">
  <input type="text" name="category" value="Web Development">
  <button type="submit">Search</button>
</form>

<!-- Submits to: -->
<!-- /search?query=HTML+%26+CSS&category=Web+Development -->

Note: The browser automatically handles URL encoding when forms are submitted. You don't need to manually encode form values.

Unsafe and Safe Characters

Unsafe Characters (Must be Encoded)

  • Space and control characters (0-31, 127)
  • Non-ASCII characters (128-255)
  • Reserved characters: : / ? # [ ] @ ! $ & ' ( ) * + , ; =
  • Unsafe characters: " < > % { } | \ ^ ~ [ ] `

Safe Characters (No Encoding Needed)

  • Alphanumeric: A-Z a-z 0-9
  • Unreserved: - _ . ~

URL Encoding Best Practices

✓ Guidelines

  • Always encode user-generated content before including in URLs
  • Use encodeURIComponent() for query parameters
  • Use encodeURI() for complete URLs
  • Encode spaces as %20 or + in query strings
  • Be aware that + means space in query strings
  • Test URLs with special characters to ensure proper encoding
  • Decode URLs when displaying them to users
  • Use UTF-8 encoding for international characters
  • Don't double-encode URLs (encoding already encoded URLs)
  • Keep URLs as short and readable as possible

Common Mistakes

❌ Avoid These Mistakes

  • Forgetting to encode: ?name=John&Jane (the & will break parameters)
  • Double encoding: Encoding an already encoded URL
  • Wrong function: Using encodeURI() for query parameters
  • Manual encoding: Trying to manually replace characters instead of using built-in functions
  • Not decoding: Displaying encoded URLs to users

Test Your Knowledge