← Back to HTML Course | Chapter 4: Semantics & Entities | Lesson 7 of 10

HTML URL Encode

सोचिए आप अपने friend को एक letter लिखकर mail के जरिए भेज रहे हैं। लेकिन envelope पर एक standard street address लिखने के बजाय, आप special characters और symbols वाला एक message लिखते हैं। post office की sorting machines confuse हो सकती हैं और आपके letter को गलत घर पर deliver कर सकती हैं। URLs भी special characters से confuse हो सकते हैं। Web addresses में केवल standard ASCII characters हो सकते हैं। अगर किसी URL में spaces, accents, या symbols हैं, तो browser को उन्हें percentages का उपयोग करके safe codes में convert करना पड़ता है। इस conversion process को 'URL encoding' कहा जाता है। यह spaces और unsafe symbols को secure, standardized codes में बदल देती है, ताकि browsers आपका page safely ढूंढ सकें।

URL Encoding क्या है?

URL encoding किसी web address में असुरक्षित या special characters को एक ऐसे safe format में बदल देता है जिसे internet पर transmit किया जा सकता है, यह non-ASCII characters को '%' symbol के बाद दो hexadecimal digits से बदल देता है।

Note: URLs में सिर्फ letters, numbers, और hyphens व slashes जैसे कुछ safe symbols ही हो सकते हैं।
Warning: आपके web link paths के अंदर unencoded spaces या special symbols होने से browser page load करने में असफल रहेगा।

उदाहरण: What is URL Encoding?

markup
<a href="https://example.com/search?q=hello%20world">Search link</a>

Spaces को Encode करना (%20 या +)

Spaces URLs में सबसे आम असुरक्षित characters हैं। Browsers standard web link paths के अंदर spaces को hexadecimal code %20 में बदल देते हैं, जबकि form query parameters में spaces को अक्सर plus symbol (+) में बदला जाता है।

Note: अपनी web files का नाम रखते समय spaces इस्तेमाल करने से बचें; अपने URLs को साफ रखने के लिए इसके बजाय hyphens इस्तेमाल करें।
Warning: सुनिश्चित करें कि आपके file links %20 और plus symbols को गलत तरीके से मिक्स न करें, क्योंकि इससे loading में समस्याएं आ सकती हैं।

उदाहरण: Encoding Spaces (%20 or +)

markup
<a href="page%20name.html">Link with encoded space</a>

Reserved Query Characters को Encode करना

?, &, और = जैसे characters query parameters को अलग करने के लिए URLs में reserved होते हैं। अगर आपको इन symbols को अपनी query values में असली data के रूप में शामिल करना है, तो browser को उन्हें parameters समझने से रोकने के लिए इन्हें encode करना होगा।

Note: Encoders reserved symbols को बदल देते हैं (जैसे & को %26 और = को %3D) ताकि आपके parameters structured बने रहें।
Warning: query data को encode न करने से आपके parameters टूट सकते हैं और server errors आ सकते हैं।

उदाहरण: Encoding Reserved Query Characters

markup
<a href="https://example.com/search?q=cats%26dogs">Encoded ampersand</a>

Non-ASCII Characters को Handle करना

Web addresses में accents, Cyrillic letters, या emojis जैसे non-ASCII characters नहीं हो सकते। अगर आप अपने links में ये characters शामिल करते हैं, तो browser अपने-आप उन्हें secure, hexadecimal codes में बदल देगा।

Note: आपके links को साफ और पढ़ने लायक दिखाने के लिए modern browsers address bar में URL encoding को छिपा देते हैं।
Warning: अगर आप browser address bar से special characters वाला कोई URL copy-paste करते हैं, तो यह एक लंबी, encoded string के रूप में paste होगा।

उदाहरण: Handling Non-ASCII Characters

markup
<a href="https://example.com/caf%C3%A9">Encoded café</a>

Form Data Encoding Types

जब कोई user कोई HTML form submit करता है, तो browser input data को package करके उसे अपने-आप encode कर देता है। Default रूप से, forms query fields को name-value pairs के रूप में package करने के लिए 'application/x-www-form-urlencoded' format इस्तेमाल करते हैं।

Note: default form encoding type standard text fields के लिए एकदम सही है, लेकिन files upload करते समय आपको 'multipart/form-data' इस्तेमाल करना होगा।
Warning: file upload form पर सही encoding type specify न करने से आपकी file transfers असफल हो जाएंगी।

उदाहरण: Form Data Encoding Types

markup
<form action="/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="photo">
</form>
Live Example
Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
🔒

Chapter Quiz — Complete all 10 topics to unlock

0/10 topics done

Complete these topics first:

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.