HTMLالوسم <figure>

تعريفه

نستخدم الوسم <figure> على هذا النحو <figure> </figure> لتخصيص مكان في الصفحة بهدف عرض صورة، كود أو رسم بداخله.
بداخل هذا الوسم يمكن إضافة الوسم <figcaption> لعرض وصف للشيء المعروض فيه و هذا الأمر يمكن فعله بشكل إختياري.

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

الجدول التالي يظهر المتصفحات التي تدعم الوسم <figure>.

خصائصه

لا يملك أي خصائص تم إعدادها خصيصاً له.

إستخدامه

في المثال التالي قمنا بعرض صورة و وصف خاص بها بداخل وسم <figure>.

<figure>
    <img src="planets.PNG">
    <figcaption>Fig 1 - The solar system.</figcaption>
</figure>

في المثال التالي قمنا بتحسين ظهور الصورة و الوصف الخاص بها بواسطة كود CSS.

figure {
    border: thin #c0c0c0 solid;
    display: flex;
    flex-flow: column;
    padding: 5px;
    max-width: 254px;
    margin: auto;
}

img {
    max-width: 254px;
    height: auto;
}

figcaption {
    background-color: #222;
    color: #fff;
    font: italic smaller sans-serif;
    padding: 6px 3px;
    text-align: center;
}

تصميمه الإفتراضي

بشكل عام جميع المتصفحات تعرضه بالتنسيق التالي.

figure {
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 40px;
    margin-right: 40px;
}