HTML/figure

يُمثِّل العنصر <figure> محتوى مستقل بحد ذاته، ويستخدم عادةً مع لافتة (عبر العنصر <figcaption>)، ويُشير عادةً إلى وحدة لا تتجزأ من المعلومات.

تصنيفات المحتوى	عنصر تنظيمي.
المحتوى المسموح	محتوى تنظيمي يتبعه العنصر <figcaption>، أو العنصر <figcaption> يتبعه محتوى تنظيمي، أو محتوى تنظيمي فقط.
الوسم المختصر	لا يمكن حذف أيّ من وسمَي البداية أو النهاية.
العناصر الأب	أي عنصر يقبل المحتوى التنظيمي.
واجهة DOM	HTMLElement

دعم المتصفحات

Chrome	Firefox	Edge	Safari	Opera
8	4.0	مدعوم	5.1	11.10

الخاصيات

يمكن استخدام الخاصيات العامة في هذا العنصر.

ملاحظات الاستخدام

• يُمثِّل العنصر <figure> عادةً صورةً أو رسمةً أو مخططًا أو شيفرةً مصدريةً ...إلخ. التي يشار إليها ضمن المحتوى الرئيسي في الصفحة، لكن يمكن نقل العنصر إلى جزءٍ آخر من المستند أو إلى ملحقٍ ما دون أن يتأثر المحتوى الرئيسي.
• لا يظهر العنصر <figure> في التخطيط العام للمستند.
• تُضاف اللافتة إلى العنصر <figure> عبر إنشاء العنصر <figcaption> داخله، ويكون أوّل أو آخر ابن له.

أمثلة

عرض صورة

هذا المثال يستعمل العنصر <figure> مرتين، إذ يعرض أوّل مرة شعارًا، وفي المرة الثانية سيعرض شعارًا مع لافتة نصية:

<!-- شعار فقط -->
<figure>
  <img
  src="logo.png"
  alt="An awesome picture">
</figure>
<p></p>
<!-- شعار مع لافتة نصية -->
<figure>
  <img
  src="logo.png"
  alt="An awesome picture">	
  <figcaption>Fig1. Logo</figcaption>
</figure>
<p></p>

عرض شيفرة برمجية

أما هذا المثال فسيتعمل العنصر <figure> (مع لافتة عبر العنصر <figcaption>) لعرض شيفرة برمجية:

<figure>
  <figcaption>Get browser details
using navigator</figcaption>
  <pre>
function NavigatorExample() {
  var txt;
  txt = "Browser CodeName: " + navigator.appCodeName;
  txt+= "Browser Name: " + navigator.appName;
  txt+= "Browser Version: " + navigator.appVersion ;
  txt+= "Cookies Enabled: " + navigator.cookieEnabled;
  txt+= "Platform: " + navigator.platform;
  txt+= "User-agent header: " + navigator.userAgent;
}            
  </pre>
</figure>

عرض اقتباس

هذا المثال يستعمل العنصر <figure> لعرض اقتباس، مع استعمال العنصر <cite> لذكر مصدر اسم صاحب الاقتباس داخل العنصر <figcaption>:

<figure>
  <figcaption><cite>Edsger Dijkstra :-</cite></figcaption>
  <p>"If debugging is the process of removing software bugs,
  <br />
  then programming must be the process of putting them in"</p>
</figure>

عرض قصيدة شعرية

أما هذا المثال فيستعمل العنصر <figure> لعرض قصيدة شعرية، مع استخدام العنصر <cite> لذكر اسم القصيدة:

<figure>
 <p>
  Depression is running through my head,<br>
  These thoughts make me think of death,<br>
  A darkness which blanks my mind,<br>
  A walk through the graveyard, what can I find?....
 </p>
 <figcaption><cite>Depression</cite>.
  By: Darren Harris</figcaption>
</figure>

مصادر ومواصفات

• معيار HTML Living Standard.
• مواصفة HTML5.