ایجاد پیوند یا لینک در 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> هستند که در ادامه با آن‌ها آشنا می‌شوید.

ویژگی 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/ در زبانه یا پنجره جدید مروگر باز می‌شود.

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

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

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

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

نشانی ایمیل شما منتشر نخواهد شد.