جلسه ششم: راهنمای کامل برای استفاده از تگ a در HTML

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

معرفی تگ a

تگ a در HTML، که از واژه ‘آنکر’ (Anchor) گرفته شده است، یک تگ است که با استفاده از آن می‌توانیم یک لینک را در یک صفحه وب ایجاد کنیم. این لینک می‌تواند کاربر را از یک نقطه به نقطه دیگر در همان صفحه یا از یک صفحه به صفحه دیگر در یک وب‌سایت یا در فضای اینترنت منتقل کند. همچنین می‌توان از این تگ برای ایجاد لینک‌هایی برای دانلود فایل‌ها، هدایت به عمل خاصی مانند ارسال ایمیل و یا تماس تلفنی نیز استفاده کرد.

ساختار تگ a

تگ a از یک تگ آغاز و یک تگ پایان تشکیل شده است و از چندین اتریبیوت پشتیبانی می‌کند که در ادامه هر یک را توضیح خواهیم داد.

<a href="www.avayweb.com"> کلیک </a>

با کلیک کردن روی نوشته کلیک کاربر به سایت مورد نظر هدایت می‌شود. در ادامه به توضیح اتریبیوت‌های تگ a خواهیم پرداخت.

اتریبیوت href

اتریبیوت href (Hypertext Reference) برای مشخص کردن آدرس مقصد لینک استفاده می‌شود. حالا این آدرس میتواند داخل همان صفحه باشد، صفحه دیگر در همان سایت باشد، برای هدایت کاربر به سایت دیگری باشد و یا برای ایجاد لینک دانلود برای فایلی باشد که در ادامه برای هر کدام مثالی خواهیم زد.

لینک به بخشی از همان صفحه (لینک به یک لنگر)

این لینک دهی برای پرش به تگ‌های خاص در یک صفحه HTML استفاده می‌شود. این لینک می‌تواند به هر عنصری که دارای ویژگی id است، اشاره کند. برای کسب اطلاعات بیشتر در مورد ویژگی‌های id، به مستندات مربوط به کلاس‌ها و idها مراجعه کنید.لنگرها اغلب برای پرش به زیربخشی از یک صفحه استفاده می‌شوند و همراه با تگ‌های هدر استفاده می‌شوند.

<a href="#test"> پرش به بخش تست </a>

با کلیک روی این لینک صفحه به تگی که id آن test هست منتقل می‌شود.

<h2 id="test"> بخش مربوط به تست </h2>

لینک به صفحات داخلی

این لینک دهی برای رفتن به صفحات دیگر سایت استفاده می‌شود برای مثال شما در نظر بگیرید که یک صفحه اصلی دارید با نام index.html و داخل آن لینکی ایجاد کرده‌اید برای رفتن به صفحه تماس با ما که با نام contact.html قبلا ساخته‌اید. این لینک به این صورت ایجاد می‌شود:

<a href="contact.html">تماس با ما </a>

با کلیک بر روی این لینک کاربر به صفحه تماس با ما هدایت می‌شود.

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

این لینک دهی برای هدایت کاربر به سایت مورد نظر استفاده می‌شود، تقریبا مشابه مثال بالا اما این بار آدرس کامل سایت مورد نظر را وارد میکنیم به مثال زیر دقت کنید:

<a href="https://google.com"> سایت گوگل </a>

با کلیک بر روی این لینک کاربر به سایت گوگل هدایت می‌شود حالا شما میتوانید به جای گوگل آدرس سایت مورد نظر خود را وارد کنید.

نکته:

شاید در بعضی سایت‌ها مشاهده کرده‌اید که بعد از رفتن به یک صفحه به یک بخش خاصی از صفحه منتقل شده‌اید یا به اصطلاح صفحه به اون بخش اسکرول کرده برای این کار کافیه که بعد از اضافه کردن لینک id اون بخش مورد نظر را هم به ادامه اون لینک اضافه کنید، به مثال زیر دقت کنید:

 <a href="contact.html#test">تماس با ما </a>
<a href="https://google.com#test"> سایت گوگل </a>

در هر دو مثال بالا بلافاصله بعد از لینک مرتبط، آی‌دی بخش مورد نظر هم اضافه شده که باعث می‌شود کاربر بعد از هدایت به صفحه مورد نظر به بخش مورد نظر که با ID مشخص شده هدایت شود.

لینکی که شماره تلفن را شماره‌گیری می‌کند

وقتی مقدار اتریبیوت href با عبارت :tel شروع می‌شود، این به این معنی است که وقتی بر روی لینک کلیک می‌کنید، دستگاه شما به طور خودکار شماره تلفن مورد نظر را شماره‌گیری می‌کند. این قابلیت بر روی دستگاه‌های تلفن همراه عملی است و همچنین بر روی رایانه‌ها و تبلت‌ها کار می‌کند که نرم‌افزارهایی مانند اسکایپ یا فیس‌تایم را دارند و می‌توانند تماس‌های تلفنی را انجام دهند. به مثال زیر دقت کنید:

<a href="tel:01010101"> تماس بگیرید </a>

با کلیک بر روی این لینک بیشتر دستگاه‌ها و برنامه‌ها به کاربر یک پیام نمایش می‌دهند تا از اطمینان او نسبت به شماره تلفنی که در حال تماس با آن است، اطمینان حاصل کنند و سپس اجازه برقراری تماس را بدهند.

لینک برای ارسال sms

وقتی مقدار اتریبیوت href با عبارت :sms شروع می‌شود، این به این معنی است که وقتی بر روی لینک کلیک می‌کنید، دستگاه شما آماده ارسال sms به شماره مورد نظر شماست. این قابلیت بر روی دستگاه‌هایی که امکان ارسال sms را دارند اجرا می‌شود.

<a href="sms:01010101"> ارسال اس‌ام‌اس  </a>

لینک برای ارسال ایمیل

اگر مقدار اتریبیوت href با عبارت :mailto شروع شود، وقتی کاربر بر روی لینک کلیک می‌کند، یک برنامه ایمیل پیشفرض در دستگاهش اجرا می‌شود و یک پنجره جدید باز می‌شود که به آن برای ارسال ایمیل می‌پردازد.

مثالی از استفاده از این لینک:

<a href="mailto:info@avaywerb.com"></a>

این روش به صورت جذابی امکان ارتباط مستقیم با کاربر را فراهم می‌کند، بدون نیاز به کپی کردن یا وارد کردن آدرس ایمیل. همچنین این روش می‌تواند به عنوان یک فرصت برای ارتباط نزدیک‌تر با مخاطبان خود، به خصوص در مواردی که بخواهید به آن‌ها اجازه دهید از سوالات خود بپرسند یا نظرات خود را ارسال کنند، به کار گرفته شود.

موضوع و متن پیام:

شما می‌توانید موضوع و متن پیام برای ایمیل جدید را نیز پر کنید:

<a href="mailto:info@avaywerb.com?subject=موضوع مورد نظر&body=پیام مورد نظر"></a>

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

اتریبیوت target

این اتریبیوت برای مشخص کردن محل باز شدن لینک استفاده می‌شود، و شامل چهار مقدار می‌شود

blank

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

<a href="https://avayweb.com" target="_blank"> سایت آوای وب </a>

self

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

<a href="https://avayweb.com" target="_self"> سایت آوای وب </a>

parent

وقتی این مقدار استفاده می‌شود، صفحه جدید در پنجره والد (پنجره‌ای که لینک از آن باز شده است) باز می‌شود. این زمانی مفید است که صفحات در فریم‌ها (frames) استفاده می‌شوند.

<a href="https://avayweb.com" target="_parent"> سایت آوای وب </a>

top

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

<a href="https://avayweb.com" target="_top"> سایت آوای وب </a>

اتریبیوت hreflang

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

مثال:

<a href="https://www.example.com/page" hreflang="en"> انگلیسی </a>

اتریبیوت download

اتریبیوت download به مرورگر و موتورهای جستجو اطلاع می‌دهد که لینک مورد نظر به یک فایل قابل دانلود اشاره دارد. این اتریبیوت معمولاً برای لینک‌هایی استفاده می‌شود که به فایل‌هایی مانند فایل‌های صوتی، تصویری، ویدئویی یا اسناد قابل دانلود اشاره دارند.

مثال

<a href="https://example.com/images/image.gif" download> دانلود عکس </a>

اتریبیوت rel

اتریبیوت rel در تگ a برای تعیین رابطه لینک با صفحه مقصد استفاده می‌شود. در زیر تمام مقادیر معمول این اتریبیوت به همراه مثال‌هایی آورده شده است:

nofollow

این مقدار به موتورهای جستجو می‌گوید که این لینک را دنبال نکنند و آن را نادیده بگیرند. این معمولاً برای لینک‌هایی استفاده می‌شود که به صفحات خارجی اشاره می‌کنند و می‌خواهید جریان رنکینگ (Ranking) از صفحه فعلی به صفحات دیگر منتقل نشود و یا گاهی ممکن است شما بخواهید به یک منبع پیوند دهید اما از قابل اعتماد بودن آن مطمعن نیستید.

<a href="https://youtube.com" rel="nofollow"> یوتیوب </a>

noopener

این مقدار به مرورگر می‌گوید که صفحه جدیدی که از طریق این لینک باز می‌شود، ارجاعی به صفحه اصلی نداشته باشد. این می‌تواند جلوی حملات جاوااسکریپت را که توسط صفحات هدف (Target) ایجاد شده‌اند، بگیرد.

<a href="https://example.com" rel="noopener"> سایت مثال </a>

وقتی یک موتور جستجو لینکی را می‌بیند و وارد آن می‌شود، معمولاً از محیطی که این لینک را باز کرده است، خارج می‌شود. این عمل به عنوان “خروج” (opener) شناخته می‌شود.

استفاده از ویژگی “noopener” در لینک‌ها واگذاری از این رفتار است. با اضافه کردن این ویژگی به لینک، می‌توانید به موتورهای جستجو بگویید که از محیط اصلی (محیطی که لینک را باز کرده است) خارج نشوند، به عبارت دیگر، ارتباط خروجی را باز نکنند. این امکان به موتورهای جستجو کمک می‌کند تا فرآیند ایندکس کردن را به صورت بهینه‌تر و بدون مشکلاتی انجام دهند.

بنابراین، استفاده از “noopener” در لینک‌ها می‌تواند مفید باشد تا از احتمال ایجاد مشکلات در فرآیند ایندکس کردن توسط موتورهای جستجو پیشگیری شود.

noreferrer

این مقدار سایت‌های دیگر را از دانستن پیوندهایی که در سایت به مطالب آن‌ها داده‌اید باز می‌دارد به عبارتی اطلاعات از صفحه فعلی به صفحه جدید ارسال نمی‌شود.

<a href="https://example.com" rel="noreferrer"> سایت مثال </a>

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

external

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

<a href="https://example.com" rel="external"> سایت مثال </a>

author

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

<a href="https://shahramnajafi.com" rel="author"> شهرام نجفی </a>

این اطلاعات ممکن است برای بهبود سئو (SEO) و تعیین اعتبار نویسنده محتوا مفید باشد، به ویژه در مواردی که محتوای یک صفحه به نویسنده یا ارائه دهنده خاصی مرتبط باشد، مانند وبلاگ‌ها یا سایت‌های خبری.

alternate

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

استفاده از مقدار “alternate” به موتورهای جستجو اطلاع می‌دهد که لینک به یک نسخه دیگر با زبانی دیگر یا جایگزین از صفحه اصلی موجود است.

در زیر یک مثال از استفاده از مقدار “alternate” در اتریبیوت rel آمده است:

<a href="https://example.com/alternate-version" rel="alternate"> سایت مثال </a>

این لینک نشان می‌دهد که یک نسخه جایگزین یا نسخه دیگری از صفحه فعلی موجود است. این اطلاعات به موتورهای جستجو کمک می‌کند تا نسخه‌های جایگزین یا مخصوص را شناسایی کرده و در نتایج جستجو نمایش دهند، به منظور ارائه بهترین تجربه کاربری به کاربران.

bookmark

مقدار “bookmark” در اتریبیوت rel از تگ a برای نشان دادن اینکه لینک به یک نشان‌گذاری یا علامت‌گذاری (بوکمارک) ارتباط دارد استفاده می‌شود. این معمولاً برای ارتباط لینک با یک بخش خاص یا مکان معین در یک صفحه وب استفاده می‌شود، به منظور ایجاد یک نشان‌گذاری برای کاربران که می‌خواهند به سرعت به آن بخش از صفحه دسترسی پیدا کنند.

استفاده از مقدار “bookmark” در اتریبیوت rel به مرورگر و موتورهای جستجو اطلاع می‌دهد که لینک به یک نشان‌گذاری یا علامت‌گذاری اشاره دارد.

در زیر یک مثال از استفاده از مقدار “bookmark” در اتریبیوت rel آمده است:

<a href="#test" rel="bookmark"> رفتن به بخش مورد نظر </a>

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

help

مقدار “help” در اتریبیوت rel از تگ a برای نشان دادن اینکه لینک به یک منبع یا صفحه کمک مرتبط استفاده می‌شود. این مقدار معمولاً برای ارتباط لینک با یک صفحه کمک، منبع راهنما یا منبع اطلاعاتی که به کاربران کمک می‌کند تا درک بهتری از محتوا یا سرویس فراهم شده داشته باشند، استفاده می‌شود.

<a href="https://support.example.com/" rel="help">پشتیبانی و راهنما</a>

استفاده از مقدار “help” در اتریبیوت rel به موتورهای جستجو و مرورگرها اطلاع می‌دهد که لینک به یک منبع یا صفحه کمک مرتبط است.

license

search

rel=search به موتورهای جستجو می‌گوید که صفحه مقصد لینک مربوطه به یک صفحه جستجوی مرتبط است. این اتریبیوت معمولاً برای لینک‌هایی استفاده می‌شود که به صفحه‌های جستجو یا نتایج جستجو اشاره دارند.

<a href="https://www.example.com/search.html" rel="search"> جستجو </a>

next

rel=next به مرورگر و موتورهای جستجو اطلاع می‌دهد که صفحه‌ی مقصد لینک، صفحه‌ی بعدی یک سری صفحات مرتبط است. این اتریبیوت معمولاً در لینک‌هایی استفاده می‌شود که به صفحات مختلف یک مجموعه اطلاعاتی اشاره دارند، مانند نتایج جستجو یا صفحات فهرست.

<a href="https://www.example.com/page2" rel="next"> صفحه بعد </a>

prev

rel=prev به مرورگر و موتورهای جستجو اطلاع می‌دهد که صفحه‌ی مقصد لینک، صفحه‌ی قبلی یک سری صفحات مرتبط است. این اتریبیوت معمولاً در لینک‌هایی استفاده می‌شود که به صفحات مختلف یک مجموعه اطلاعاتی اشاره دارند، مانند نتایج جستجو یا صفحات فهرست.

<a href="https://www.example.com/page1" rel="prev"> صفحه قبل</a>

tag

rel=tag به موتورهای جستجو و برنامه‌های خواننده RSS اطلاع می‌دهد که لینک مورد نظر به برچسب‌های مرتبط با محتوای صفحه اشاره دارد. این اتریبیوت معمولاً در لینک‌هایی استفاده می‌شود که به صفحات یا پست‌هایی با برچسب خاص اشاره دارند.

<a href="https://www.example.com/tags/technology" rel="tag"> تکنولوژی </a>

در این مثال، لینک به صفحه‌ای اشاره دارد که تمام محتواهای مرتبط با برچسب “تکنولوژی” در وبسایت “example.com” نمایش داده می‌شود. با استفاده از اتریبیوت rel=tag، به موتورهای جستجو اطلاع داده می‌شود که این لینک به برچسب مرتبط با محتوای صفحه است.

sponsored

rel=sponsored به موتورهای جستجو اطلاع می‌دهد که لینک مورد نظر توسط یک تبلیغ‌دهنده یا اسپانسر پرداخت شده است. این اتریبیوت معمولاً برای لینک‌هایی استفاده می‌شود که به محتوای تبلیغاتی اشاره دارند.

مثال:

<a href="https://www.example.com/advertise" rel="sponsored"> تبلیغ </a>

UGC

rel=UGC یا (User Generated Content) به موتورهای جستجو اطلاع می‌دهد که محتوای لینک مرتبط با محتوای تولیدی کاربر است. این اتریبیوت معمولاً برای لینک‌هایی استفاده می‌شود که به محتوایی اشاره دارند که توسط کاربران و نه صاحب وب‌سایت ایجاد شده است، مانند نظرات، پست‌ها در انجمن‌ها، و یا مطالب کاربری دیگر.

مثال

<a href="https://example.com/user-post" rel="UGC"> پست ارسالی کاربر </a>

شهرام نجفی

همیشه آرزو داشتم که هنگام جستجوی اطلاعات، به سراغ یک منبع جامع و به روز برم، اما اینکه چنین منابعی را بیابم همیشه چالش بوده است. برای همین ایده راه اندازی سایت آوای وب به ذهنم رسید و الان در خدمت شما هستم.