تگ figure در HTML

181

منتشر شده در 22 می 2021

و آخرین بروزرسانی در 12 جولای 2021

دسته بندی ها:

از تگ figure در HTML برای ایجاد یک محتوای مستقل و علامت گذاری شده استفاده می شود ، همچنین از عنصر <figcaption> برای ایجاد عنوان در این تگ استفاده می شود.

مثال

<figure>
<img src="https://www.bubbleslearn.ir/wp-content/uploads/2019/09/matin-boronsi-pc-main.jpg" alt="Trulli" style="width:100%">
<figcaption>متین برونسی ، یک برنامه نویس ساکن ایران</figcaption>
</figure>

تعریف و کاربرد

محتوای درون تگ figure در HTML میتواند شامل: تصاویر ، نمودار ها ، ویدیو ها ، کد ها ، لیست ها ، موزیک ها و… باشد.

عنصر <figure> در HTML یک محتوای پیشنهاد شده در سند اصلی می باشد که بدون هیچ تأثیری میتوانید در موقعیت و بخش های دیگر سند قرار بگیرد و یا حذف بشود که این محتوای سند را تحت تأثیر قرار نمی دهد.

نکته: از تگ <figcaption> در عنصر <figure> برای ایجاد عنوان یا کپشن استفاده می شود.

پشتیبانی مرورگر ها

اعداد موجود در جدول اولین نسخه مرورگر را مشخص می کنند که به طور کامل عنصر را پشتیبانی می کند.

عنصر
`<figure>`	8.0	9.0	4.0	5.1	11.0

خواص عمومی

تگ figure از خواص عمومی در HTML پشتیبانی میکند.

رویداد های عمومی

تگ figure از رویداد های عمومی در HTML پشتیبانی میکند.

تنظیمات پیش فرض CSS

اکثر مرورگر ها عنصر figure در HTML را با تنظیمات پیش فرض زیر نمایش می دهند:

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

مثال های بیشتر

در این مثال با استفاده از CSS ویژگی های سفارشی شده به تگ <figcaption> اضافه کرده ایم:

<!DOCTYPE html>
<html dir="rtl">
<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>

<h1>عنصر figure و figcaption به همراه CSS</h1>

<figure>
<img src="https://www.bubbleslearn.ir/wp-content/uploads/2019/09/matin-boronsi-pc-main.jpg" alt="Matin Boronsi" style="width:100%">
<figcaption>متین برونسی ، یک برنامه نویس ساکن ایران</figcaption>
</figure>

</body>
</html>