HTML URL Encoding

जब आप किसी वेबसाइट पर URL में space, symbol या non-English letters डालते हैं, तो क्या आपने देखा है कि URL अपने आप बदल जाता है? उदाहरण:

https://example.com/hello world

यह अपने आप बदलकर बन जाता है

https://example.com/hello%20world

यही कहलाता है 👉 URL Encoding (या Percent Encoding)

URL Encoding क्या है?

URL (Uniform Resource Locator) इंटरनेट पर किसी webpage, file या resource का पता होता है। लेकिन URL में कुछ characters allowed नहीं होते या उनका special meaning होता है। इसलिए इन characters को encode किया जाता है — यानी उन्हें एक सुरक्षित format में बदला जाता है ताकि browser और server सही तरह से समझ सकें।

Example: URL Encode कैसे काम करता है

Character	Encoded Form	Description
Space ( )	%20	Space URL में allow नहीं होता
!	%21	Special character
#	%23	URL का fragment part होता है
$	%24	Reserved character
&	%26	Query parameter separator
+	%2B	Addition symbol
,	%2C	Comma
:	%3A	Colon
@	%40	Used in email addresses
?	%3F	Query start symbol

Simple Example: ❌ Wrong URL:

https://mywebsite.com/this is my page.html

Correct Encoded URL:

https://mywebsite.com/this%20is%20my%20page.html

यहां space ( ) को %20 में encode किया गया है ताकि ब्राउज़र इसे सही तरीके से समझे।

URL Encoding क्यों ज़रूरी है?

🔒 Security:
Encoding से URL में data सुरक्षित और readable बनता है।
बिना encoding के special characters गलत अर्थ दे सकते हैं।
🌍 Compatibility:
हर ब्राउज़र और server एक ही तरह से encoded URL को समझता है।
🧠 Accuracy:
अगर आप URL में हिंदी, emoji या spaces डालते हैं, तो encode जरूरी है ताकि URL टूटे नहीं।

Example – Form Data Encoding

Example – Form Data Encodingजब हम HTML में form भेजते हैं (GET method के साथ), तो input values URL में जुड़ जाती हैं। HTML Form:

<form action="/search" method="get">
  <input type="text" name="query" value="HTML tutorial">
  <input type="submit" value="Search">
</form>

जब यह form submit होता है, तो URL कुछ ऐसा बनता है

/search?query=HTML%20tutorial

यहां space → %20 बन गया है।

Encoding in JavaScript

JavaScript में हम URL को encode करने के लिए दो functions यूज़ करते हैं: 1️⃣ encodeURI() पूरे URL को encode करता है, लेकिन कुछ symbols को छोड़ देता है जैसे :, /, ?, &, #।

let url = "https://example.com/html tutorial.html";
let encoded = encodeURI(url);
console.log(encoded);

Output:

https://example.com/html%20tutorial.html

encodeURIComponent()

यह हर special character को encode कर देता है — आमतौर पर हम इसे URL के query parameters encode करने के लिए इस्तेमाल करते हैं।

let param = "HTML & CSS";
let encoded = encodeURIComponent(param);
console.log(encoded);

Output:

HTML%20%26%20CSS

Difference Between encodeURI() and encodeURIComponent()

Function	Encodes Entire URL?	Used For
`encodeURI()`	No (leaves URL parts intact)	Full URL
`encodeURIComponent()`	Yes (encodes all unsafe chars)	Query parameters

HINDI or Unicode URLs (Punycode)

अगर आपके URL में हिंदी या दूसरी non-Latin language हो, तो browser उसे automatically Punycode में बदल देता है। उदाहरण:

https://xn--h2bhs4b8d8a.com/

Encoded Form:

https://xn--l2b6a1c.com

इससे international domain names (IDN) भी काम करते हैं।

Common URL Encodings

Symbol (प्रतीक)	Encoded (एन्कोडेड)	Symbol (प्रतीक)	Encoded (एन्कोडेड)
Space (जगह)	%20	"	%22
#	%23	%	%25
&	%26	(	%28
)	%29	+	%2B
/	%2F	:	%3A
?	%3F	@	%40
=	%3D	;	%3B

Quick Summary

विषय (Topic)	स्पष्टीकरण (Explanation)
URL Encoding	सुरक्षित न किए गए वर्णों (unsafe characters) को URL के लिए सुरक्षित प्रारूप (safe format) में परिवर्तित करता है।
क्यों आवश्यक (Why Needed)	URL में त्रुटियों और गलत व्याख्या (misinterpretation) को रोकने के लिए।
उदाहरण (Example)	$\text{HTML tutorial} \rightarrow \text{HTML\%20tutorial}$
फंक्शन (Functions)	$\text{encodeURI()}$ और $\text{encodeURIComponent()}$
सर्वोत्तम अभ्यास (Best Practice)	हमेशा क्वेरी पैरामीटर (query parameters) और उपयोगकर्ता इनपुट (user inputs) को एन्कोड (encode) करें।

In Short:

जब भी आप किसी URL में space, emoji, या special symbol डालें — तो याद रखें, URL Encoding उसे सुरक्षित और ब्राउज़र-फ्रेंडली बना देती है