العنصر <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="wiki-hsoub.jpg" alt="شعار موسوعة حسوب">
</figure>
<p></p>
<!-- شعار مع لافتة نصية -->
<figure>
<img src="wiki-hsoub.jpg" alt="شعار موسوعة حسوب">
<figcaption>شعار الموسوعة</figcaption>
</figure>
عرض شيفرة برمجية
أما هذا المثال فسيتعمل العنصر <figure> (مع لافتة عبر العنصر <figcaption>) لعرض شيفرة برمجية:
<figure>
<figcaption>الحصول على معلومات المتصفح</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>إدسخر ديكسترا:</cite></figcaption>
<q>إذا كان التنقيح هو عملية إزالة العلل، فالبرمجة هي عملية إضافة العلل.</q>
</figure>
عرض قصيدة شعرية
أما هذا المثال فيستعمل العنصر <figure> لعرض قصيدة شعرية، مع استخدام العنصر <cite> لذكر اسم القصيدة:
<figure>
<p>وقد أغتدي والطير في وكناتها بمنجر قيد الأوابد هيكل</p>
<figcaption><cite>معلقة امرؤ القيس</cite>.</figcaption>
</figure>
التنسيق الافتراضي
تعرض أغلبية المتصفحات العنصر <figure> بضبط الخاصية display إلى block، وضبط قيمة margin-top و margin-bottom إلى 1em، وقيمة margin-left و margin-right إلى 40px:
figure {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;
}
مصادر ومواصفات
- معيار HTML Living Standard.
- مواصفة HTML5.