لینک در HTML چیست؟ آموزش تگ a، href و انواع لینک‌ها

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

حالا به یکی از مهم‌ترین قابلیت‌های وب می‌رسیم: لینک در HTML.

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

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

لینک در HTML چیست؟

برای ایجاد لینک در HTML از عنصر a استفاده می‌کنیم. حرف a از واژه Anchor گرفته شده است.

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

در این مثال، a عنصر لینک است، href مقصد لینک را مشخص می‌کند و عبارت «مشاهده سایت» متن قابل کلیک یا Anchor Text است.

ویژگی href چیست؟

ویژگی href مقصد لینک را مشخص می‌کند.

<a href="https://vitrinwp.com/">ویترین وردپرس</a>

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

Anchor Text چیست؟

متنی که بین تگ شروع و پایان a قرار می‌گیرد Anchor Text نام دارد.

<a href="/html-course/">آموزش HTML</a>

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

چرا «اینجا کلیک کنید» همیشه متن لینک خوبی نیست؟

متن لینک باید تا حد امکان مقصد را توضیح دهد. مثلاً «مشاهده دوره آموزش HTML» از «اینجا کلیک کنید» واضح‌تر است و برای خوانایی و دسترس‌پذیری هم انتخاب بهتری محسوب می‌شود.

لینک مطلق یا Absolute URL چیست؟

وقتی آدرس کامل یک منبع را داخل href می‌نویسیم، با URL مطلق روبه‌رو هستیم.

<a href="https://vitrinwp.com/html-tutorial/">آموزش HTML</a>

لینک نسبی یا Relative URL چیست؟

برای لینک دادن بین فایل‌ها یا صفحات داخل یک پروژه می‌توانیم از مسیر نسبی استفاده کنیم.

project/
├── index.html
├── about.html
└── contact.html

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

تفاوت لینک نسبی و مطلق چیست؟

مسیرهای نسبی چگونه کار می‌کنند؟

project/
├── index.html
└── pages/
    ├── about.html
    └── contact.html

از index.html به صفحه درباره ما:

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

و از pages/about.html برای برگشت به صفحه اصلی:

<a href="../index.html">صفحه اصلی</a>

../ یعنی یک سطح به پوشه والد برو.

لینک داخلی چیست؟

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

<a href="/contact/">ارتباط با ما</a>

لینک خارجی چیست؟

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

<a href="https://developer.mozilla.org/">MDN Web Docs</a>

ویژگی target در لینک چیست؟

ویژگی target مشخص می‌کند مقصد لینک در چه Context یا پنجره‌ای باز شود. مقدار رایج _blank معمولاً مقصد را در تب یا پنجره جدید باز می‌کند.

<a href="https://example.com" target="_blank">باز کردن سایت</a>

لازم نیست همه لینک‌ها را در تب جدید باز کنیم. برای لینک‌های داخلی معمولاً رفتار طبیعی مرورگر انتخاب بهتری است.

rel=”noopener” چیست؟

<a href="https://example.com" target="_blank" rel="noopener">سایت نمونه</a>

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

لینک به بخش خاصی از همان صفحه

<a href="#contact">رفتن به بخش تماس</a>

<section id="contact">
    <h2>ارتباط با ما</h2>
</section>

علامت # همراه با ID، Fragment مقصد را مشخص می‌کند.

لینک به بخش خاصی از صفحه دیگر

<a href="about.html#team">آشنایی با تیم ما</a>

لینک به بالای صفحه

<body id="top">
...
<a href="#top">بازگشت به بالای صفحه</a>

لینک ایمیل با mailto چیست؟

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

مرورگر تلاش می‌کند برنامه یا سرویس پیش‌فرض ایمیل دستگاه را باز کند.

قرار دادن Subject در لینک ایمیل

<a href="mailto:info@example.com?subject=Website%20Question">ارسال سؤال</a>

لینک تماس تلفنی با tel چیست؟

<a href="tel:+982112345678">تماس با ما</a>

این نوع لینک به‌خصوص روی موبایل کاربردی است.

آیا می‌توان تصویر را لینک کرد؟

<a href="/products/">
    <img src="products.jpg" alt="مشاهده محصولات">
</a>

در این حالت کلیک روی تصویر لینک را فعال می‌کند.

لینک دانلود چیست؟

<a href="files/guide.pdf" download>دانلود راهنما</a>

Attribute download در شرایط مناسب به مرورگر پیشنهاد می‌کند منبع دانلود شود. رفتار دقیق آن می‌تواند به مرورگر، منبع و Origin بستگی داشته باشد.

تفاوت لینک و دکمه چیست؟

• لینک معمولاً کاربر را به یک مقصد دیگر هدایت می‌کند.
• دکمه معمولاً یک عمل را اجرا می‌کند.

ممکن است با CSS ظاهرشان شبیه شود، اما نقش معنایی آنها یکسان نیست.

ویژگی title در لینک

<a href="/courses/html/" title="مشاهده دوره آموزش HTML">آموزش HTML</a>

اطلاعات ضروری نباید فقط داخل title قرار بگیرد؛ متن خود لینک باید واضح باشد.

لینک‌ها و دسترس‌پذیری

• متن لینک واضح و معنی‌دار باشد.
• چند لینک متفاوت با متن مبهم و یکسان نسازیم.
• اگر رفتار لینک غیرعادی است، در صورت نیاز کاربر را آگاه کنیم.

لینک‌ها و SEO

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

مثال کامل یک منوی ساده

<nav>
    <a href="index.html">صفحه اصلی</a>
    <a href="about.html">درباره ما</a>
    <a href="courses.html">دوره‌ها</a>
    <a href="contact.html">ارتباط با ما</a>
</nav>

اشتباهات رایج هنگام ساخت لینک

فراموش کردن href

بدون href مقصد ناوبری مشخص نمی‌شود.

نوشتن مسیر اشتباه

مسیر باید با ساختار واقعی پروژه هماهنگ باشد.

استفاده زیاد از «اینجا کلیک کنید»

بهتر است Anchor Text موضوع مقصد را توضیح دهد.

باز کردن همه لینک‌ها در تب جدید

برای هر لینک بدون دلیل از target="_blank" استفاده نکنید.

استفاده از لینک برای عملی که دکمه است

اگر مقصدی برای ناوبری نداریم، بررسی کنید که آیا button انتخاب مناسب‌تری نیست.

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

سه فایل index.html، about.html و contact.html بسازید و در هرکدام یک منوی ساده برای رفتن به هر سه صفحه قرار دهید.

تمرین دوم: مسیر نسبی بسازید

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

تمرین سوم: فهرست داخلی صفحه

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

تمرین چهارم: ایمیل و تلفن

یک لینک mailto: و یک لینک tel: بسازید و رفتار آنها را روی دستگاه خود بررسی کنید.

تمرین پنجم: بررسی با DevTools

چند لینک در یک سایت را Inspect کنید و مقدار href، وجود target و rel و متن Anchor را بررسی کنید.

در این درس چه چیزهایی یاد گرفتیم؟

• برای ساخت لینک از عنصر a استفاده می‌کنیم.
• href مقصد لینک را مشخص می‌کند.
• URLها می‌توانند مطلق یا نسبی باشند.
• با ID و Fragment می‌توان به بخش خاصی از صفحه لینک داد.
• target="_blank" معمولاً مقصد را در تب یا پنجره جدید باز می‌کند.
• mailto: برای ایمیل و tel: برای تماس تلفنی است.
• عنصر a می‌تواند تصویر یا محتوای دیگری را در خود داشته باشد.
• لینک و دکمه نقش معنایی یکسانی ندارند.

جمع‌بندی

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

مهم‌تر از ساخت خود لینک، انتخاب مقصد درست و Anchor Text واضح است. لینک باید برای کاربر قابل‌فهم و واقعاً مفید باشد.