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

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

نحوه ایجاد لینک با کمک المان <a> در اچ‌تی‌ام‌ال

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

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

انکر تکست یا متن لینک و ظاهر لینک ها

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

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

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

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

خصوصیت های پرکاربرد المان های <a>

خصوصیت‌های 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/ هدایت می‌شوید.

بیشتر بخوانید: آشنایی با مسیر فایل ها در HTML و جزئیات مسیرهای مطلق و نسبی

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

خصوصیت target یکی دیگر از خصوصیت‌های پرکاربرد برای المان های <a> محسوب می‌شود. این خصوصیت برای تعیین محل باز شدن مقصد لینک در یک المان <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/ در زبانه یا پنجره جدید مروگر باز می‌شود.

بیشتر بخوانید: آشنایی با جزئیات خصوصیت target در المان‌های <a>

خصوصیت 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:info@example.com">Send email</a>

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

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

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

ایجاد لینک به یک المان یا بخشی از صفحه

در HTML می‌توانید مقصد یک لینک را به شکلی مشخص کنید که کاربر با کلیک روی لینک به یک بخش و المان مشخص در صفحه هدایت شود. برای این منظور کافیست در انتهای نشانی مقصد، یک علامت # و پس از آن مقدار id المان موردنظر را درج کنید.

در مثال زیر مقدار #about برای خصوصیت href در تگ شروع <a> درج شده است. به این ترتیب کاربر با کلیک روی لینک حاصل به المانی در همان صفحه که دارای id برابر با about است هدایت می‌شود.

<a href="#about">Jump to About</a>

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

ایجاد لینک شماره تلفن در صفحات HTML

شما در HTML می‌توانید برای هر شماره تماس یک لینک قابل کلیک ایجاد کنید. کاربر با کلیک روی چنین لینک هایی معمولا می‌تواند به آسانی با شماره تلفن موردنظر تماس بگیرد.

برای ایجاد یک لینک شماره تلفن لازم است برای مقدار خصوصیت href ابتدا عبارت tel: و پس از آن شماره تلفن موردنظر درج شود. مثال زیر نمونه‌ای از نحوه ایجاد یک لینک شماره تلفن را نمایش می‌دهد:

<a href="tel:+981234567890">+98 123-456-7890</a>

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

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