تگ های HTML
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 هم در شرایط مختلف ممکن است مورد استفاده قرار گیرند. سایر صفات کاربرد بسیار محدودی دارند و به ندرت در پروژه ها استفاده می شوند.
- صفت rel : این صفت برای بیان مدل ارتبط بین صفحه ی مبدا و مقصد به کار می رود. با استفاده از این صفت لینک ایجاد شده به لحاظ ظاهری و حتی کارایی تغییری نخواهد کرد. در واقع برای اعلام وضعیت لینک به خزنده های موتور جستجو صفت rel به کار می رود. مهم ترین مقداری که برای این صفت قرار می دهیم، nofollow است و زمانی به کار می رود که مقصد لینک مورد نظر خارج از دامنه باشد. nofollow به این معنی است که این لینک برای استفاده ی کاربران قرار داده شده و جنبه تبلیغاتی و رپورتاژ ندارد. در مبحث سئو به طور مفصل بیان شده که استفاده از مقدار nofollow در لینک های خارجی یک سایت باعث بهبود وضعیت سئوی سایت خواهد شد.
- صفت target : صفحاتی که به آنها لینک دادیم می توانند در شرایط مختلفی باز شوند. برای مثال در همان تب از مرورگر باز شوند، در یک تب جدید باز شوند و یا یک پنجره جدید از مرورگر باز شده و لینک مقصد نمایش داده شود. برای تعیین این شرایط از صفت target استفاده می شود.
آیا تگ a صفات عمومی (Global Attributes) را پشتیبانی می کند؟
بله . می توانید برای تگ a از صفات عمومی در Html استفاده کنید.
آیا تگ a صفات مربوط به رویداد ها(Event Attributes) را پشتیبانی می کند؟
بله . می توانید برای تگ a از برخی از صفات مربوط به رویداد ها در Html استفاده کنید.
نکات مهم مربوط به این تگ
- صفات download ، hreflang ، media ، rel ، target و type زمانی می توانند مورد استفاده قرار بگیرند که صفت href به کار رفته باشد.
- بصورت پیش فرض صفحه مقصد در همان تبی باز می شود که صفحه مبدا در آن قرار دارد. برای تغییر این شرایط باید از صفت target استفاده کنیم.
- برای استایل دهی و تغییر ظاهری در لینک های ایجاد شده با تگ 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> اینستاگرام
ایمیل
