एचटीएमएल <आंकड़ा> टैग
उदाहरण
किसी दस्तावेज़ में फ़ोटो को चिह्नित करने के लिए <figure> तत्व का उपयोग करें, और फ़ोटो के लिए कैप्शन को परिभाषित करने के लिए <figcaption> तत्व का उपयोग करें:
<figure>
<img src="pic_trulli.jpg" alt="Trulli"
style="width:100%">
<figcaption>Fig.1 - Trulli, Puglia,
Italy.</figcaption>
</figure>
नीचे और अधिक "इसे स्वयं आज़माएं" उदाहरण।
परिभाषा और उपयोग
टैग स्व-निहित सामग्री को <figure>
निर्दिष्ट करता है, जैसे चित्र, आरेख, फ़ोटो, कोड सूची, आदि।
जबकि <figure>
तत्व की सामग्री मुख्य प्रवाह से संबंधित है, इसकी स्थिति मुख्य प्रवाह से स्वतंत्र है, और यदि इसे हटा दिया जाता है तो इसे दस्तावेज़ के प्रवाह को प्रभावित नहीं करना चाहिए।
युक्ति: < figcaption> तत्व का उपयोग तत्व के लिए एक कैप्शन जोड़ने के लिए किया जाता है <figure>
।
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो पूरी तरह से तत्व का समर्थन करता है।
Element | |||||
---|---|---|---|---|---|
<figure> | 8.0 | 9.0 | 4.0 | 5.1 | 11.0 |
वैश्विक गुण
<figure>
टैग HTML में वैश्विक विशेषताओं का भी समर्थन करता है ।
घटना गुण
<figure>
टैग HTML में ईवेंट विशेषताओं का भी समर्थन करता है ।
और ज्यादा उदाहरण
उदाहरण
<figure> और <figcaption> को स्टाइल करने के लिए CSS का उपयोग करें:
<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="pic_trulli.jpg" alt="Trulli" style="width:100%">
<figcaption>Fig.1
- Trulli, Puglia, Italy</figcaption>
</figure>
</body>
</html>
संबंधित पृष्ठ
HTML DOM संदर्भ: चित्र वस्तु
डिफ़ॉल्ट सीएसएस सेटिंग्स
अधिकांश ब्राउज़र <figure>
निम्न डिफ़ॉल्ट मानों के साथ तत्व प्रदर्शित करेंगे:
उदाहरण
figure {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;
}