ایجاد پیوند یا لینک در HTML – المان <a>

لینک ها یا پیوندها یکی از اجزای مهم و پرکاربرد در HTML هستند. این نوع المان ها که با عنوان ابرپیوند یا هایپرلینک (Hyperlink) نیز شناخته می‌شوند در اغلب صفحات اچ‌تی‎‌ام‌ال وجود دارند و امکان انتقال از یک صفحه وب به صفحه‌ای دیگر، ارجاع به فایل ها، نشانی های ایمیل و … را فراهم می‌کنند.

برای ایجاد لینک ها در HTML از المان <a> یا Anchor (به معنی لنگر) استفاده می‌شود. ساختار کلی این المان ها به صورت زیر است:

<a href="https://example.com">Link text</a>

مابین تگ شروع <a> و تگ پایان </a> محتوایی قرار می‌گیرد که به عنوان لینک در صفحه وب نمایش داده می‌شود. در مثال فوق، عبارت Link text محتوای داخلی المان یا متن لینک است و کاربر با کلیک روی این عبارت به مقصد پیوند هدایت می‌شود. معمولا این المان مشابه با تصویر زیر به شکل زیرخط‌دار توسط مرورگر رندر می‌شود و با قرار گرفتن نشانگر ماوس روی لینک، آیکن آن به صورت یک دست تغییر شکل پیدا می‌کند. البته این ظاهر الزامی نیست و با کمک CSS قابل سفارشی سازی است.

نمونه ای از یک لینک HTML در یک صفحه وب

نکته: اجباری در متنی بودن لینک وجود ندارد. در واقع محتوای داخل المان <a> می‌تواند تصویر یا هر المان دیگر HTML نیز باشد.

بیشتر بخوانید: استفاده از تصویر به عنوان لینک در HTML

خصوصیت‌های href و target عنوان دو خصوصیت پرکاربرد برای المان های <a> هستند. در ادامه با این خصوصیت‌ها و جزئیات لینک ها در HTML بیشتر آشنا می‌شوید.

خصوصیت href و مقصد لینک ها در HTML

خصوصیت href مهم‌ترین خصوصیت در المان های <a> به شمار می‌رود. این خصوصیت مقصد لینک یا آدرس URL ای را مشخص می‌کند که کاربر با کلیک روی لینک به آن هدایت می‌شود.

در مثال زیر می‌توانید این خصوصیت را همراه با مقدار آن داخل تگ شروع یک المان <a> مشاهده کنید.

<a href="https://example.com">Our Website</a>

نتیجه این المان را می‌توانید در ادامه به صورت زنده مشاهده کنید. کاربر با کلیک روی عبارت Our Website به مقصد لینک یعنی https://example.com هدایت می‌شود. در این مثال برای مقدار خصوصیت href از یک نشانی کامل یا مطلق (Absolute URL) استفاده کردیم.

See the Pen
Simple HTML Link
by techdic (@techdic)
on CodePen.

شما می‌توانید برای مقصد لینک‌ها از نشانی های نسبی (Relative URL) نیز استفاده کنید. این نشانی‌ها بدون درج کامل نشانی مقصد ظاهر می‌شوند و در واقع متعلق به همان سایت مبدأ لینک هستند. به عنوان مثالی از نشانی های نسبی برای خصوصیت href می‌توانید المان زیر را در نظر بگیرید:

<a href="/definition/hyperlink/">What is a hyperlink</a>

نتیجه قرار گرفتن المان فوق در صفحه جاری به صورت لینک زیر خواهد بود. با کلیک روی این لینک به نشانی https://techdic.ir/definition/hyperlink/ هدایت می‌شوید.

خصوصیت target و باز شدن لینک در زبانه یا پنجره جدید مرورگر

خصوصیت target یکی دیگر از خصوصیت‌های پرکاربرد برای المان های <a> محسوب می‌شود. مقدار پیشفرض این خصوصیت به صورت _self می‌باشد که نتیجه آن باز شدن مقصد لینک در همان پنجره و زبانه فعلی خواهد بود.

مقدار _blank برای این خصوصیت باعث می‌شود مقصد لینک در زبانه جدید (یا پنجره جدید) مرورگر باز شود:

<a href="/definition/hyperlink/" target="_blank">What is a hyperlink (opens in new tab or window)</a>

نتیجه قرار گرفتن المان فوق در همین صفحه نیز به صورت لینک زیر خواهد بود. با کلیک روی این لینک، نشانی https://techdic.ir/definition/hyperlink/ در زبانه یا پنجره جدید مروگر باز می‌شود.

خصوصیت download

خصوصیت download یکی دیگر از خصوصیت‌های قابل استفاده در المان های <a> می‌باشد. وجود این خصوصیت در تگ شروع یک المان <a> باعث می‌شود هنگام کلیک روی لینک، منبع یا فایلی که توسط مقصد لینک (خصوصیت href) مشخص شده – به جای باز شدن داخل مرورگر – دانلود شود. به عنوان نمونه در مثال زیر با کلیک روی لینک حاصل، فایل تصویر example.jpg به جای اینکه داخل مرورگر باز شود دانلود می‌شود.

<a href="images/example.jpg" download>Download the image</a>

گفتنی است مقدار اختیاری برای این خصوصیت، نام نهایی فایل دانلودی را مشخص می‌کند.

بیشتر بخوانید: آشنایی با خصوصیت download در المان های <a>

ایجاد لینک ایمیل در HTML

لینک های ایمیل نوع خاصی از لینک ها هستند که با کلیک روی آن‌ها، صفحه نگارش یا ارسال پیام در برنامه پیشفرض ایمیل برای کاربر باز می‌شود. امکان تکمیل خودکار جزئیات پیام (نظیر آدرس ایمیل گیرنده پیام، موضوع و …) نیز با کمک این لینک‌ها وجود دارد.

برای ایجاد لینک ایمیل در HTML، می‌توانید از mailto: در ابتدای نشانی لینک (یا خصوصیت href) استفاده کنید. در ساده‌ترین و رایج‌ترین حالت، آدرس ایمیل گیرنده مشابه با مثال زیر پس از mailto: درج می‌شود.

<a href="mailto:[email protected]">Send email</a>

نتیجه کد فوق مشابه با لینک زیر خواهد بود:

با کلیک روی این لینک، برنامه ایمیل پیشفرض روی دستگاه کاربر باز می‌شود. صفحه ارسال پیام جدید نیز به صورت آماده در اختیار کاربر قرار می‌گیرد. فیلد گیرنده پیام در این مثال به صورت خودکار با نشانی ایمیلی که در لینک مشخص شده (یعنی [email protected]) تکمیل می‌شود.

بیشتر بخوانید: آشنایی با جزئیات ایجاد لینک ایمیل در HTML

بازگشت به فهرست مجموعه آموزشی HTML

امیرحسین شهسواری

عاشق دنیای رایانه و فناوری به خصوص برنامه نویسی هستم؛ یادگرفتن و البته یاد دادن چیزای جالبی که یاد گرفتم باعث خوشحالیم میشه و از اولویت‌های اصلی زندگیم به حساب میاد. از مدیریت و نوشتن در تک دیک هم واقعا لذت می‌برم :)

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *