تگ a چیست و چه کاربردی در HTML دارد؟ برای استفاده از تگ a در سایت چه نکاتی را باید بدانیم؟ انواع لینک دهی توسط تگ a چگونه انجام میشود؟ چگونه برای زیبایی دکمه ها CSS و استایل به تگ a اضافه کنیم؟
زمان تقریبی مطالعه این آموزش : 15 دقیقه
سرفصل های آموزش تگ a
آنچه در این آموزش خواهید خواند
1- معرفی و شناخت تگ a
در این مقاله آمورشی قصد داریم تا به زبانی ساده و مثال های کاربردی شما را با تگ a و نحوه استفاده های گوناگون آن آشنا کنیم.
در HTML برای لینک کردن مطالب ، صفحات ، محصولات و … از تگ a استفاده می شود که این موضوع سبب شده این تگ یکی از پرکاربردترین ها بوده و از نظر ظاهری و سئویی از اهمیت زیادی برای سایت ما برخوردار می باشد.
با یادگیری استفاده صحیح و مناسب از تگ لینک a کاربران سایت خود را راحت تر هدایت خواهیم کرد و قدرت و رنک سایت خودمان را افزایش خواهیم داد.
نحوه نوشتن و استفاده از تگ a به صورت <a>…</a> می باشد که جای مطالب یا عکس های مورد نظر قرار می گیرند.
دقت داشته باشید که متنی که به عنوان متن تگ a انتخاب می کنید باید به گونه ای باشد که کاربر قبل از کلیک متوجه شود که بعد از کلیک روی تگ a یا همان دکمه ی ما چه صفحه یا محتوایی قرار است برایش نمایش داده شود.
مثال :
<a> آموزش سئوی سایت </a><a>خواندن ادامه مطلب</a>
برای لینک کردن تگ a از خاصیتی با نام اِچ رِف href استفاده می کنیم.خاصیت href مشخص می کند که بعد از اینکه کاربر کلیک کرد چه صفحه باز شود.
البته این نکته را بدانید که href تنها برای باز کردن صفحات استفاده نمی شود و می توان از آن برای اسکرول به قسمتی خاص از صفحه ، تماس تلفنی ، ایمیل و … استفاده کرد که جلوتر آنها را توضیح خواهیم داد.
نحوه استفاده از صفت href در تگ a به صورت زیر می باشد.
<a href="#">…</a>
به جای کارکتر # باید لینک یا اکشن مورد نظر خود را قرار دهید و دقت کنید که لینک باید بین کتیشن “your-link” قرار بگیرد.
برای اطلاع بیشتر از انواع لینک ، مقاله معرفی لینک ها را مطالعه کنید.
مثال :
<a href="https://google.com">مشاهده سایت گوگل</a>
در مثال بالا با تگ a یک لینک ساختیم که دارای متن ( مشاهده سایت گوگل ) بوده و در صورت کلیک روی آن لینک داخل href که لینک سایت گوگل (google.com ) است را باز خواهد کرد.
نحوه بازکردن صفحه جدید در مرورگر و انواع آن در ادامه همین آموزش معرفی می شود.
2- نحوه ایجاد لینک در HTML
برای لینک کردن تگ a از خاصیتی با نام اِچ رِف href استفاده می کنیم.خاصیت href مشخص می کند که بعد از اینکه کاربر کلیک کرد چه صفحه باز شود.
البته این نکته را بدانید که href تنها برای باز کردن صفحات استفاده نمی شود و می توان از آن برای اسکرول به قسمتی خاص از صفحه ، تماس تلفنی ، ایمیل و … استفاده کرد که جلوتر آنها را توضیح خواهیم داد.
نحوه استفاده از صفت href در تگ a به صورت زیر می باشد.
<a href="#">…</a>
به جای کارکتر # باید لینک یا اکشن مورد نظر خود را قرار دهید و دقت کنید که لینک باید بین کتیشن “your-link” قرار بگیرد.
برای اطلاع بیشتر از انواع لینک ، مقاله معرفی لینک ها را مطالعه کنید.
مثال :
<a href="https://google.com">مشاهده سایت گوگل</a>
در مثال بالا با تگ a یک لینک ساختیم که دارای متن ( مشاهده سایت گوگل ) بوده و در صورت کلیک روی آن لینک داخل href که لینک سایت گوگل (google.com ) است را باز خواهد کرد.
توجه داشته باشید که برای باز کردن لینک های خارجی حتما از https:// در ابتدای لینک استفاده کنید در غیر این صورت به عنوان لینک داخلی تلقی می شود و احتمالا ارور 404 رخ خواهد داد.
برای اطلاع بیشتر در مورد لینک های داخلی و خارجی مقاله معرفی انواع لینک ها را مطالعه کنید.
نحوه بازکردن صفحه جدید در مرورگر و انواع آن در ادامه همین آموزش معرفی می شود.
3- معرفی انواع لینک و کاربرد آن ها
انواع مختلفی از لینک ها و اکشن ها را می توان به کمک تگ a پیاده سازی کرد که در این قسمت به معرفی آن ها می پردازیم.
لینک آدرس اینترنتی
از این نوع لینک برای باز کردن آدرس اینترنتی یک صفحه وب استفاده می شود
مثال لینک خارجی :
<a href="https://ariatech.online/">طراحی سایت آریاتک</a>
مثال لینک داخلی :
<a href="/shop">مشاهده فروشگاه</a>
لینک تماس تلفنی
از این نوع لینک برای تماس مستقیم کاربر با شماره تلفن یا موبایل استفاده می شود.
دقت داشته باشید که برای ساخت لینک تلفنی با تگ a حتما از عبارت :tel قبل از نوشتن شماره تلفن در تگ href استفاده کنید
مثال لینک تماس تلفنی :
<a href="tel:+989121234567">مشاوره تلفنی</a>
<a href="tel:09121234567">رزرو فوری</a>
<a href="tel:02188776655">تماس بگیرید</a>
لینک به شبکه های اجتماعی
مثال لینک به واتس آپ :
<a href="https://wa.me/Number">پیام واتس آپ</a>
به جای number شماره موبایل شما قرار می گیرد
مثال لینک به تلگرام :
<a href="hhttps://t.me/ID">ارتباط تلگرامی</a>
مثال لینک به اینستاگرام :
<a href="https://www.instagram.com/ID/">مشاهده اینستاگرام من</a>
به جای ID نام کاربری شبکه اجتماعی شما قرار می گیرد.
لینک به قسمتی از صفحه
استفاده از تگ a برای هدایت کاربران به قسمتی از صفحه همراه با اسکرول و جابجایی صفحه.
برای توضیح بیشتر اگر قسمت سرفصل های آموزش تگ a در ابتدای همین مقاله را مشاهده کنید و روی هر یک از سرفصل ها کلیک کنید،خواهید دید که صفحه به قسمت مورد نظر منتقل می شود.
برای استفاده از این ویژگی باید ابتدا برای قسمت مشخص شده یک آیدی ID در نظر گرفت سپس id آن قسمت را به عنوان لینک به تگ a میدهیم.
مثال لینک اسکرولی :
<a href="#target-id">مشاهده فرم عضویت</a>
دقت کنید که به جای #target-id باید id قسمتی که قرار است اسکرول شود قرار بگیرد همچنین در href همیشه id با پیشوند شارپ # استفاده می شود.
لینک ارسال ایمیل
برای ارسال ایمیل از طریق تگ a باید در قسمت href از عبارت :mailto قبل از آدرس ایمیل خود استفاده کنید.
مثال لینک ارسال ایمیل :
<a href="mailto:">ارسال ایمیل</a>
4- نحوه بازشدن لینک در مرورگر
یکی دیگر از ویژگی های تگ a خاصیت target است.از طریق این صفت مشخص می شود که لینک مورد نظر بعد از کلیک کاربر در همان جایگزین مطالب صفحه فعلی باز شود ، در تب جدید باز شود یا در مرورگر دیگری باز شود.
بسیاری از مدیران سایت علاقه دارند تا برخی از لینک ها در صفحه ای جدید باز شود تا زمان حضور کاربر در صفحات افزایش پیدا کرده و احتمال بازگشت کاربر به صفحه قبلی بالاتر خواهد شد.
پیشنهاد میشه که لینک های شبکه های اجتماعی در صفحه ای جداگانه باز شوند.
در حالت پیش فرض تمامی لینک ها روی همان صفحه ای که قرار دارند لینک مورد نظر را باز خواهد کرد. اگر در خاصیت target از مقدار _blank استفاده کنید لینک شما در تب جدید باز خواهد شد.
نحوه استفاده از صفت target در تگ a به صورت زیر می باشد.
<a href="#" target="_blank">…</a>
رعایت دابل کوتیشن ” ” برای target هم ضروری است.
5- استفاده از عکس و ویدیو در لینک
در بسیاری از قسمت های سایت لازم است از یک عکس یا ویدیو به عنوان لینک قابل کلیک استفاده شود. در بیشتر سایت های آگهی و تبلیغاتی این مورد به وضوح قابل مشاهده است.
همچنین بسیاری از افکت های طراحی سایت آمیخته شده از عکس های مختلف که به جای متن قابل لینک می باشند.
برای استفاده از عکس از تگ a کافیست به جای محتوای متنی لینک از تگ img استفاده کنید.
نحوه استفاده از تگ img در تگ a به صورت زیر می باشد.
<a href="#"> <img src="image-link"> </a>
در قسمت image-link آدرس تصویر مورد نظر قرار می گیرد.
درباره تگ img یبشتر بدانید
برای استفاده از ویدیو درون تگ a باید از تگ video استفاده کنیم.
نحوه استفاده از تگ img در تگ a به صورت زیر می باشد.
<a href="#"> <video><source src="video-link"></video> </a>
در قسمت video-link آدرس ویدیو مورد نظر قرار می گیرد.
درباره تگ video یبشتر بدانید
6- معرفی صفات و ویژگی های تگ a
از پرکاربردترین اتریبیوت ها یا همان صفات تگ a که قبلا هم با آن آشنا شدیم صفت href است.
صفات تگ a از جدول زیر قابل مشاهده است.
| صفت | مقدار مجاز | توضیحات |
|---|---|---|
| download | filename | برای فایل های دانلودی و معرفی بهتر به گوگل استفاده می شود |
| href | URL | برای لینک دادن به تگ استفاده می شود |
| hreflang | language_code | زبان مطالب لینک شده به تگ را مشخص می کند |
| media | media_query | برای مشخص کردن رسانه یا دشتگاه لینک شده استفاده می شود |
| ping | list_of_URLs | برای مشخص سازی لینک ها و عملیات ترکینگ استفاده می شود |
| referrerpolicy | no-referrer no-referrer-when-downgrade origin origin-when-cross-origin unsafe-url | مشخص سازی نوع ارجاع دهنده |
| rel | alternate author bookmark external help license next nofollow noreferrer noopener prev search tag | مشخص سازی نحوه ارتباط لینک با صفحه مورد نظر |
| target | _blank _parent _self _top | مشخص سازی مکان باز شدن لینک جدید |
| type | media_type | مشخص سازی نوع رسانه صفحه لینک شده |
برای مشالعه بیشتر تگ a و مشاهده مثال های بیشتر به سایت w3schools مراجعه کنید.
7- نکات مهم کار با تگ a
در قسمت پایانی آموزش نکاتی که برای کار با تگ a حائز اهمیت هستند و بر اساس تجربه و مطالعه فراوان بدست آمده به شما خواهم گفت.
حتما در استفاده از لینک هایی تگ a صفت Alt و Title را با عبارت کلمه کلیدی لینک پر کنید زیرا در سئو و فهم ربات های گوگل تاثیر بسزایی دارد. تاثیر لینک در سئو را مطالعه کنید.
برای استفاده از عکس در تگ لینک a استفاده از تگ <img> گفته شد ، علاوه بر آن با دادن css به تگ a می توان عکس مورد نظر را به عنوان دکمه نمایش داد. آموزش افزودن تصویر با css
برای بهینه شدن و کم حجم شدن کدهای HTML سایت می توان لینک های داخلی سایت را به صورت کوتاه وارد نمود که این کار باعث افزایش سرعت سایت و سئو بهتر صفحه شما می شود.
دقت کنید که از این روش فقط می توانید در سایت خود استفاده کنید .
لینک داخلی و خارجی چیست؟
مثال :
لینک بلند ( قابل استفاده عمومی )
https://ariatech.online/html-learning
لینک کوتاه (قابل استفاده فقط در سایت مرجع)
/html-learning
برای سئو بهتر صفحه سعی کنید کلمه کلیدی حداقل یک بار در تگ لینک استفاده شود.
تگ لینک را می توان همراه با هدینگ های h1 تا h6 هم استفاده نمود که به صورت تودرتو نوشته خواهند شد.
این اموزش اینجا به پایان نمیرسه و مطالب جدیدی راجع به تگ a به این مقاله اضافه خواهد شد.
حتما سوالات خود را در بخش کامنت از ما بپرسید
سایر آموزش های HTML
