تگ تصویر (img) و خصوصیات src و alt

تگ و خصوصیات حیاتی src و alt: پنجره‌ای به دنیای بصری! 🖼️

سلام دوستان خلاق! توی دنیای پر زرق و برق وب، تصاویر نقش کلیدی در جلب توجه و انتقال بهتر پیام دارن. برای نمایش این تصاویر دلربا، ما از تگ <img> در HTML استفاده می‌کنیم. اما تگ <img> بدون دو خصوصیت اصلی‌اش، یعنی src و alt، کارایی چندانی نداره.

تگ <img> مثل یه قاب عکسه که خصوصیت src قاب رو پُر می‌کنه و alt توضیحی برای اون قاب ارائه می‌ده.

تگ : نمایشگر جادویی تصاویر ✨

تگ <img> برای قرار دادن تصاویر در صفحه HTML به کار می‌ره. این تگ جزو تگ‌های “خودبسته” یا “تک” (Void/Self-closing elements) هست، یعنی نیازی به تگ پایان‌دهنده </img> نداره.

ساختار پایه:

<img >

خصوصیت src (Source): مقصد تصویر کجاست؟ 📍

خصوصیت src مهم‌ترین خصوصیت تگ <img> هست. مقدار این خصوصیت، آدرس (URL) فایل تصویری رو مشخص می‌کنه که می‌خواید نمایش بدید. این آدرس می‌تونه:

• مسیر نسبی (Relative Path): اگر تصویر در پوشه‌ای داخل پروژه شما قرار داره.
• مسیر مطلق (Absolute Path): اگر تصویر در سایت دیگه‌ای هست یا از طریق URL کامل مشخص می‌شه.

مثال با مسیر نسبی:

<!-- تصویر در پوشه 'images' و کنار فایل HTML فعلی -->
<img src="images/my-photo.jpg">

<!-- تصویر در پوشه والد و سپس در پوشه 'assets' -->
<img src="../assets/icons/star.png">

مثال با مسیر مطلق:

<!-- تصویر از یک وب‌سایت دیگر -->
<img src="https://www.example.com/images/banner.gif">

خصوصیت alt (Alternative Text): توضیحی برای تصویر ✍️

خصوصیت alt، متنی توصیفی برای تصویر ارائه می‌ده. این خصوصیت فوق‌العاده مهمه و دلایل زیادی داره:

• در دسترس بودن (Accessibility): اگر تصویر بارگذاری نشه (به دلیل سرعت کم اینترنت، لینک اشتباه، یا بلاک شدن تصویر)، این متن به جای تصویر نمایش داده می‌شه. همچنین صفحه‌خوان‌ها (Screen Readers) که توسط افراد نابینا استفاده می‌شن، این متن رو برای کاربر می‌خونن.
• سئو (SEO): موتورهای جستجو نمی‌تونن محتوای تصاویر رو درک کنن. متن alt به اون‌ها کمک می‌کنه تا موضوع تصویر رو بفهمن و در نتایج جستجو بهتر نمایش داده بشه.

نکته مهم: متن alt باید کوتاه، توصیفی و مفید باشه. از تکرار کلمات کلیدی بی‌مورد خودداری کنید.

<img src="images/cute-cat.jpg" alt="یک بچه گربه پشمالوی نارنجی در حال بازی">

<img src="icons/settings.svg" alt="آیکون تنظیمات">

استفاده از خصوصیت alt اجباری نیست، اما برای ساخت وب‌سایت‌های حرفه‌ای، در دسترس و بهینه، کاملاً ضروری است!

مثال جامع:

<h1>معرفی شخصیت‌ها</h1>

<section>
  <h2>شخصیت اول: الارا</h2>
  <img src="characters/elara.png" alt="تصویری از شخصیت الارا با موهای بلند و لباس سبز" width="200">
  <p>الارا یک جادوگر ماهر است...</p>
</section>

<section>
  <h2>شخصیت دوم: بورین</h2>
  <img src="characters/borin.jpg" alt="تصویری از شخصیت بورین، جنگجوی قوی هیکل با زره" width="200">
  <p>بورین یک جنگجوی شجاع است...</p>
</section>

با استفاده درست از تگ <img> و خصوصیات src و alt، می‌تونید صفحات وب خودتون رو با تصاویر زیبا و معنی‌دار تزئین کنید و تجربه کاربری فوق‌العاده‌ای رو برای بازدیدکنندگانتون رقم بزنید! 😊