برای ساخت لینک در HTML معمولاً از عنصر a و اتریبیوت href استفاده میکنیم؛ اما مهارت اصلی فقط نوشتن یک تگ نیست. باید بدانیم مرورگر مقصد داخل href را نسبت به چه آدرسی پیدا میکند و چه زمانی باید از مسیر نسبی، مسیر مبتنی بر ریشه Origin یا URL کامل استفاده کنیم.
اگر این منطق روشن نباشد، سه مقدار ساده مثل about.html، ../about.html و /about/ میتوانند به مقصدهای متفاوتی اشاره کنند. همین موضوع هنگام لینکدادن بین فایلهای یک پروژه، ساخت لینک داخلی، رفتن به بخش مشخصی از صفحه و عیبیابی لینکهای خراب تعیینکننده است.
در این آموزش ابتدا مدل لینک و نقش href را میسازیم، سپس نحوه Resolve شدن مسیرها را یاد میگیریم و در ادامه سراغ لینک بین فایلها، Fragmentها، اصول لینک قابلفهم، mailto:، tel:، دانلود و روش عیبیابی میرویم.
لینک در HTML چیست و href چه کاری انجام میدهد؟
لینک در HTML یک مبدأ را به یک مقصد متصل میکند. مقصد میتواند صفحهای در همان سایت، سایتی دیگر، یک فایل یا بخش مشخصی از یک سند باشد. در سادهترین حالت، عنصر a رابط لینک را میسازد و href URL مقصد را مشخص میکند.
<a href="about.html">درباره ما</a>
در این مثال، «درباره ما» متن قابل مشاهده لینک است و about.html مقصد آن. مدل پایه را میتوان اینطور دید:
صفحه فعلی ← href ← مقصد
طبق استاندارد HTML WHATWG، عنصر a وقتی href داشته باشد یک Hyperlink را نمایش میدهد؛ بدون href، خود عنصر وجود دارد اما Hyperlink ایجاد نمیکند.
آیا تگ a بدون href هم لینک است؟
نه. این کد Hyperlink ایجاد نمیکند:
<a>درباره ما</a>
این تفاوت از نظر معنا مهم است: وجود عنصر a بهتنهایی به معنی وجود لینک قابل پیمایش نیست.
تمرکز این مقاله روی مفهوم لینک و مسیردهی است. برای سینتکس، اتریبیوتها و رفتارهای اختصاصی خود عنصر، مقاله تگ a در HTML را بخوانید. اگر هنوز جایگاه عنصر و اتریبیوت در HTML برایتان روشن نیست، راهنمای HTML چیست پیشنیاز مناسبتری است.
مرورگر مسیر یک لینک را چگونه پیدا میکند؟
وقتی href یک URL کامل مثل https://example.com/about/ باشد، مقصد مستقل از مسیر صفحه فعلی مشخص است. اما برای مقداری مثل about.html، مرورگر باید آن را نسبت به آدرس پایه سند یا Base URL حل کند.
در حالت معمول Base URL همان آدرس سند است. اگر سند عنصر base داشته باشد، مقدار href اولین base معتبر میتواند مبنای URLهای نسبی را عوض کند. این رفتار در MDN درباره Node.baseURI و مرجع عنصر base توضیح داده شده است.
my-site/
├── index.html
├── about.html
└── pages/
└── contact.html
اگر لینک داخل index.html باشد، مقدار about.html به فایلی در همان پوشه میرسد:
<a href="about.html">درباره ما</a>
https://example.com/index.html + about.html
← https://example.com/about.html
اما اگر همان href داخل pages/contact.html نوشته شود، مرورگر مقصد را در پوشه pages جستوجو میکند. برای رسیدن به about.html که یک سطح بالاتر است، باید یک Parent Directory برگردیم:
<a href="../about.html">درباره ما</a>
برای پیدا کردن مسیر، از محل سند مبدأ شروع کنید و حرکت لازم تا مقصد را بنویسید؛ مسیر را از روی «کل پروژه» حدس نزنید.
عنصر base چه چیزی را تغییر میدهد؟
عنصر base میتواند آدرس پایه سند را تغییر دهد. در نتیجه URLهای نسبی دیگر لزوماً نسبت به آدرس ظاهری صفحه حل نمیشوند.
<head>
<base href="https://example.com/docs/">
</head>
<body>
<a href="about.html">درباره ما</a>
</body>
نتیجه: https://example.com/docs/about.html
برای این کلاستر همین مدل کافی است؛ جزئیات و محدودیتهای این عنصر در مقاله تگ base در HTML بررسی میشود.
مسیر نسبی، مسیر مبتنی بر ریشه و URL کامل چه تفاوتی دارند؟
فرض کنید صفحه فعلی https://example.com/products/laptop.html است. جدول زیر نشان میدهد هر شکل از href نسبت به چه چیزی حل میشود:
| مقدار href | مبنای پیدا کردن مقصد | مقصد نهایی |
|---|---|---|
| about.html | پوشه فعلی | https://example.com/products/about.html |
| ./about.html | پوشه فعلی | https://example.com/products/about.html |
| ../about.html | پوشه والد | https://example.com/about.html |
| /about/ | ریشه Origin فعلی | https://example.com/about/ |
| https://example.com/about/ | URL کامل | همان URL نوشتهشده |
مسیر نسبی در همان پوشه و پوشه فرزند
my-site/
├── index.html
└── pages/
└── about.html
<a href="about.html">درباره ما</a>
<a href="pages/about.html">درباره ما</a>
نوشتن ./about.html نیز به Current Directory اشاره میکند. در HTML ساده، وقتی ابهامی وجود ندارد، about.html معمولاً خواناتر است.
../ یعنی یک سطح به پوشه والد برگرد
my-site/
├── about.html
└── products/
└── laptop.html
<a href="../about.html">درباره ما</a>
هر ../ یک سطح از Current Directory به Parent Directory میرود. اگر مقصد دو سطح بالاتر باشد، میتوان ../../ را بهکار برد.
این قواعد Resolve شدن مسیرهای نسبی در راهنمای MDN برای Relative References با مثالهای بیشتر توضیح داده شدهاند.
مسیری که با / شروع میشود
مسیری مثل /about/ از ریشه Origin فعلی محاسبه میشود، نه از پوشه صفحه فعلی. بنابراین اگر صفحه روی https://example.com/products/laptop.html باشد، /about/ به https://example.com/about/ میرسد.
این نکته مخصوصاً برای پروژههایی که زیر یک Subpath منتشر میشوند مهم است: / از ریشه Origin شروع میکند، نه لزوماً از «ریشه پوشه پروژه». هنگام بازکردن مستقیم فایلهای محلی با file: نیز نباید رفتار / را معادل ریشه یک وبسایت فرض کرد.
URL کامل
<a href="https://developer.mozilla.org/" target="_blank" rel="noopener">MDN</a>
در URL کامل Scheme، Host و Path مقصد مشخصاند؛ بنابراین محل فایل مبدأ مسیر مقصد را تغییر نمیدهد.
چرا بهتر است /about/ را ساده «مسیر مطلق» ننامیم؟
در منابع آموزشی، عبارت «مسیر مطلق» گاهی برای URL کامل و گاهی برای Path شروعشده با / استفاده میشود. برای جلوگیری از ابهام، در این مقاله سه اصطلاح را جدا نگه میداریم:
- مسیر نسبی: about.html، ./about.html یا ../about.html
- مسیر مبتنی بر ریشه Origin: /about/
- URL کامل: https://example.com/about/
این تفکیک کمک میکند کاربر دقیقاً بفهمد چه بخشهایی از مقصد داخل href مشخص شده و کدام بخشها از Base URL گرفته میشوند.
لینک داخلی و خارجی چه فرقی با مسیر نسبی و URL کامل دارند؟
«داخلی/خارجی» و «نسبی/کامل» دو دستهبندی متفاوتاند. اولی در معماری محتوا رابطه مقصد با وبسایت را توصیف میکند؛ دومی درباره شکل URL است.
| سؤال | دستهبندی |
|---|---|
| مقصد داخل همان وبسایت است یا بیرون از آن؟ | داخلی / خارجی |
| آدرس نسبت به Base URL نوشته شده یا کامل است؟ | نسبی / URL کامل |
| مسیر از ریشه Origin فعلی شروع میشود؟ | مسیر مبتنی بر ریشه |
بنابراین این دو لینک، اگر روی example.com قرار داشته باشند، هر دو میتوانند داخلی باشند:
<a href="/about/">درباره ما</a>
<a href="https://example.com/about/" target="_blank" rel="noopener">درباره ما</a>
در مقابل، لینک زیر به وبسایت دیگری میرود و خارجی است:
<a href="https://developer.mozilla.org/" target="_blank" rel="noopener">MDN</a>
پس از ظاهر کوتاه یا بلند href نمیتوان داخلی یا خارجی بودن لینک را نتیجه گرفت. همچنین برای لینکهای داخلی یک قانون همیشگی وجود ندارد که «حتماً نسبی» یا «حتماً root-relative» باشند؛ انتخاب باید با ساختار و روش انتشار پروژه هماهنگ باشد.
چگونه بین فایلهای یک پروژه HTML لینک ایجاد کنیم؟
در یک پروژه چندفایلی، مسیر را بهجای حفظکردن از روی حرکت واقعی میان مبدأ و مقصد محاسبه کنید.
my-site/
├── index.html
├── about.html
├── products/
│ ├── index.html
│ └── laptop.html
└── contact/
└── index.html
چهار حرکت اصلی در همین پروژه
از index.html به about.html؛ مقصد در همان پوشه است:
<a href="about.html">درباره ما</a>
از index.html به products/laptop.html؛ وارد پوشه فرزند میشویم:
<a href="products/laptop.html">مشاهده لپتاپ</a>
از products/laptop.html به index.html؛ یک سطح به والد برمیگردیم:
<a href="../index.html">صفحه اصلی</a>
از products/laptop.html به contact/index.html؛ ابتدا به والد برمیگردیم و بعد وارد contact میشویم:
<a href="../contact/index.html">تماس با ما</a>
آیا همیشه باید index.html را در لینک بنویسیم؟
نه لزوماً. بسیاری از وبسرورها index.html را بهعنوان سند پیشفرض یک Directory تنظیم میکنند؛ بنابراین ممکن است products/ همان products/index.html را نمایش دهد. این رفتار متعلق به تنظیمات سرور است، نه یک تضمین خود HTML.
برای تمرین اولیه، نوشتن نام فایل بهصورت صریح کمک میکند رابطه فایل و URL را بهتر ببینید؛ در پروژه واقعی باید با Routeها و تنظیمات سرور همان پروژه هماهنگ شوید.
یک تمرین کوتاه
my-site/
├── blog/
│ └── posts/
│ └── html-links.html
└── courses/
└── html.html
اگر مبدأ blog/posts/html-links.html و مقصد courses/html.html باشد، دو سطح به بالا میرویم و بعد وارد courses میشویم:
<a href="../../courses/html.html">دوره HTML</a>
قاعده عملی: مسیر را از محل فایل مبدأ به سمت مقصد بخوانید.
چگونه به بخش مشخصی از یک صفحه لینک بدهیم؟
برای رفتن به نقطهای مشخص از یک سند میتوان از Fragment استفاده کرد؛ بخشی از URL که با # آغاز میشود. یک مقصد رایج برای Fragment، عنصری با id متناظر است.
<a href="#contact">رفتن به بخش تماس با ما</a>
<h2 id="contact">تماس با ما</h2>
href=”#contact” → id=”contact”
علامت # داخل href بخشی از Syntax Fragment است و داخل مقدار id نوشته نمیشود. همچنین id باید در سند یکتا باشد تا مقصد قابل پیشبینی بماند.
لینک به بخش مشخصی از صفحه دیگر
<h2 id="team">تیم ما</h2>
<a href="about.html#team">آشنایی با تیم ما</a>
در این حالت about.html صفحه مقصد و #team بخش مقصد در همان صفحه است. برای عیبیابی نیز این دو را جدا بررسی کنید: اول آیا صفحه درست باز میشود، بعد آیا id متناظر وجود دارد.
یک کاربرد متداول Fragment، فهرست مطالب داخلی یک صفحه بلند است:
<nav>
<a href="#intro">مقدمه</a>
<a href="#examples">مثالها</a>
<a href="#faq">سؤالات متداول</a>
</nav>
یک لینک درست در HTML چه ویژگیهایی دارد؟
لینک خوب فقط لینکی نیست که مقصدش باز شود؛ باید هدفش قابلفهم باشد، عنصر مناسب را استفاده کند و رفتار غیرمنتظره را بدون اطلاع کاربر تحمیل نکند.
متن لینک باید مقصد را توضیح دهد
<a href="/html/">اینجا کلیک کنید</a>
<a href="/html/">آموزش HTML</a>
راهنمای W3C WAI درباره متن لینک توصیه میکند Link Text محتوای مقصد را توصیف کند و از عبارتهای مبهمی مثل «اینجا کلیک کنید» در جایی که هدف لینک روشن نیست پرهیز شود.
URL خام نیز در متن معمولی اغلب Anchor Text خوبی نیست؛ مگر اینکه خود URL موضوع آموزش یا اطلاعات موردنیاز خواننده باشد.
لینک برای Navigation است؛ button برای Action
<a href="/courses/html/">مشاهده دوره HTML</a>
<button type="button">باز کردن منو</button>
اگر فعالکردن کنترل کاربر را به یک URL میبرد، لینک انتخاب طبیعی است. اگر قرار است عملی در همان رابط انجام شود، معمولاً button معنای مناسبتری دارد. ساختن دکمه مصنوعی با href=”#” یا javascript:void(0) انتخاب خوبی برای HTML معنایی نیست.
بازکردن در تب جدید را آگاهانه انتخاب کنید
<a href="https://example.com/" target="_blank" rel="noopener">Example</a>
لینکها بهطور پیشفرض در همان Tab باز میشوند. MDN نیز درباره target=”_blank” توصیه میکند این انتخاب بر اساس تجربه کاربر و آگاهانه انجام شود، نه بهعنوان قانون خودکار برای تمام لینکهای خارجی.
رفتار غیرمنتظره را در متن روشن کنید
<a href="/files/html-guide.pdf">راهنمای HTML (PDF، 8 مگابایت)</a>
اگر مقصد فایل، دانلود یا رفتار خاصی دارد و این اطلاعات برای تصمیم کاربر مهم است، نوع فایل یا اندازه آن را در متن لینک یا متن پیرامون آن مشخص کنید.
همچنین با CSS همه نشانههای تعاملی لینک را حذف نکنید. لینک باید از متن معمولی قابل تشخیص باشد و هنگام پیمایش با صفحهکلید Focus قابل مشاهدهای داشته باشد.
mailto، tel و لینک دانلود چگونه کار میکنند؟
href فقط برای صفحات HTTP/HTTPS نیست. Schemeهای دیگری مثل mailto: و tel: نیز میتوانند مقصد لینک باشند. در مقابل، download یک Scheme نیست؛ اتریبیوت عنصر a است.
ساخت لینک ایمیل با mailto:
<a href="mailto:info@example.com">ارسال ایمیل به پشتیبانی</a>
فعالکردن mailto: ایمیل را خودکار ارسال نمیکند؛ این URI به Email Handler تنظیمشده کاربر تحویل داده میشود و رفتار بعدی به همان برنامه یا سرویس بستگی دارد. میتوان Subject را نیز پیشنهاد داد:
<a href="mailto:info@example.com?subject=HTML">ارسال ایمیل درباره HTML</a>
Syntax و قواعد Encoding این Scheme در RFC 6068 تعریف شدهاند. برای متنهای غیر ASCII و کاراکترهای رزروشده باید URL Encoding را درست انجام داد.
ساخت لینک تلفن با tel:
<a href="tel:+982112345678">تماس با پشتیبانی</a>
tel: یک مقصد تلفنی را مشخص میکند؛ خودش تضمین نمیکند دستگاه تماس را برقرار کند. سیستمعامل یا نرمافزار کاربر تصمیم میگیرد این URI چگونه مدیریت شود. در صورت امکان، شماره جهانی با کد کشور شکل قابلانتقالتری دارد.
لینک به فایل الزاماً به معنی دانلود نیست
<a href="files/html-guide.pdf">راهنمای HTML</a>
مرورگر ممکن است فایل PDF یا تصویر را نمایش دهد. اگر قصد نویسنده دانلود است، میتوان از download استفاده کرد:
<a href="files/html-guide.pdf" download>
دانلود راهنمای HTML
</a>
همچنین میتوان نام پیشنهادی فایل را مشخص کرد:
<a href="files/html-guide.pdf" download="html-guide.pdf">دانلود راهنما</a>
طبق HTML Living Standard، اتریبیوت download قصد نویسنده برای دانلود منبع را بیان میکند و مقدار آن میتواند نام پیشنهادی فایل باشد؛ اما Headerهای سرور، وضعیت Cross-origin و رفتار User Agent میتوانند نتیجه را تغییر دهند. بنابراین download را تضمین مطلق دانلود برای هر URL در نظر نگیرید.
چرا لینک HTML کار نمیکند؟ روش عیبیابی لینکها و مسیرهای خراب
وقتی لینک کار نمیکند، href را تصادفی تغییر ندهید. مسیر Resolve را مرحلهبهمرحله بررسی کنید تا مشخص شود خطا در مبدأ، Base URL، Path، مقصد یا Fragment است.
مبدأ
↓
Base URL
↓
href
↓
URL مقصد
↓
Fragment (اگر وجود دارد)
روند عیبیابی پیشنهادی
- مبدأ را مشخص کنید: لینک دقیقاً داخل کدام سند یا URL قرار دارد؟
- مقدار href را بخوانید: ./، ../ یا / دقیقاً چه حرکتی ایجاد میکنند؟
- Base URL را بررسی کنید: آیا عنصر base مبنا را تغییر داده است؟
- URL نهایی را محاسبه کنید و آن را با مقصد مورد انتظار مقایسه کنید.
- وجود مقصد را بررسی کنید: نام فایل، پوشه، Route و حروف بزرگ/کوچک درستاند؟
- اگر Fragment دارید، وجود id متناظر را جداگانه بررسی کنید.
- در محیط واقعی اجرا کنید و URL نهایی نوار آدرس را با انتظار خود مقایسه کنید.
مثال: یک ../ کم است
my-site/
├── courses/
│ └── html.html
└── blog/
└── posts/
└── links.html
داخل blog/posts/links.html این مسیر اشتباه است:
<a href="../courses/html.html#links">آموزش لینکها</a>
یک ../ فقط از posts به blog برمیگردد؛ بنابراین مرورگر دنبال blog/courses/html.html میگردد. برای رسیدن به ریشه پروژه به دو سطح برگشت نیاز داریم:
<a href="../../courses/html.html#links">آموزش لینکها</a>
بعد از اصلاح صفحه مقصد، هنوز باید داخل courses/html.html وجود id=”links” را بررسی کنیم. یعنی Path و Fragment دو مرحله جدا از عیبیابیاند.
مهمترین قاعده عیبیابی: مقصدی را که مرورگر از روی href محاسبه میکند پیدا کنید و آن را با مقصدی که واقعاً میخواستید مقایسه کنید.
جمعبندی
اگر بخواهیم کل مقاله را در یک مدل ذهنی نگه داریم، زنجیره اصلی این است:
صفحه مبدأ → Base URL → href → URL مقصد → Fragment
بنابراین قبل از نوشتن یا عیبیابی هر لینک سه سؤال بپرسید:
- لینک داخل کدام صفحه قرار دارد؟
- مقصد دقیقاً کجاست؟
- href از مبدأ تا مقصد چه مسیری را توصیف میکند؟
با این نگاه لازم نیست ../ یا / را بدون منطق حفظ کنید. میتوانید مسیر را از روی ساختار پروژه محاسبه کنید، Internal/External را از Relative/Full URL جدا نگه دارید و خطای یک لینک خراب را مرحلهبهمرحله پیدا کنید.
اگر میخواهید HTML را از پایه تا ساخت پروژه در یک مسیر آموزشی منظم ادامه دهید، دوره مستر HTML بیتآموز مسیر بعدی مرتبط با این کلاستر است.
سوالات متداول
نه لزوماً. اگر ساختار Pathها حفظ شود، مسیرهای نسبی مثل about.html یا ../about.html بر اساس Base URL جدید حل میشوند. مسیر /about/ نیز روی Origin جدید از ریشه همان Origin محاسبه میشود. اما URL کاملِ هاردکدشده مثل https://old-example.com/about/ همچنان دامنه قدیمی را در خود دارد و معمولاً باید با Redirect یا اصلاح لینک مدیریت شود.
بله. میتوان img را داخل a قرار داد:
<a href=”products.html”>
<img src=”products.jpg” alt=”مشاهده محصولات”>
</a>
اگر تصویر تنها محتوای لینک است، alt باید هدف یا کارکرد لینک را منتقل کند؛ عبارت عمومی «تصویر» اطلاعات کافی به کاربر فناوری کمکی نمیدهد.
هنوز دیدگاهی ثبت نشده است.