HTML <figure> टैग

वर्णन और उपयोग

<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;
}

अपने आप साबित करें

ब्राउज़र समर्थन

तालिका में नंबर इस तत्व को पूरी तरह से समर्थन देने वाले पहले ब्राउज़र का संस्करण को इंगित करते हैं。

च्रोम एज फायरफॉक्स सफारी ऑपेरा
च्रोम एज फायरफॉक्स सफारी ऑपेरा
8.0 9.0 4.0 5.1 11.0

टिप्पणी：<figure> टैग HTML 5 में नई टैग है。