علامة <figure> في HTML

التعريف والاستخدام

<figure> العلامة تحدد المحتوى المدمج، مثل الرسومات، والرسوم البيانية، والصور، قائمة التعليمات البرمجية، وما إلى ذلك.

بالرغم من <figure> محتوى العنصر مرتبط بالمحتوى الرئيسي، ولكن موقعه مستقل عن تيار المحتوى الرئيسي، وإذا تم حذفه، لا يجب أن يؤثر على تيار المستند.

نصيحة:يرجى استخدام <figcaption> العنصر لـ <figure> إضافة عنوان إلى العنصر.

يرجى الرجوع أيضًا إلى:

دليل HTML DOMمفهوم Figure

مثال

مثال 1

استخدام عنصر <figure> لتحديد الصور في المستند، واستخدام عنصر <figcaption> لتعريف عنوان الصورة:

<figure>
  <img src="trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>الشكل 1 - Trulli في منطقة بوليا بإيطاليا.</figcaption>
</figure>

جرب بنفسك

مثال 2

استخدام CSS لتعيين نماذج <figure> و <figcaption>:

<html>
<head>
<style>
figure {
  border: 1px #cccccc solid;
  padding: 4px;
  margin: auto;
}
figcaption {
  background-color: black;
  color: white;
  font-style: italic;
  padding: 2px;
  text-align: center;
}
</style>
</head>
<body>
<figure>
  <img src="trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>الشكل 1 - Trulli في منطقة بوليا بإيطاليا.</figcaption>
</figure>
</body>
</html>

جرب بنفسك

خصائص العالمية

<figure> الدعم لـ خصائص العالمية في HTML.

خصائص الحدث

<figure> الدعم لـ خصائص الحدث في HTML.

إعدادات CSS الافتراضية

سيستخدم معظم المتصفحات القيم التالية كقيم افتراضية <figure> العنصر:

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

جرب بنفسك

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

الرقم في الجدول يوضح إصدار المتصفح الذي يدعم العنصر لأول مرة.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
8.0 9.0 4.0 5.1 11.0

التعليق: العلامة <figure> هي علامة جديدة في HTML 5.