HTML URL Encoding
URLs can only contain certain safe characters — letters, numbers, and a few special symbols. When a URL needs to include other characters — like spaces, symbols, or characters from non-English languages — those characters must be encoded into a safe format. This process is called URL encoding, also known as percent-encoding.
Why URL Encoding Is Needed
A URL travels across the internet as plain text. Certain characters have special meaning inside URLs — a question mark ? starts a query string, an ampersand & separates parameters, and a hash # jumps to a page section. If these characters appear inside data, the browser gets confused about where the data ends and the URL structure begins.
Visual Diagram — The Problem Without Encoding
You want to search for: "Coffee & Tea" URL without encoding: search.php?q=Coffee & Tea Browser reads: q=Coffee → parameter 1: Coffee Tea → browser thinks "Tea" is the next parameter → WRONG! The & is misread as a parameter separator URL with encoding: search.php?q=Coffee%20%26%20Tea Browser reads: q=Coffee & Tea → correctly reads the full phrase as one value → CORRECT!
How Percent Encoding Works
A percent-encoded character consists of a percent sign % followed by two hexadecimal digits that represent the character's ASCII code.
Space → %20 ! → %21 " → %22 # → %23 $ → %24 % → %25 & → %26 ' → %27 ( → %28 ) → %29 * → %2A + → %2B , → %2C / → %2F : → %3A ; → %3B = → %3D ? → %3F @ → %40 [ → %5B ] → %5D
Visual Diagram — How % Encoding Works
Character: Space ASCII decimal: 32 ASCII hex: 20 Encoded form: %20 Character: & ASCII decimal: 38 ASCII hex: 26 Encoded form: %26 So "Coffee & Tea" becomes: C o f f e e & T e a C o f f e e %20 %26 %20 T e a → Coffee%20%26%20Tea
Safe Characters in URLs
These characters do not need encoding — they are safe to use as-is in a URL.
A–Z a–z 0–9 - _ . ~
All other characters should be encoded when used inside URL parameters.
The Plus Sign as a Space
In query strings specifically, a plus sign + is an older convention for encoding a space. Both + and %20 represent a space in most URL contexts, but %20 is the modern standard.
Both of these mean the same thing in a search query: search.php?q=hello+world search.php?q=hello%20world Result: q = "hello world"
Encoding Non-English Characters
Characters outside the basic ASCII range — like Hindi, Arabic, Chinese, or accented European letters — are encoded by first converting them to UTF-8 bytes, then percent-encoding each byte.
Example — Hindi Text in a URL
Hindi text: नमस्ते UTF-8 encoded: %E0%A4%A8%E0%A4%AE%E0%A4%B8%E0%A5%8D%E0%A4%A4%E0%A5%87 URL: search.php?q=%E0%A4%A8%E0%A4%AE%E0%A4%B8%E0%A5%8D%E0%A4%A4%E0%A5%87
Modern browsers display the decoded, readable form in the address bar, but send the encoded form when making the actual request.
URL Encoding in Forms
When you submit an HTML form with method="get", the browser automatically encodes the form data and appends it to the URL.
<form action="search.php" method="get"> <input type="text" name="query" value="HTML & CSS"> <button type="submit">Search</button> </form> Resulting URL: search.php?query=HTML+%26+CSS
The browser handles this encoding automatically. You do not need to manually encode form data — the browser does it before sending.
URL Structure
Understanding URL encoding requires understanding the full structure of a URL and which parts allow which characters.
Visual Diagram — Parts of a URL
https://estudy247.com/courses/html/?topic=forms&page=2#examples ↑ ↑ ↑ ↑ ↑ ↑ ↑ protocol domain path key value key fragment Protocol: https:// Domain: estudy247.com Path: /courses/html/ Query: ?topic=forms&page=2 (after ? — key=value pairs) Fragment: #examples (after # — jumps to page section)
Encoding Rules by URL Part
URL Part Allowed Characters Encode Everything Else ---------- ------------------------------ ---------------------- Domain Letters, numbers, hyphens, dots Already encoded by DNS Path Letters, numbers, -, _, ., ~, / Encode spaces and symbols Query key Letters, numbers, -, _, . Encode & = + # and spaces Query value Letters, numbers, -, _, . Encode & = + # and spaces Fragment Letters, numbers, -, _, . Encode spaces and symbols
JavaScript URL Encoding Functions
When you build URLs dynamically in JavaScript, use built-in functions to encode values properly.
encodeURIComponent()
Encodes a single value for use inside a URL query parameter. Encodes everything except letters, numbers, -, _, ., and !.
<script> const searchTerm = "Coffee & Tea"; const encoded = encodeURIComponent(searchTerm); // Result: "Coffee%20%26%20Tea" const url = "search.php?q=" + encoded; // Result: "search.php?q=Coffee%20%26%20Tea" </script>
encodeURI()
Encodes a complete URL. It does not encode characters that are valid URL structure characters — like ?, =, &, and /.
<script> const fullUrl = "https://example.com/search?q=Coffee & Tea"; const encoded = encodeURI(fullUrl); // Result: "https://example.com/search?q=Coffee%20&%20Tea" // Note: & is NOT encoded because it has URL meaning </script>
Which to Use
Use encodeURIComponent() → For individual parameter values Use encodeURI() → For complete URL strings
Decoding URLs
To reverse the encoding and get the original string back, JavaScript provides matching decode functions.
decodeURIComponent("Coffee%20%26%20Tea") // → "Coffee & Tea"
decodeURI("https://example.com/search%20page") // → "https://example.com/search page"
Common URL Encoding Examples
Original Text Encoded Version ---------------------- --------------------------- Hello World Hello%20World user@example.com user%40example.com price: $5.00 price%3A%20%245.00 search=a+b search%3Da%2Bb path/to/file path%2Fto%2Ffile नमस्ते %E0%A4%A8%E0%A4%AE...
URL encoding is handled automatically in most everyday situations — browsers encode form data, JavaScript provides encoding functions, and server-side languages decode the values automatically. Understanding what it does and why it exists helps you debug URL problems and build more reliable links and forms.