عنصر a و لینک‌های پایه

a: تگی که کل وب رو به‌هم وصل کرده

اگه بخوایم یه تگ رو انتخاب کنیم که واقعاً «وب» رو از یه مجموعه فایل جدا و پراکنده به یه شبکه‌ی به‌هم‌پیوسته تبدیل کرده، اون تگ قطعاً a هست. همون‌طور که تو درس ۱-۱ گفتیم، خود مفهوم وب بر پایه‌ی اتصال اسناد به هم شکل گرفته، و این اتصال از طریق همین تگ اتفاق میفته.

تگ a چیه؟

تگ a مخفف Anchor (لنگر) هست و برای ساخت لینک استفاده می‌شه؛ یعنی بخشی از متن یا محتوا که با کلیک روش، کاربر به یه مقصد دیگه (یه صفحه‌ی دیگه، یه بخش دیگه از همون صفحه، یا حتی یه فایل) منتقل می‌شه.

<a href="https://example.com">مشاهده وب‌سایت</a>

ویژگی href: قلب تگ a

ویژگی href مخفف Hypertext Reference هست و مقصد لینک رو مشخص می‌کنه. بدون این ویژگی، تگ a عملاً هیچ کاربردی به‌عنوان لینک نداره؛ فقط یه متن معمولی حساب می‌شه (هرچند بدون استایل مرورگر، حتی رنگ آبی یا زیرخط هم نمی‌گیره).

<!-- این یه لینک واقعیه -->
<a href="https://example.com">برو به سایت</a>

<!-- این عملاً لینک نیست، چون href نداره -->
<a>این یک لینک نیست</a>

انواع مقادیر href

مقدار href می‌تونه چند نوع مختلف داشته باشه:

<!-- آدرس کامل (Absolute URL) -->
<a href="https://example.com/about">درباره ما</a>

<!-- آدرس نسبی (Relative URL) -->
<a href="about.html">درباره ما</a>

<!-- آدرس ایمیل -->
<a href="mailto:info@example.com">ارسال ایمیل</a>

<!-- آدرس تلفن -->
<a href="tel:+982112345678">تماس با ما</a>

آدرس کامل (Absolute) شامل کل مسیره، از پروتکل (https) تا آدرس دقیق، و معمولاً برای لینک به سایت‌های دیگه استفاده می‌شه. آدرس نسبی (Relative) فقط مسیر رو نسبت به فایل فعلی مشخص می‌کنه و برای لینک‌دادن بین صفحات همون سایت مناسب‌تره؛ چون اگه بعداً دامنه‌ی سایت عوض بشه، لازم نیست همه‌ی لینک‌ها رو دستی ویرایش کنی.

لینک‌های نسبی به‌طور دقیق‌تر

فرض کن ساختار فایل‌های سایتت به این شکله:

my-site/
  ├── index.html
  ├── about.html
  └── blog/
      └── post1.html

اگه از داخل index.html بخوای به about.html لینک بدی، کافیه فقط اسم فایل رو بنویسی:

<a href="about.html">درباره ما</a>

اگه بخوای از index.html به فایل داخل پوشه‌ی blog لینک بدی، باید مسیر پوشه رو هم اضافه کنی:

<a href="blog/post1.html">اولین پست وبلاگ</a>

و برعکس، اگه از داخل post1.html بخوای به index.html (که یه پوشه بالاتره) لینک بدی، از ../ استفاده می‌کنی که یعنی «برو یه پوشه بالاتر»:

<a href="../index.html">بازگشت به صفحه اصلی</a>

لینک‌کردن محتوای غیرمتنی

یه نکته‌ی مهم اینه که تگ a محدود به متن نیست؛ می‌شه هر عنصر دیگه‌ای، مثل تصویر رو هم داخلش گذاشت تا کلیک‌پذیر بشه:

<a href="https://example.com">
  <img src="banner.jpg" alt="بنر تبلیغاتی">
</a>

تو این مثال، کل تصویر تبدیل به یه لینک کلیک‌پذیر می‌شه؛ این روش خیلی تو بنرها و کارت‌های محصول تو فروشگاه‌های آنلاین استفاده می‌شه.

خروجی یک لینک چیه؟

وقتی مرورگر به یه تگ a با href معتبر می‌رسه، معمولاً اون متن رو با رنگ آبی و زیرخط‌دار نشون می‌ده (این استایل پیش‌فرض مرورگره و با CSS قابل تغییره)، و وقتی موس رو روش ببری، اشاره‌گر موس به شکل دست تغییر می‌کنه؛ این یعنی این المان کلیک‌پذیره.

چند اشتباه رایج

• فراموش‌کردن ویژگی href، که باعث می‌شه تگ a عملاً هیچ کاربردی نداشته باشه.
• استفاده از آدرس کامل (Absolute) برای لینک‌های داخلی سایت، در حالی‌که آدرس نسبی مناسب‌تر و قابل‌نگهداری‌تره.
• اشتباه‌نوشتن مسیر نسبی (مثلاً فراموش‌کردن ../ برای برگشت به پوشه‌ی بالاتر).
• استفاده از دکمه (button) یا تگ‌های دیگه به‌جای a برای ناوبری بین صفحات، که از نظر معنایی و دسترسی‌پذیری نادرسته.

بهترین روش‌ها

• برای لینک به صفحات دیگه‌ی همون سایت، همیشه از آدرس نسبی استفاده کن.
• برای لینک به سایت‌های خارجی، همیشه از آدرس کامل با پروتکل (https://) استفاده کن.
• متن داخل لینک رو گویا بنویس (مثلاً «مشاهده مقاله کامل» به‌جای «کلیک کنید اینجا»).

نکته‌ی سئو

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

نکته‌ی دسترسی‌پذیری

کاربران صفحه‌خوان معمولاً می‌توانند بین لینک‌های یک صفحه جابه‌جا شوند و متن هر لینک را جداگانه بشنوند؛ به همین دلیل، متن لینک باید به‌تنهایی (بدون نیاز به خواندن جملات اطراف) معنای مشخصی داشته باشد.

جمع‌بندی

تگ a همراه با ویژگی href، اصلی‌ترین ابزار ساخت لینک در HTML5 است. آدرس مقصد می‌تواند کامل (برای سایت‌های دیگر) یا نسبی (برای صفحات داخلی همان سایت) باشد، و این تگ می‌تواند علاوه بر متن، محتوای دیگری مثل تصویر را نیز کلیک‌پذیر کند.