قسمت ۷ – لینک‌سازی با تگ a در HTML

تگ a در html (Anchor) المانی است که با اتریبیوت href یک لینک می‌سازد و کاربر را به صفحه‌ای دیگر، بخشی از همان صفحه، یک فایل، آدرس ایمیل یا شماره تلفن می‌برد. لینک‌ها همان چیزی هستند که صفحه‌های جدا را به «وب» تبدیل می‌کنند.

نویسنده: تیم siloow (سیلو سولوشن) — آخرین به‌روزرسانی: آبان ۱۴۰۵

در این قسمت لینک دادن در html را از ساده‌ترین حالت تا اتریبیوت‌های مهم target، rel (noopener، nofollow، sponsored و ugc) و download یاد می‌گیرید، لینک ایمیل و تلفن می‌سازید و می‌بینید متن لینک خوب برای سئو و دسترس‌پذیری چه ویژگی‌هایی دارد. قسمت قبل، قسمت ۶: تگ‌های متنی و قالب‌بندی متن در HTML بود که مفهوم المان‌های اینلاین را در آن دیدید؛ تگ a هم یک المان اینلاین است.

تگ a در html چیست و چطور یک لینک ساده بسازیم؟

تگ a در html با اتریبیوت href یک لینک می‌سازد؛ متنی که بین تگ باز و بسته قرار می‌گیرد «متن لینک» (Anchor Text) است و مقدار href مقصد لینک را مشخص می‌کند. بدون href، تگ a فقط یک جای‌نگهدار است و لینک واقعی نیست.

<p>
  برای شروع دوره، صفحه
  <a href="https://siloow.com/codepress/">کدپرس</a>
  را ببینید.
</p>

مقدار href می‌تواند یک آدرس کامل (مطلق) مثل https://siloow.com/codepress/ یا یک مسیر نسبی مثل about.html باشد. تفاوت این دو نوع آدرس و لینک به بخش‌های همان صفحه را در قسمت بعد مفصل بررسی می‌کنیم. فعلاً همین کافی است که بدانید برای لینک به سایت‌های دیگر همیشه آدرس کامل همراه با https:// بنویسید؛ وگرنه مرورگر آن را مسیری داخل سایت خودتان فرض می‌کند.

اتریبیوت‌های مهم تگ a کدام‌اند؟

مهم‌ترین اتریبیوت‌های تگ a عبارت‌اند از href برای مقصد، target برای محل باز شدن، rel برای رابطه با صفحه مقصد، download برای دانلود فایل و hreflang برای مشخص کردن زبان صفحه مقصد. جدول زیر مرجع سریع این اتریبیوت‌هاست:

اتریبیوت	کار	مقدارهای رایج	نکته
href	مقصد لینک	URL، #id، mailto:، tel:	بدون آن، a لینک نیست
target	محل باز شدن لینک	_self (پیش‌فرض)، _blank	_blank را فقط وقتی لازم است به کار ببرید
rel	رابطه صفحه فعلی با مقصد	noopener، noreferrer، nofollow، sponsored، ugc	چند مقدار با فاصله جدا می‌شوند
download	دانلود به‌جای باز کردن	خالی یا نام فایل پیشنهادی	فقط برای فایل‌های هم‌دامنه (same-origin)
hreflang	زبان صفحه مقصد	en، fa	فقط یک راهنماست و کارکرد خودکار ندارد
referrerpolicy	کنترل ارسال Referer	no-referrer، strict-origin-when-cross-origin	پیش‌فرض: strict-origin-when-cross-origin
title	توضیح تکمیلی	متن	جایگزین متن لینک خوب نیست

target _blank چیست و کی باید از آن استفاده کرد؟

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

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

<!-- لینک خارجی در تب جدید -->
<a href="https://developer.mozilla.org/fa/"
   target="_blank" rel="noopener">
  مستندات MDN
  <span class="visually-hidden">(در تب جدید باز می‌شود)</span>
</a>

آیا هنوز rel noopener لازم است؟

در گذشته لینک با target _blank به صفحه مقصد اجازه می‌داد از طریق window.opener صفحه شما را تغییر دهد (حمله‌ای به نام Tabnabbing). طبق مستندات MDN درباره تگ a، مرورگرهای جدید برای target _blank به‌طور ضمنی همان رفتار rel="noopener" را اعمال می‌کنند. با این حال اضافه کردن صریح rel="noopener" هزینه‌ای ندارد و برای مرورگرهای قدیمی‌تر مفید است.

نکته: noreferrer علاوه بر رفتار noopener، اطلاعات صفحه مبدأ (Referer) را هم برای سایت مقصد نمی‌فرستد. اگر برای سایت مقصد مهم است بداند بازدیدکننده از سایت شما آمده (مثلاً در گزارش‌های آماری)، فقط noopener بگذارید.

rel nofollow، sponsored و ugc چه تفاوتی دارند؟

rel nofollow، sponsored و ugc به موتور جستجو می‌گویند رابطه شما با صفحه مقصد چیست: sponsored برای لینک‌های تبلیغاتی و پولی، ugc برای لینک‌هایی که کاربران در دیدگاه یا انجمن گذاشته‌اند و nofollow برای حالت کلی که نمی‌خواهید به صفحه مقصد اعتبار بدهید. می‌توانید چند مقدار را با هم بنویسید.

<!-- لینک تبلیغاتی یا پولی -->
<a href="https://example.com/product" rel="sponsored">محصول اسپانسر</a>

<!-- لینکی که کاربر در دیدگاه گذاشته -->
<a href="https://example.com/blog" rel="ugc nofollow">وبلاگ کاربر</a>

<!-- لینکی که نمی‌خواهید به آن اعتبار بدهید -->
<a href="https://example.com/" rel="nofollow">یک سایت نامعتبر</a>

طبق راهنمای Google Search Central درباره مشخص کردن لینک‌های خروجی، لینک‌های تبلیغاتی و پولی باید sponsored یا nofollow داشته باشند. مشخص نکردن لینک‌های پولی می‌تواند از نظر گوگل نقض سیاست‌های اسپم باشد. اگر می‌خواهید بدانید لینک‌ها کجای نقشه کلی سئو قرار می‌گیرند، مقاله سئو چیست؟ راهنمای کامل سئو سایت و برای متن لینک‌های داخلی، چک‌لیست سئو داخلی را بخوانید.

مقدار rel	کاربرد	روی سئو	روی امنیت
noopener	جلوگیری از دسترسی مقصد به window.opener	بی‌تأثیر	بله
noreferrer	ارسال نکردن Referer + رفتار noopener	بی‌تأثیر	بله (حریم خصوصی)
nofollow	عدم تأیید یا اعتبار به مقصد	بله	بی‌تأثیر
sponsored	لینک تبلیغاتی یا پولی	بله	بی‌تأثیر
ugc	لینک تولیدشده توسط کاربر	بله	بی‌تأثیر

لینک ایمیل و تلفن در HTML چطور ساخته می‌شود؟

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

<!-- ایمیل با موضوع پیش‌فرض -->
<a href="mailto:info@example.com?subject=درخواست%20مشاوره">
  ارسال ایمیل به پشتیبانی
</a>

<!-- تماس تلفنی: شماره با کد کشور و بدون فاصله -->
<a href="tel:+982100000000">
  تماس: <bdi dir="ltr">021-0000-0000</bdi>
</a>

<!-- پیامک -->
<a href="sms:+989120000000">ارسال پیامک</a>

چند نکته عملی برای سایت‌های ایرانی: شماره تلفن در href را با کد کشور (+98) و بدون صفر ابتدای کد شهر و بدون فاصله بنویسید تا در همه گوشی‌ها درست کار کند. در متن قابل‌مشاهده می‌توانید شماره را با رقم فارسی یا لاتین نمایش دهید؛ اگر لاتین است، آن را داخل <bdi> یا با dir="ltr" بگذارید تا خط تیره‌ها در متن راست‌چین جابه‌جا نشوند (همان نکته‌ای که در قسمت ۶ دیدید). در mailto، کاراکترهای خاص مثل فاصله باید به‌صورت URL-encoded (%20) نوشته شوند.

لینک دانلود فایل با download

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

<a href="/files/catalog-1405.pdf" download="کاتالوگ-محصولات.pdf">
  دانلود کاتالوگ محصولات (PDF، ۲ مگابایت)
</a>

متن لینک خوب برای سئو و دسترس‌پذیری چه ویژگی‌هایی دارد؟

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

<!-- بد: متن لینک بی‌معنا -->
<p>برای دیدن تعرفه‌ها <a href="/services/">کلیک کنید</a>.</p>

<!-- خوب: متن لینک توصیفی -->
<p>جزئیات را در <a href="/services/">تعرفه خدمات طراحی سایت</a> ببینید.</p>

<!-- لینک تصویری: alt نقش متن لینک را دارد -->
<a href="/">
  <img src="logo.svg" alt="صفحه اصلی سیلو سولوشن" width="120" height="40">
</a>

• متن لینک را توصیفی و کوتاه بنویسید؛ مثل «تعرفه خدمات طراحی سایت».
• در لینک تصویری، متن alt نقش متن لینک را دارد؛ پس مقصد را توصیف کند، نه ظاهر تصویر.
• چند لینک با متن یکسان نباید به مقصدهای متفاوت بروند.
• لینک‌ها باید از متن عادی قابل تشخیص باشند (رنگ به‌علاوه زیرخط یا نشانه دیگر)، نه فقط با رنگ.
• لینک‌ها را تو در تو نگذارید؛ تگ a داخل تگ a معتبر نیست.

لینک‌های داخلی و منوی واضح بخش مهمی از ساختار هر سایت هستند؛ در امکانات ضروری طراحی سایت شرکتی هم به نقش ناوبری درست اشاره کرده‌ایم.

تفاوت لینک (a) و دکمه (button) چیست؟

لینک یعنی «رفتن به جایی» و دکمه یعنی «انجام کاری در همین صفحه». اگر کلیک کاربر آدرس صفحه را عوض می‌کند، از a استفاده کنید؛ اگر کاری مثل افزودن به سبد خرید، باز کردن منو یا ارسال فرم انجام می‌دهد، از button استفاده کنید.

<!-- لینک (a) برای رفتن به یک آدرس -->
<a href="/cart/">مشاهده سبد خرید</a>

<!-- دکمه (button) برای انجام یک کار در همین صفحه -->
<button type="button">افزودن به سبد خرید</button>

<!-- اشتباه: لینک بدون href که نقش دکمه را بازی می‌کند -->
<a onclick="addToCart()">افزودن به سبد</a>

تگ a بدون href با کیبورد قابل دسترسی نیست و صفحه‌خوان آن را لینک اعلام نمی‌کند؛ پس ساختن «دکمه» با a و جاوااسکریپت هم دسترس‌پذیری را خراب می‌کند و هم کار بیشتری می‌خواهد.

از تجربه تیم siloow: لینک‌ها در سایت‌های فروشگاهی

در قالب‌های فروشگاهی ووکامرس و وب‌اپلیکیشن سفارش آنلاین چندشعبه‌ای کافه و شیرینی‌فروشی که تیم siloow ساخته است، یکی از رایج‌ترین مشکلاتی که در بازبینی کد پیدا کردیم، کارت‌های محصولی بود که کل کارت با div و رویداد کلیک جاوااسکریپت «لینک» شده بود. این کارت‌ها با کلید Tab قابل انتخاب نبودند، با کلیک وسط موس در تب جدید باز نمی‌شدند و موتور جستجو هم لینک واقعی در آن‌ها نمی‌دید. وقتی آن‌ها را با یک تگ a واقعی روی عنوان محصول بازنویسی کردیم و دکمه «افزودن به سبد» را button گذاشتیم، هم ناوبری با کیبورد درست شد و هم کد ساده‌تر شد. از آن به بعد قاعده ما این است: هر چیزی که آدرس را عوض می‌کند a با href واقعی است.

اشتباهات رایج در لینک دادن در html

• نوشتن آدرس خارجی بدون https://؛ مرورگر آن را مسیر داخلی فرض می‌کند.
• استفاده از متن لینک «کلیک کنید» یا «اینجا».
• باز کردن همه لینک‌های داخلی با target _blank.
• ساختن دکمه با تگ a بدون href یا با href="#".
• لینک تصویری بدون alt.
• لینک تبلیغاتی بدون sponsored یا nofollow.
• شماره تلفن با فاصله یا خط تیره در href مقدار tel:.

محدودیت‌ها؛ چه کارهایی از تگ a برنمی‌آید؟

تگ a کنترلی روی رفتار سایت مقصد ندارد؛ نمی‌توانید مطمئن شوید یک فایل خارجی دانلود شود یا لینک ایمیل حتماً برنامه ایمیل را باز کند (اگر کاربر برنامه ایمیل تنظیم نکرده باشد، اتفاقی نمی‌افتد). همچنین nofollow یک دستور قطعی برای جلوگیری از ایندکس نیست؛ صفحه مقصد ممکن است از راه‌های دیگر مثل نقشه سایت پیدا شود. برای جلوگیری از ایندکس صفحه‌های خودتان، روش‌های دیگری مثل متا تگ robots وجود دارد که در قسمت ۲۱ می‌بینید.

تمرین این قسمت

1. یک منوی ساده با سه لینک داخلی (صفحه اصلی، درباره ما، تماس) بسازید.
2. یک لینک خارجی به MDN بسازید که در تب جدید باز شود و به کاربر اطلاع دهد.
3. یک بخش «تماس با ما» با لینک ایمیل (همراه موضوع پیش‌فرض) و لینک تلفن با کد کشور بنویسید.
4. یک لینک دانلود برای یک فایل PDF با نام فارسی پیشنهادی بسازید.
5. سه لینک با متن «کلیک کنید» را بازنویسی کنید تا متن توصیفی داشته باشند.

جمع‌بندی و خلاصه

• تگ a در html با اتریبیوت href لینک می‌سازد؛ بدون href لینک واقعی وجود ندارد.
• target _blank را فقط وقتی لازم است استفاده کنید و به کاربر اطلاع دهید.
• برای لینک تبلیغاتی sponsored و برای لینک کاربران ugc بگذارید.
• لینک ایمیل با mailto و لینک تلفن با tel و کد کشور ساخته می‌شود.
• متن لینک باید به‌تنهایی مقصد را توضیح دهد؛ برای اجرای کار از button استفاده کنید.

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

منابع

• MDN: The Anchor element (a)
• Google Search Central: Qualify your outbound links
• Google Search Central: Link best practices
• WHATWG HTML Living Standard: Links

سوالات متداول درباره تگ a در html