آموزش تگ لینک در HTML – تگ a href
- آموزش html
- ۱۳ اسفند ۱۴۰۳
- 65 بازدید
ایجاد لینک یکی از مهم‌ترین کارهایی است که در html به کمک تگ لینک انجام می‌شود. در ادامه روش افزودن تگ لینک را بررسی می‌کنیم و به معرفی ویژگی‌های آن خواهیم پرداخت.
آنچه در این پست می‌خوانید
تگ لینک چیست؟
یک صفحه وب می‌تواند شامل لینک‌های مختلفی باشد که ما را مستقیماً به سایر صفحات وب، منابع و حتی بخش‌های خاصی از یک صفحه معین می‌برد.
هایپرلینک نوع خاصی از لینک و یا پیوند است که به کاربران اجازه میدهد با کلیک بر روی آن از یک صفحه وب یا منبع به صفحه دیگر حرکت کنند.
میتوانید با استفاده از متن یا تصاویر موجود در یک صفحه وب، لینک ایجاد کنید.
در HTML با استفاده از تگ <a> میتوانید لینک را تعریف کنید. تگ لینک به شکل تگ شروع و پایان استفاده می‌شود.
<a href=”آدرس لینک<”متن</a>
به صورت پیش‌قرض سه حالت برای تگ a وجود دارد:
- لینکی که روی آن کلیک نشده است.
- لینکی که بر روی آن کلیک شده است.
- لحظه کلیک کردن بر روی لینک.
در ادامه چند مثال برای درک بهتر این تگ قرار داده شده است.
<body> <a href="https://vebeet.com">وب سایت وبیت</a> </body>
مثال زیر یک نوع لینک درون صفحه‌ای است که کاربر می‌تواند از آن برای انتقال از پایین صفحه به بالای صفحه استفاده کند.
<html id="Top">
<body>
<a href="#Top">برو بالای صفحه</a>
</body>
</html>
تگ a همانند بسیاری از تگ‌های دیگر دارای صفات (Attribute) است که در ادامه معرفی می‌کنیم.
| نام صفت | مقدار | توضیح |
| href | URL | در این صفت آدرس URL و یا فایل موردنظر قرار داده می‌شود. |
| title | عنوان لینک را میتوانید وارد کنید که به سئو نیز کمک میکند | |
| hreflang | language_code | زبان فایل پیوند شده را مشخص میکند. |
| rel | alternate
author bookmark external help license next nofollow noreferrer noopener prev search tag |
نوع ارتباط بین صفحه جاری با صفحه‌ای که به آن لینک شده است را نشان میدهد. |
| target | _blank
_parent _self _top |
مشخص میکند سند یا آدرس لینک شده کجا باز شود. |
| type | media_type | نوع رسانه صفحه‌ای که به آن لینک داده‌ایم را مشخص میکند. |
| media | media_query | مشخص میکند سند یا رسانه پیوند داده شده برای چه دیوایسی بهینه شود. |
آموزش صفت Rel در HTML
در HTML، ویژگی rel در تگ <a> (که برای لینک ها استفاده می‌شود) به کار می‌رود تا نوع ارتباط یا رابطه بین صفحه جاری و صفحه هدف لینک را مشخص کند.
این ویژگی می‌تواند مقادیر مختلفی داشته باشد که هر کدام به نوعی از ارتباط اشاره دارند.
در ادامه برخی از مقادیر رایج ویژگی rel آورده شده است:
ویژگی noopener
این مقدار زمانی استفاده می شود که در لینک های جدید از target=”_blank” استفاده کرده‌اید.
این ویژگی از امنیت بیشتر جلوگیری از دسترسی صفحه جدید به صفحه اصلی جلوگیری می کند.
ویژگی noreferrer
مشابه noopener است، با این تفاوت که این ویژگی باعث می‌شود که اطلاعات مرجع (referrer) هنگام باز کردن لینک در صفحه جدید ارسال نشود.
ویژگی nofollow
زمانی استفاده می شود که می خواهید به موتورهای جستجو اعلام کنید که لینک نباید به رتبه بندی صفحات مقصد کمک کند.
معمولاً برای لینک های تبلیغاتی یا لینک‌های ناشناخته استفاده می شود.
ویژگی external
مشخص می کند که لینک به یک سایت خارجی اشاره دارد.
ویژگی bookmark
برای لینک هایی که به صفحات خاص اشاره دارند و باید به عنوان نشانه‌گذاری در نظر گرفته شوند.
ویژگی alternate
برای لینک هایی که نسخه های مختلفی از یک صفحه را نشان می‌دهند.
ویژگی author
برای مشخص کردن نویسنده‌ی محتوای صفحه.
ویژگی dns-prefetch
برای پیش‌بارگذاری DNS از دامنه ای که به آن نیاز دارید. این به بهبود زمان بارگذاری کمک میکند.
ویژگی help
به لینک هایی که به صفحه راهنما یا دستورالعمل‌ها اشاره دارند.
نمونه‌ای از استفاده از rel :
در این مثال، لینک به سایت “vebeet.com” باز می شود و از ویژگی های noopener و noreferrer برای افزایش امنیت و عدم ارسال اطلاعات مرجع استفاده می شود.
<a href="https://vebeet.com" target="_blank" rel="noopener noreferrer">وبیت</a>
با ما همراه باشید چرا که آموزش کار با کدنویسی html را بصورت جامع در سایت وبیت منتشر کرده ایم.
