عنصر caption

caption: عنوان رسمی برای کل جدول

تا اینجا با th آشنا شدیم که عنوان ستون‌ها و سطرها رو مشخص می‌کنه. اما گاهی نیاز داری کل جدول، یه عنوان کلی داشته باشه؛ چیزی شبیه اسم یا موضوع کلی جدول. برای این کار HTML5 تگ caption رو داره.

caption چیه؟

<table>
  <caption>لیست قیمت محصولات فروشگاه</caption>
  <tr>
    <th>محصول</th>
    <th>قیمت</th>
  </tr>
  <tr>
    <td>کفش ورزشی</td>
    <td>۵۰۰,۰۰۰ تومان</td>
  </tr>
</table>

تگ caption عنوان رسمی کل جدول رو مشخص می‌کنه و مرورگر به‌صورت پیش‌فرض این متن رو بالای جدول و وسط‌چین نمایش می‌ده.

قانون مهم: caption باید اولین فرزند table باشه

یه قانون سخت‌گیرانه‌ی HTML5 اینه که اگه بخوای از caption استفاده کنی، باید حتماً بلافاصله بعد از تگ باز table بیاد، قبل از هر چیز دیگه (حتی قبل از thead):

<!-- درست -->
<table>
  <caption>گزارش فروش سه‌ماهه</caption>
  <thead>
    <tr><th>ماه</th><th>فروش</th></tr>
  </thead>
  <tbody>
    <tr><td>فروردین</td><td>۱۲۰</td></tr>
  </tbody>
</table>

<!-- اشتباه: caption بعد از thead اومده -->
<table>
  <thead>
    <tr><th>ماه</th><th>فروش</th></tr>
  </thead>
  <caption>گزارش فروش سه‌ماهه</caption>
</table>

تفاوت caption با یه heading یا پاراگراف قبل از جدول

شاید بپرسی چرا از caption استفاده کنیم، وقتی می‌شه یه h3 یا p ساده قبل از table گذاشت:

<!-- روش جایگزین بدون caption -->
<h3>لیست قیمت محصولات فروشگاه</h3>
<table>
  <tr>
    <th>محصول</th>
    <th>قیمت</th>
  </tr>
</table>

مشکل این روش اینه که از نظر HTML، هیچ رابطه‌ی رسمی و ساختاری بین اون h3 و جدولی که بعدش میاد وجود نداره؛ اونا فقط دو تا عنصر مجزا هستن که از نظر بصری کنار هم قرار گرفتن. اما caption مستقیم داخل خود table تعریف می‌شه و از نظر معنایی، جزئی از خود جدوله؛ یعنی مرورگر و صفحه‌خوان دقیقاً می‌فهمن این عنوان، رسماً متعلق به همین جدوله، نه یه متن مستقل قبل از اون.

یه مثال کامل

<table>
  <caption>برنامه‌ی کلاسی هفته</caption>
  <thead>
    <tr>
      <th>روز</th>
      <th>درس</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>شنبه</td>
      <td>ریاضی</td>
    </tr>
    <tr>
      <td>یکشنبه</td>
      <td>فیزیک</td>
    </tr>
  </tbody>
</table>

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

چند تا caption مجازه؟

نه، هر جدول فقط می‌تونه یک caption داشته باشه؛ درست مثل title که هر سند فقط یکی داشت. اگه بخوای چند تا توضیح مختلف برای یه جدول بدی، باید از روش‌های دیگه (مثل یه پاراگراف توضیحی جدا بعد از جدول) استفاده کنی، نه چند تا caption.

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

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

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

• قراردادن caption بعد از thead یا tbody، به‌جای بلافاصله بعد از تگ باز table.
• استفاده از چند caption تو یک جدول.
• استفاده از یه h3 یا p جدا به‌جای caption، در حالی که caption ارتباط معنایی قوی‌تری با جدول برقرار می‌کنه.

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

• برای جدول‌های مستقل و رسمی، همیشه یه caption گویا و کوتاه اضافه کن.
• caption رو همیشه بلافاصله بعد از تگ باز table بنویس، قبل از thead، tbody یا هر تگ دیگه.
• متن caption رو کوتاه و دقیق نگه دار؛ کافیه موضوع کلی جدول رو برسونه.

نکته‌ی سئو

caption به موتورهای جستجو کمک می‌کند موضوع کلی یک جدول را سریع‌تر و دقیق‌تر تشخیص دهند، مخصوصاً در صفحاتی که چند جدول مختلف دارند و باید بین آن‌ها تمایز قائل شد.

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

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

جمع‌بندی

تگ caption عنوان رسمی و ساختاری یک جدول را مشخص می‌کند و باید بلافاصله بعد از تگ باز table نوشته شود. این تگ، برخلاف یک heading یا پاراگراف مستقل قبل از جدول، ارتباط معنایی رسمی با خود جدول دارد و برای دسترسی‌پذیری و سئو مفید است.