لینک‌ها و تصاویر در HTML

عنصر <a> (مخفف anchor) یک لینک می‌سازد. مهم‌ترین attribute آن href است که مشخص می‌کند لینک به کجا اشاره دارد:

<a href="/projects/">مشاهده پروژه‌ها</a>

هر چیزی بین تگ باز و بسته <a>، بخش قابل‌کلیک لینک است — می‌تواند متن ساده باشد یا حتی یک تصویر.

آدرس مطلق کل نشانی، از جمله پروتکل و دامنه را شامل می‌شود:

<a href="https://example.com/about">درباره ما</a>

آدرس نسبی فقط مسیر را نسبت به صفحه فعلی یا ریشه سایت می‌نویسد:

<a href="/about/">درباره ما</a>
<a href="../projects/">پروژه‌ها</a>

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

اگر یک عنصر روی صفحه id داشته باشد، می‌توانید مستقیماً با علامت # به آن لینک بدهید:

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

<!-- در جای دیگر همان صفحه -->
<section id="contact">...</section>

می‌توانید این را با آدرس یک صفحه دیگر هم ترکیب کنید تا کاربر هم به صفحه دیگر برود و هم مستقیم به آن بخش برسد: href="/#contact".

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

<!-- نامناسب -->
برای مطالعه بیشتر <a href="/articles/semantic-html/">اینجا کلیک کنید</a>

<!-- بهتر -->
مطالعه بیشتر: <a href="/articles/semantic-html/">Semantic HTML چیست؟</a>

<img> یک تصویر را در صفحه نمایش می‌دهد. این یک عنصر خودبسته است — تگ بسته ندارد. src مسیر فایل تصویر را مشخص می‌کند:

<img src="/images/cover.jpg" alt="جلد کتاب برنامه‌نویسی">

درست مثل لینک‌ها، مسیر src هم می‌تواند نسبی یا مطلق باشد.

alt توصیف متنی تصویر است. این متن در سه حالت استفاده می‌شود: وقتی صفحه‌خوان محتوای تصویر را برای کاربر توصیف می‌کند، وقتی تصویر بارگذاری نمی‌شود، و وقتی موتور جست‌وجو می‌خواهد بفهمد تصویر درباره چیست.

<!-- نامناسب -->
<img src="team.jpg" alt="عکس">

<!-- بهتر -->
<img src="team.jpg" alt="تیم توسعه در جلسه هفتگی">

یک alt خوب توصیف می‌کند که تصویر چه چیزی نشان می‌دهد، نه اینکه صرفاً بگوید «تصویر» یا «عکس». اگر عکس حاوی متن مهمی است (مثل یک بنر تخفیف)، آن متن هم باید در alt بیاید.

اگر یک تصویر کاملاً تزیینی است و هیچ اطلاعاتی اضافه نمی‌کند (مثل یک خط جداکننده گرافیکی)، باید alt="" (خالی) بگذارید — نه اینکه اصلاً alt را حذف کنید.

<img src="divider.svg" alt="">

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

مشخص کردن width و height روی <img> به مرورگر کمک می‌کند از همان ابتدا فضای درست را برای تصویر رزرو کند، حتی پیش از بارگذاری کامل فایل:

<img src="cover.jpg" alt="جلد کتاب" width="600" height="400">

بدون این دو attribute، وقتی تصویر بارگذاری می‌شود، محتوای اطرافش ناگهان جابه‌جا می‌شود — چون مرورگر تا لحظه بارگذاری، ابعاد واقعی تصویر را نمی‌داند. ظاهر نهایی تصویر (مثلاً اندازه واقعی روی صفحه) را می‌توانید با CSS کنترل کنید؛ width/height در HTML فقط برای کمک به مرورگر در رزرو فضاست.

ترکیب لینک و تصویر در یک کارت پروژه ساده:

<a href="/projects/">
  <img src="/images/cover.jpg" alt="پیش‌نمایش پروژه فروشگاه کتاب" width="400" height="250">
  <h3>فروشگاه کتاب آنلاین</h3>
</a>

در این مثال، کل کارت — تصویر و عنوان — یک لینک واحد است. توجه کنید که alt توضیح می‌دهد تصویر چیست، نه اینکه صرفاً بگوید «تصویر پروژه».

فراموش کردن alt. هر <img> باید attribute alt داشته باشد — حتی اگر خالی باشد.

alt غیرتوصیفی مثل «تصویر» یا «عکس۱». این متن‌ها هیچ اطلاعاتی به کاربر صفحه‌خوان نمی‌دهند.

متن لینک مبهم مثل «کلیک کنید». متن لینک باید بدون وابستگی به متن اطراف، مقصد را توصیف کند.

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