برچسب <figure> HTML

تعریف و استفاده

<figure> برچسب‌ها محتوای خودکار را مشخص می‌کنند، مانند تصاویر، نمودارها، عکس‌ها، لیست‌های کد و غیره.

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

توضیح:لطفاً از عنصر <figcaption> برای <figure> عنوان به عنصر اضافه کنید.

لطفاً به:

دستورالعمل HTML DOM:موضوع Figure

مثال

مثال 1

استفاده از علامت <figure> برای برچسب‌گذاری عکس‌ها در مستند، و استفاده از علامت <figcaption> برای تعریف عنوان عکس:

<figure>
  <img src="trulli.jpg" alt="ترولی" style="width:100%">
  <figcaption>تصویر 1 - ترولی‌های منطقه پولیا ایتالیا.</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="ترولی" style="width:100%">
  <figcaption>تصویر 1 - ترولی‌های منطقه پولیا ایتالیا.</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 است.