تگ انکر (a) و خصوصیت href

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

تگ <a> قلب تپنده ناوبری در وب هست و خصوصیت href مقصد این سفر رو مشخص می‌کنه.

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

ساختار اصلی:

<a> ... محتوای قابل کلیک ... </a>

خصوصیت href: مقصد کجاست؟ 📍

مهم‌ترین خصوصیت (Attribute) تگ <a>، خصوصیت href هست. مقدار (Value) این خصوصیت، آدرس URL یا مسیری رو مشخص می‌کنه که کاربر بعد از کلیک روی لینک به اونجا هدایت می‌شه. بدون href، تگ <a> فقط یه متن معمولی نمایش می‌ده و قابل کلیک نیست.

ساختار با href:

<a href="مقدار_href_اینجا_قرار_میگیرد">محتوای قابل کلیک</a>

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

۱. لینک به صفحات دیگر (Relative & Absolute URLs):

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

• لینک داخلی (Relative):

<a href="/about.html">درباره ما</a> <!-- از ریشه سایت -->
<a href="contact.html">تماس با ما</a> <!-- در همان پوشه -->
<a href="../index.html">صفحه اصلی</a> <!-- یک پوشه بالاتر -->

• لینک خارجی (Absolute):

<a href="https://www.wikipedia.org">ویکی‌پدیا</a>

۲. لینک به آدرس ایمیل (mailto):

با این کار، وقتی کاربر کلیک می‌کنه، برنامه ایمیلش باز می‌شه.

<a href="mailto:support@example.com?subject=سوال مشتری">پشتیبانی آنلاین</a>

در این مثال، “subject” به عنوان موضوع پیش‌فرض ایمیل قرار می‌گیره.

۳. لینک به بخش خاصی از صفحه (Fragment Identifier):

با استفاده از `#`، می‌تونیم کاربر رو به قسمتی خاص از همون صفحه که یه ID داره، هدایت کنیم.

<a href="#section-two">رفتن به بخش دوم</a>
...
<p id="section-two">این بخش دوم است.</p>

۴. لینک برای دانلود فایل:

می‌تونید با دادن آدرس فایل (مثل PDF یا ZIP) به href، لینکی برای دانلود ایجاد کنید.

<a href="/files/document.pdf" download>دانلود فایل PDF</a>

خصوصیت download به مرورگر می‌گه که فایل رو دانلود کنه (و نه فقط باز کنه).

خصوصیت href مهم‌ترین بخش تگ <a> است و مقصد لینک را تعیین می‌کند.

مثال جامع:

<h1>صفحه اصلی وبلاگ من</h1>

<nav>
  <a href="index.html">خانه</a> |
  <a href="/blog/posts.html">مطالب</a> |
  <a href="#about-me">درباره من</a> |
  <a href="mailto:me@myblog.com?subject=از وبلاگ">تماس</a>
</nav>

<p>
  به وبلاگ من خوش آمدید! در اینجا درباره موضوعات مختلف صحبت می‌کنم.
  برای اطلاعات بیشتر، می‌توانید به <a href="https://example.com/more-info" target="_blank">وب‌سایت مرجع</a> مراجعه کنید.
</p>

<h2 id="about-me">درباره من</h2>
<p>من یک توسعه‌دهنده وب علاقه‌مند هستم...</p>

همونطور که می‌بینید، تگ <a> با خصوصیت href، پایه‌های اصلی ارتباط در دنیای وب رو می‌سازه. با یادگیری انواع مقادیر href، می‌تونید صفحات وب خودتون رو به دنیایی از اطلاعات و منابع دیگه متصل کنید! 🔗