تگ a در HTML

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

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

لینک ها همواره از مسائل مهم در حوزه سئو بوده و در مورد بک لینک سایت خود هوشمندانه عمل کنید تا توسط موتورهای جستجوگر جریمه نشوید!

تگ a چیست؟

تگ a که اشاره به کلمه Anchor دارد برای نمایش لینک در صفحه HTML به کار می رود.

این تگ با <a> شروع شده و با </a> پایان می یابد.

<a href="https://codeuni.ir">Text</a>

فرض کنید متنی نوشته اید و قصد دارید بین محتوا، لینکی را با عنوان «آموزش» به کاربران معرفی کنید.

کد:

<a href="https://codeuni.ir/html">آموزش</a>

اجرا

همان طور که در کد بالا مشاهده می کنید تگ لینک با <a> شروع و با </a> بسته شده و هر چه میان این دو باشد متن لینک است. برای افزودن آدرس لینک مورد نظر از صفت href استفاده می کنیم.

صفات تگ a

در این بخش با صفات تگ a آشنا خواهید شد.

صفت download

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

مقدار این صفت نام فایل را مشخص می کند.

کد:

<a href="file.jpg" download="file">دانلود</a>

مقدار صفت download اختیاری است و در صورت تغییر نام فایل می توانید مقدار را به دلخواه خود تغییر دهید.

صفت href

لینک مورد نظر را باید درون این صفت قرار داد.

<a href="https://codeuni.ir">لینک</a>

ایمیل

در صورتی که قصد دارید آدرس ایمیل را لینک کنید باید از mailto استفاده کنید.

<a href="mailto:example@example.com">ایمیل</a>

شماره تلفن

در صورتی که قصد دارید شماره تلفن را لینک کنید باید از tel استفاده کنید.

<a href="tel:+0123456789">شماره تلفن</a>

جابه جایی درون صفحه

در صورتی که قصد دارید به عنصر درون صفحه با شناسه یکتا بروید باید از # و سپس نام صفت id آن تگ استفاده کنید.

<a href="#click">کلیک</a>

<div id="click"></div>

صفت hreflang

زبان مقصد لینک را باید درون این تگ قرار داد. اگر زبان مقصد فارسی است مقدار آن را "fa" و یا اگر انگلیسی است مقدار آن را "en" می گذاریم.

کد:

<a href="https://codeuni.ir" hreflang="fa">لینک</a>

صفت media

لینک را برای دستگاه یا رسانه بهینه سازی می کند.

<a media="Value">لینک</a>

صفت ping

فهرستی از لینک ها را مشخص می کند که در صورت دنبال کردن توسط کاربر به آن ها اطلاع داده خواهد شد.

<a ping="URL">لینک</a>

صفت referrerpolicy

مشخص می کند کدام اطلاعات ارجاع دهنده همراه با لینک ارسال شود.

<a referrerpolicy="no-referrer-when-downgrade|no-referrer|same-origin|strict-origin-when-cross-origin|origin|origin-when-cross-origin|unsafe-url">لینک</a>

no-referrer-when-downgrade

اطلاعات ارجاع دهنده را زمانی که مبدا HTTPS و مقصد HTTP است ارسال نخواهد کرد. اگر مبدا HTTP باشد ارسال اطلاعات انجام خواهد شد. (پیش فرض)

no-referrer

هیچ اطلاعاتی ارسال نمی شود.

same-origin

در صورتی که منبع یکسان باشد درخواست انجام می شود.

strict-origin-when-cross-origin

فقط برای درخواست هایی با منبع یکسان ارسال خواهد شد. اما در صورتی که مبدا HTTPS و مقصد HTTP باشد هیچ اطلاعاتی ارسال نمی شود.

origin

مبدا اصلی را ارسال می کند.

origin-when-cross-origin

فقط برای درخواست هایی با منبع یکسان ارسال خواهد شد. اما در صورتی که درخواست متقابل باشند مبدا اصلی را ارسال خواهد کرد.

unsafe-url

اطلاعات به صورت کامل ارسال خواهد شد.

صفت rel

رابطه صفحه جاری و صفحه مقصد را مشخص می کند.

<a rel="alternate|author|bookmark|external|help|license|next|nofollow|noopener|noreferrer|prefetch|prev|search|tag">لینک</a>

alternate

لینکی را به عنوان نمایش جایگزین معرفی می کند.

author

لینک نویسنده مقاله را معرفی می کند.

bookmark

برای نشانه گذاری لینک به کار می رود.

external

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

help

لینک راهنما را معرفی می کند.

license

لینک لایسنس مربوط به سند فعلی را ارائه می کند.

next

لینک بعدی مربوط به مجموعه سند را معرفی می کند.

nofollow

این مورد در سئو کاربرد زیادی دارد. به عنوان مثال می توانید لینک های خروجی سایت را nofollow کنید که اگر لینک مقصد مشکلی از نظر سئو داشت به سئو سایت شما لطمه ای وارد نشود تا باعث کاهش ورودی سایت از طریق موتور های جستجوگر شود.

کد:

<a href="http://" rel="nofollow">لینک</a>

این مورد برای لینک های خارجی کاربرد دارد.

منظور از لینک خارجی، آدرس سایت یا صفحه ای به غیر از سایت شما است.

noopener

از دسترسی به شی window در جاوا اسکریپت جلوگیری می کند.

noreferrer

ارجاع دهنده را ناشناخته می کند.

prefetch

برای پیش بارگذاری صفحات استفاده می شود.

prev

لینک قبلی مربوط به مجموعه سند را معرفی می کند.

search

لینکی مربوط به جستجو برای سند را معرفی می کند.

tag

لینک تگ یا برچسب برای سند فعلی را معرفی می کند.

صفت target

این صفت نحوه باز شدن لینک در مرورگر را مشخص می کند.

<a target="_blank|_self|_parent|_top|frame">لینک</a>

_blank: لینک در پنجره یا تب جدید باز خواهد شد.

_self: لینک در همان پنجره باز خواهد شد. (پیش فرض)

_parent: لینک در فریم والد باز خواهد شد.

_top: لینک در تمام بدنه باز خواهد شد.

frame: لینک در فریم نام گذاری شده باز خواهد شد.

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

کد:

<a href="https://codeuni.ir/html" target="_blank">آموزش</a>

مقدار صفت target روی _blank تنظیم شود.

در صورتی که کد بالا در بعضی از مرورگرها کار نکرد با استفاده از صفت rel می توان این مشکل را حل کرد.

کد:

<a href="https://" target="_blank" rel="noopener noreferrer">آموزش</a>

صفت type

نوع رسانه را مشخص می کند.

به عنوان مثال لینک زیر آدرس عکس با فرمت webp است. نوع فایل به صورت زیر است:

<a href="image.webp" type="image/webp">لینک</a>

سازگاری با مرورگرها

تگ a با مرورگرهای زیر سازگار است:

• گوگل کروم
• فایرفاکس
• اج
• اپرا
• سافاری
• گوگل کروم اندروید
• فایرفاکس اندروید
• اپرا اندروید
• سافاری iOS