عنصر figure و figcaption

figure و figcaption: وقتی تصویر یه زیرنویس رسمی نیاز داره

حتماً تو کتاب‌ها، مقالات یا سایت‌های خبری دیدی که زیر یه تصویر، یه توضیح کوتاه یا منبع نوشته شده. تا اینجای دوره، اگه می‌خواستیم همچین چیزی بسازیم، احتمالاً از یه div و یه p استفاده می‌کردیم. اما HTML5 برای دقیقاً همین منظور، دو تگ معنایی مشخص داره: figure و figcaption.

تگ figure چیه؟

<figure>
  <img src="mountain.jpg" alt="قله‌ی برفی دماوند در یک روز صاف">
</figure>

تگ figure برای بسته‌بندی یه محتوای مستقل استفاده می‌شه که معمولاً یه تصویر، نمودار، کد یا حتی ویدیوئه؛ محتوایی که از نظر معنایی یه واحد کامل و ارجاع‌پذیر حساب می‌شه، جدا از جریان اصلی متن.

تگ figcaption: زیرنویس رسمی

<figure>
  <img src="mountain.jpg" alt="قله‌ی برفی دماوند در یک روز صاف">
  <figcaption>قله‌ی دماوند، بلندترین نقطه‌ی ایران</figcaption>
</figure>

تگ figcaption برای نوشتن زیرنویس یا توضیح مربوط به محتوای داخل figure استفاده می‌شه. این تگ باید فرزند مستقیم figure باشه و می‌تونه اول یا آخر محتوا قرار بگیره (هرچند معمولاً آخرش رایج‌تره).

چرا این ترکیب بهتر از یه div و p ساده‌ست؟

<!-- روش قدیمی و غیرمعنایی -->
<div class="image-box">
  <img src="mountain.jpg" alt="قله‌ی برفی دماوند">
  <p>قله‌ی دماوند، بلندترین نقطه‌ی ایران</p>
</div>

تو این روش قدیمی، مرورگر و صفحه‌خوان هیچ رابطه‌ی معنایی مشخصی بین تصویر و اون پاراگراف نمی‌فهمن؛ فقط می‌بینن یه div داریم که یه عکس و یه متن توشه. اما با figure و figcaption:

<!-- روش HTML5 -->
<figure>
  <img src="mountain.jpg" alt="قله‌ی برفی دماوند">
  <figcaption>قله‌ی دماوند، بلندترین نقطه‌ی ایران</figcaption>
</figure>

مرورگر و صفحه‌خوان دقیقاً می‌فهمن این متن، زیرنویس رسمی همون تصویره، نه یه پاراگراف مستقل و بی‌ربط.

تفاوت مهم: alt در مقابل figcaption

یه سؤال رایج اینه: مگه ما قبلاً alt رو نداشتیم که توضیح تصویر رو بده؟ پس چرا figcaption هم لازمه؟ جواب اینجاست که این دو، هدف کاملاً متفاوتی دارن:

ویژگی	alt	figcaption
مخاطب	وقتی تصویر لود نشه یا برای صفحه‌خوان	همه‌ی کاربران، همیشه قابل‌مشاهده
محتوا	توصیف عینی محتوای تصویر	می‌تونه شامل نظر، منبع، یا اطلاعات اضافه باشه
نمایش	نامرئی، مگر در حالت خطا	همیشه رو صفحه نمایش داده می‌شه

<figure>
  <img src="team-award.jpg" alt="اعضای تیم در حال دریافت جایزه روی صحنه">
  <figcaption>تیم ما در مراسم اهدای جوایز فناوری سال ۱۴۰۳، عکس از رویداد سالانه انجمن فناوری</figcaption>
</figure>

تو این مثال، alt دقیقاً توصیف می‌کنه تو عکس چه چیزی هست (برای کاربر نابینا)، اما figcaption یه اطلاعات اضافه‌تر می‌ده (زمان و مناسبت رویداد) که برای همه‌ی کاربران، از جمله کسایی که عکس رو کامل می‌بینن، هم مفیده.

figure محدود به تصویر نیست

<figure>
  <pre><code>function sayHello() {
  console.log("سلام دنیا");
}</code></pre>
  <figcaption>نمونه کد تابع ساده در جاوااسکریپت</figcaption>
</figure>

همون‌طور که گفتیم، figure فقط برای تصویر نیست؛ می‌تونه یه بلوک کد، یه نمودار، یا حتی یه جدول داده رو هم در بر بگیره، هر جا که محتوا یه واحد مستقل و قابل ارجاعه.

چند تصویر داخل یک figure

<figure>
  <img src="before.jpg" alt="اتاق قبل از بازسازی">
  <img src="after.jpg" alt="اتاق بعد از بازسازی">
  <figcaption>مقایسه‌ی اتاق پذیرایی قبل و بعد از بازسازی</figcaption>
</figure>

می‌شه چند تا تصویر مرتبط رو با هم داخل یه figure واحد گذاشت، وقتی همگی به یه موضوع مشترک اشاره دارن (مثل این مثال قبل و بعد) و فقط یه زیرنویس مشترک لازم دارن.

آیا figcaption اجباریه؟

نه، figcaption اختیاریه. می‌شه از figure بدون figcaption هم استفاده کرد، برای مواقعی که فقط می‌خوای یه محتوا رو به‌عنوان یه واحد مستقل معرفی کنی، بدون نیاز به توضیح اضافه:

<figure>
  <img src="chart.jpg" alt="نمودار فروش سه‌ماهه">
</figure>

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

• استفاده از figcaption به‌جای alt، با این تصور که یکی از این دو کافیه؛ در حالی که این دو نقش متفاوت و مکملی دارن.
• استفاده از figure برای هر تصویر ساده‌ی داخل متن، حتی وقتی تصویر هیچ زیرنویس یا نیاز به ارجاع مستقلی نداره (تو این حالت، یه img ساده کافیه).
• قراردادن figcaption بیرون از تگ figure، به‌جای داخل اون.

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

• برای تصاویری که نیاز به زیرنویس یا توضیح اضافی دارن (مثل عکس‌های خبری یا نمودارها)، از figure و figcaption استفاده کن.
• همیشه alt رو هم کنار figcaption نگه دار؛ این دو جایگزین هم نیستن.
• برای تصاویر ساده و بدون نیاز به زیرنویس، همون تگ img به‌تنهایی کافیه و نیازی به figure نیست.

نکته‌ی سئو

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

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

صفحه‌خوان‌ها با دیدن ساختار figure و figcaption، رابطه‌ی میان تصویر و زیرنویسش را به‌درستی به کاربر منتقل می‌کنند؛ این کار به کاربران کم‌بینا کمک می‌کند بفهمند کدام توضیح دقیقاً مربوط به کدام تصویر است، به‌خصوص وقتی چند تصویر و توضیح مختلف پشت‌سرهم در صفحه وجود دارد.

جمع‌بندی

تگ figure برای بسته‌بندی محتوای مستقل مثل تصویر، کد یا نمودار استفاده می‌شود، و تگ figcaption زیرنویس رسمی آن محتوا را ارائه می‌دهد. این ترکیب جایگزین alt نیست، بلکه مکمل آن است؛ alt برای توصیف تصویر در نبود آن به کار می‌رود، در حالی‌که figcaption همیشه به‌صورت قابل‌مشاهده در کنار محتوا نمایش داده می‌شود.