ایجاد بخش‌های مستقل با عنصر figure

مقدمه

در HTML برای ایجاد یک بلاک محتوای self-contained (خود شمول، خودکفا و ...) و قابل ارجاع توسط سایر بخش‌های سند، از عنصری به نام figure استفاده می‌شود. احتمالاً در جمله‌ی بالا ابهاماتی برای شما وجود دارد. مثلاً اینکه self-contained بودن یک بلاک محتوا به چه معناست و همینطور اینکه منظور از ارجاع به چنین بلاکی از سایر بخش‌های سند چیست. در این درس به تشریح و توضیح این موارد خواهیم پرداخت و علاوه بر عنصر figure عنصر دیگری با نام figcaption را نیز معرفی می‌کنیم که می‌تواند به عنوان یک عنصر فرزند برای figure با هدف مشخصی به کار گرفته شود.

توضیحی در مورد واژه‌ی Self-contained

به طور کلی اصرار بیش از حد به ترجمه‌ی برخی واژه‌ها و ارائه‌ی یک معادل قطعی برای آنها می‌تواند ما را در وضعیتی قرار دهد که مثل حضرات ساکن در فرهنگستان زبان و ادب فارسی مضحکه‌ی خاص و عام شویم. البته که اگر ما هم جای بزرگَوارن بودیم و بابت این معادل‌تراشی‌های درخشان و واژه‌های ماندگار، ارقام باور نکردنی تحت عنوان بودجه دریافت می‌کردیم، شاید نظرمان تغییر می‌کرد و گوشمان هم بدهکار هیچ کنایه و تمسخری نبود.

واژه‌ی self-contained به نوعی بیانگر بی‌نیازی یک موجودیت از دنیای بیرون است. یک دستگاه کامل که برای کار کردن به هیچ مولفه‌ی بیرونی نیاز ندارد، یک حکومت خودمختار که تحت تأثیر یک نیروی خارجی یا حکومت مرکزی نیست، یا یک اتاق master در یک خانه نمونه‌هایی هستند که مفهوم واژه‌ی self-contained را نشان می‌دهند. دقت داشته باشید که واژه‌ی self-contained به مفهوم استقلال (independence) و واژه‌ی مستقل (independent) نزدیک است، اما دقیقاً با آن یکی نیست. برای مثال، یک جمله‌ی کامل از یک پاراگراف یک موجودیت self-contained به حساب می‌آید اما مستقل نیست. شاید واژه‌ی خود شمول بهترین معادل فارسی برای این واژه باشد.

ایجاد یک بلاک Self-contained

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

در مثال زیر از یک عنصر figure برای ارائه‌ی یک تکه‌کد استفاده شده و از عنصر figcaption برای ایجاد یک عنوان توضیحی (caption) برای این تکه‌کد استفاده شده است.

HTML

<p>
  In listing 4 we see the primary core interface API declaration.
</p>
<figure>
  <figcaption>Listing 4. The primary core interface API declaration</figcaption>
  <pre>
    interface PrimaryCore {
    boolean verifyDataLine();
    undefined sendData(sequence data);
    undefined initSelfDestruct();
    }
  </pre>
</figure>
<p>The API is designed to use UTF-8.</p>

انواع محتوای قابل استفاده در عنصر figure

انواع محتوایی که می‌تواند کاندیدای مناسبی برای قرار گرفتن در یک عنصر figure باشد، عبارتند از: تصاویر، نمودارها، تکه‌کدها (code snippets)، ویدیوها و مواردی از این دست. البته عنصر figure حتی می‌تواند تنها شامل متن باشد؛ مهم این است که محتوای این عنصر باید self-contained باشد.

اما self-contained بودن محتوا اگرچه شرط لازم برای قرارگیری درون عنصر figure است، اما شرط کافی نیست. در حقیقت، برای اینکه محتوایی را بتوان درون عنصر figure قرار داد، باید از سه ویژگی زیر برخوردار باشد:

• محتوا باید self-contained باشد.
• محتوا باید به گونه‌ای باشد که بتوان آن را به عنوان یک واحد منفرد (single unit) توسط محتوای اصلی سند مورد ارجاع قرار داد. این ارجاع می‌تواند به دو روش صورت گیرد: روش اول، استفاده از عنوان توضیحی یا caption است که برای این منظور، در متن caption مشخصه‌ای مانند یک شماره را به محتوای عنصر figure که مثلاً یک تصویر است، اختصاص می‌دهیم و محتوای اصلی سند می‌تواند با استفاده از این مشخصه به آن محتوا ارجاع دهد. یعنی در هر جای سند می‌توانیم بگوییم تصویر یا نمودار شماره‌ی فلان. مزیت این روش این است که اگر عنصر figure را به بخش دیگری از سند منتقل کنیم، مشکلی به وجود نخواهد آمد. اما در روش دوم که از این مزیت برخوردار نیست، از عبارات نسبی مانند تصویر زیر، تصویر بالا و عباراتی از این قبیل برای ارجاع به عنصر figure و محتوای آن استفاده می‌شود. گاهی اوقات بهتر است هنگام ارجاع‌دهی به عنصر figure از یک لینک نیز برای انتقال به محل این عنصر استفاده کنیم.
• محتوای عنصر figure باید جزئی از هدف و محتوای اصلی محیط اطراف خود باشد. اگر محتوای مورد نظر واجد این شرط نباشد و مثلاً فقط با موضوع اصلی در ارتباط باشد اما جزئی از آن نباشد، باید از عنصر aside استفاده کنیم نه figure.

ارائه‌ی نقل قول با عنصر figure

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

HTML

<figure>
  <blockquote cite="https://huxley.net/bnw/four.html">
    <p>Words can be like X-rays ....</p>
  </blockquote>
  <figcaption>Aldus Huxley, <cite>Brave  New World</cite></figcaption>
</figure>

همانطور که می‌بینید، درون عنصر figcaption از یک عنصر cite استفاده شده که همانطور که درس قبلی گفتیم، باید شامل یک توصیف متنی از منبع نقل‌قول باشد.