ہیٹ موڈ <figure> ٹیگ

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

<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 میں رخداد نماد.

مقصد کا سی ایس ایس سی تنظیمات

بہترین بروسرز اس کی مندرجہ بالا مقدار کو دکھائیں گے <figure> عنصر:

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

نو خود سنجیدگی سے کوشاں

بروسر سپورٹ

جداول میں نمبر اس کی ابتدائی بروسر ورژن کو کاوت کردیا گیا ہے جس میں اس عنصر کو پورا طور پر سپورٹ کیا گیا تھا۔

کروم ایج فائر فاکس سافری آپریا
کروم ایج فائر فاکس سافری آپریا
8.0 9.0 4.0 5.1 11.0

توضیح: <figure> تگ HTML 5 میں نئی تگ ہے۔