HTML <a> tag – تگ <a> در زبان نشانه گذاری HTML

ساختار تگ a

<a href="https://www.wikiteach.ir">Visit Wikiteach site! </a>

معرفی و کاربرد

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

مهم ترین صفت (attribute) تگ a، صفت href است. href بیان کننده این است که مقصد لینک مورد نظر کجا خواهد بود. در واقع مقصد های لینک هایی که با تگ a ایجاد می شوند به دو دسته تقسیم می شوند.

  • لینک های داخلی : یعنی مقصد لینک مورد نظر داخل سایت خودمان باشد. به عبارت دیگر در سایت خودمان از یک صفحه به صفحه دیگر لینک می زنیم
  • لینک های خارجی : زمانی یک لینک خارجی است که مقصد آن آدرسی خارج از دامنه سایت خودمان باشد.

صفت ها ( Attributes )

صفت (ATTRIBUTE) مقادیر (value) توضیحات
download filename هنگامی که بخواهیم به صورت مستقیم یک فایل را برای دانلود قرار دهیم
href URL آدرس مقصد لینک مورد نظر
hreflang language_code مشخص می کند که صفحه ای که به آن لینک داده ایم چه زبانی دارد
media media_query بهینه سازی لینک برای انواع مختلف رسانه و یا دستگاه های کاربر سایت
ping list_of_URLs لیستی از آدرس ها را برای مرورگر کاربر ارسال می کند. معمولا برای ردیابی مورد استفاده قرار میگیرد
rel alternate
author
bookmark
external
help
license
next
nofollow
noreferrer
noopener
prev
search
tag
مدل ارتباطی بین صفحه ای که در آن قرار داریم و صفحه ای که به آن لینک داده ایم را بیان می کند
target _blank
_parent
_self
_top
framename
مشخص می کند که صفحه مقصد لینک در کجا باز شود
type media_type فرمت مقصدی که به آن لینک داده ایم را مشخص می کند

توضیحات مختصری در مورد صفات جدول بالا

اولین نکته این است که در ۹۰ درصد شرایط تنها صفتی که از آن استفاده می کنیم، href است. صفات rel و target هم در شرایط مختلف ممکن است مورد استفاده قرار گیرند. سایر صفات کاربرد بسیار محدودی دارند و به ندرت در پروژه ها استفاده می شوند.

  1. صفت rel : این صفت برای بیان مدل ارتبط بین صفحه ی مبدا و مقصد به کار می رود. با استفاده از این صفت لینک ایجاد شده به لحاظ ظاهری و حتی کارایی تغییری نخواهد کرد. در واقع برای اعلام وضعیت لینک به خزنده های موتور جستجو صفت rel به کار می رود. مهم ترین مقداری که برای این صفت قرار می دهیم، nofollow است و زمانی به کار می رود که مقصد لینک مورد نظر خارج از دامنه باشد. nofollow به این معنی است که این لینک برای استفاده ی کاربران قرار داده شده و جنبه تبلیغاتی و رپورتاژ ندارد. در مبحث سئو به طور مفصل بیان شده که استفاده از مقدار nofollow در لینک های خارجی یک سایت باعث بهبود وضعیت سئوی سایت خواهد شد.
  2. صفت target : صفحاتی که به آنها لینک دادیم می توانند در شرایط مختلفی باز شوند. برای مثال در همان تب از مرورگر باز شوند، در یک تب جدید باز شوند و یا یک پنجره جدید از مرورگر باز شده و لینک مقصد نمایش داده شود. برای تعیین این شرایط از صفت target استفاده می شود. 

آیا تگ a صفات عمومی (Global Attributes) را پشتیبانی می کند؟

بله . می توانید برای تگ a از صفات عمومی در Html استفاده کنید.

آیا تگ a صفات مربوط به رویداد ها(Event Attributes) را پشتیبانی می کند؟

بله . می توانید برای تگ a از برخی از صفات مربوط به رویداد ها در Html استفاده کنید.

نکات مهم مربوط به این تگ

  1. صفات download ، hreflang ، media ، rel ، target و type زمانی می توانند مورد استفاده قرار بگیرند که صفت href به کار رفته باشد.
  2. بصورت پیش فرض صفحه مقصد در همان تبی باز می شود که صفحه مبدا در آن قرار دارد. برای تغییر این شرایط باید از صفت target استفاده کنیم.
  3. برای استایل دهی و تغییر ظاهری در لینک های ایجاد شده با تگ a می توانیم از زبان برنامه نویسی css استفاده کنیم.

مثال تگ a

۱- ایجاد یک تصویر با خاصیت لینک در صفحه

<a href="https://wikiteach.ir">
     <img src="images/picture.jpg">
</a>

۲- ایجاد یک تصویر با قابلیت ارسال ایمیل. با کلیک بر روی این لینک به صفحه ی ای برای ارسال ایمیل به آدرس مشخص شده می روید

<a href="mailto:amirtaheri353@yahoo.com">ارسال ایمیل</a>

۳- ایجاد یک لینک با قابلیت تماس تلفنی. این ویژگی برای تلفن های همراه کاربرد دارد

<a href="tel:+989336374706">تماس با من</a>