کدگذاری URL در HTML
charset تصمیم میگیرد فایل HTML چگونه بایتها را به حروف تبدیل کند. کدگذاری URL (percent-encoding) مسئلهٔ دیگری است: نویسهها چگونه داخل یک URL — در لینک، redirect و دادهٔ query فرم — بدون شکستن ساختار خودِ URL ایمن سفر کنند. فاصله، حروف غیرASCII و نمادهای رزرو اغلب به شکل % + هگز نیاز دارند تا مرورگر و سرور روی معنی توافق کنند.
کدگذاری URL چیست؟
URL نویسههای رزروی دارد که آدرس را ساختار میدهند: ? query را شروع میکند، & جفتها را جدا میکند، = نام را به مقدار وصل میکند، # fragment را شروع میکند. اگر آن نویسهها بهعنوان داده داخل یک مقدار بیایند، باید کدگذاری شوند تا با ساختار اشتباه گرفته نشوند. نویسههای ناامن مثل فاصله هم برای انتقال مطمئن کدگذاری میشوند.
پاسخ مستقیم
کدگذاری URL یک نویسه را با % و دو رقم هگزادسیمال جایگزین میکند. مثال کلاسیک: فاصله میشود %20. بسیاری مرورگرها و فرمهای HTML هنگام submit مقادیر query را خودکار کد میکنند. وقتی href را دستی مینویسید، لینک خراب را عیبیابی میکنید، یا نوار آدرس پر از percent-code میخوانید، هنوز به این ایده نیاز دارید.
کدگذاریهای percent رایج
📊 کدگذاریهای percent رایج
| نویسه | کدشده | یادداشت |
|---|---|---|
| فاصله | %20 | در query string خیلی رایج است |
| # | %23 | وگرنه # شروع fragment است |
| & | %26 | & جفتهای query را جدا میکند |
| = | %3D | = نام و مقدار را جدا میکند |
| ? | %3F | ? رشتهٔ query را شروع میکند |
| / | %2F | اسلش داخل مقدار ممکن است نیاز به کدگذاری داشته باشد |
query کدشده در لینک
نوشتن دستی یک جستجو با فاصله روشنترین دموی مبتدی است. فاصله را در مقدار کد کنید؛ ? و = ساختاری را دست نزنید.
لینک با فاصلهٔ کدشده در query
html<p>
<a href="search.html?q=html%20links">Search for html links</a>
</p>خواندن نمونه
search.htmlمسیر است؛ وقتی خودتان کنترل میکنید نام فایل مسیر را ساده نگه دارید?q=پارامتر query به نامqرا شروع میکندhtml%20linksمقدار «html links» است با فاصله بهصورت%20- متن قابلدید لینک میتواند انسانخوان بماند؛ کدگذاری متعلق به URL است
نام فایل تمیز را ترجیح دهید؛ مقادیر را کد کنید
کدگذاری کل نام فایلی که فاصله دارد برای همه سخت است. my-page.html را به my page.html ترجیح دهید. percent-encoding را عمدتاً برای مقادیر query و نویسههای ویژه داخل URLهایی به کار ببرید که باید دستی بسازید.
مسیر تمیز در برابر مقدار query کدشده
html<!-- Prefer a clean path -->
<a href="my-page.html">My page</a>
<!-- Encode spaces inside query values when needed -->
<a href="results.html?topic=url%20encode">URL encode results</a>فرمها و مرورگرها اغلب کمک میکنند
وقتی کاربر فرمی با method="get" میفرستد، مرورگرها معمولاً مقادیر فیلد را برای شما در query string کد میکنند. این نیاز به فهم %20 را وقتی لاگ میخوانید، لینک اشتراک میگذارید، یا href دستی مینویسید از بین نمیبرد. دانستن الگو عیبیابی را سریعتر میکند.
همان entityهای HTML نیست
در متن HTML، & یک entity برای نویسهٔ ampersand است. در URL، ampersandi که داده است ممکن است بهصورت %26 بیاید. ابزار متفاوت، بافت متفاوت. همچنین charset فایل UTF-8 دربارهٔ رمزگشایی فایل .html است — جایگزین percent-encoding داخل URL نیست.
غیرASCII در URL (یادداشت مبتدی)
حروف بیرون ASCII پایه ممکن است در آدرسهای واقعی بهصورت دنبالههای percent بلندتر ظاهر شوند. در این جلسه لازم نیست آن جدولها را حفظ کنید. قاعده را به خاطر بسپارید: وقتی نویسه بهعنوان داده ناامن یا رزرو است، percent-encoding روش حمل آن در URL است. برای صفحات آموزشی، queryهای دمو را تا وقتی راحت نشدهاید در لاتین ساده بهعلاوهٔ %20 نگه دارید.
تمرین در ویرایشگر
- لینکی بسازید که
hrefآن queryای مثل?q=hello%20worldداشته باشد. - لینک را باز کنید و نوار آدرس را ببینید.
- در سورس
%20را به فاصلهٔ خام عوض کنید، دوباره بار کنید، و ببینید مرورگر URL را چگونه هنجار یا خراب میکند. - یک فایل تمرین را با خط تیره بهجای فاصله نامگذاری کنید و لینکها را بهروز کنید.
- یک مقدار query بنویسید که اگر ampersand بخشی از داده بود به
%26نیاز داشت — بعد تأیید کنید&ساختاری بین پارامترها را کد نکردهاید.
اشتباهات رایج
- چسباندن فاصلهٔ خام در URL داخل کد بدون بررسی نتیجه
- percent کردن اشتباهی طرح
https://یا کل اسکلت ساختاری - قاطی کردن entityهای HTML (
&) با کدهای URL (%26) - گذاشتن فاصله در هر نام فایل و امید به اینکه کدگذاری ناوبری را تا ابد نجات دهد
- کد کردن
?/&/=ساختاری که باید بین بخشها نحو URL بمانند
خلاصه
- کدگذاری URL از
%بهعلاوهٔ دو رقم هگز استفاده میکند (فاصله →%20) - نویسههای رزرو و ناامن وقتی دادهاند نیاز به کدگذاری دارند
- نام فایل ساده را ترجیح دهید؛ مقادیر query را وقتی دستی مینویسید کد کنید
- فرمها و مرورگرها اغلب هنگام submit خودکار کد میکنند
- percent-encoding همان کار entityهای HTML یا charset فایل نیست
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کردهاید
📝 دستورالعملها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- میتوانید آزمون را هر چند بار که میخواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده میشود