HTML5 <figure> Tag

Introduction to HTML5 <figure> Tag

HTML5 से पहले किसी web page में diagram, उदाहरण और code आदि insert करने के लिए कोई specific tag नहीं था। इसके लिए दूसरे common tags जैसे की <div>, <p>, <img> और <table> आदि use किये जाते थे। ऐसा करने से search engines को ये पता नहीं चल पाता था की ये content code या diagram है। वे इन्हे <div>, <p>, <img> और <table> आदि elements के content की तरह ही handle करते थे। इस problem को solve करने के लिए HTML5 आपको <figure> tag provide करती है।

HTML5 का <figure> tag content की एक unit को represent करता है जो self contained होती है और page के main content flow से independent होती है। इसके साथ आप caption (शीर्षक) भी वैकल्पिक रूप से use कर सकते है। इस unit को remove करने से main content flow पर कोई affect नहीं पड़ता है। <figure> tag में mainly उदाहरण, diagram, photos और code include किये जाते है।

Advantages of HTML5 <figure> Tag

निचे <figure> tag की advantages दी जा रही है।

  • <figure> tag के साथ <figcaption> tag use किया जाता है। इस tag के द्वारा diagram, code, और उदाहरण आदि को शीर्षक दिया जा सकता है। इससे user की engagment और readability बढ़ती है। HTML5 से पहले images आदि को शीर्षक देने का कोई mechanism नहीं था।
  • <figure> tag के द्वारा search engines को page को read करने में आसानी होती है। इसे SEO के लिए बेहतर माना जाता है।
  • Web page में code आदि include करने के लिए <div> या <p> की आवश्यकता नहीं होती है।

Difference Between <img> and <figure> Tags

कई बार developers <img> और <figure> tag को समान समझ लेते है। निचे ऐसे कुछ points दिए जा रहे है जिनसे आपको इनके बीच का difference clear हो जाएगा।

  • <img> tag के द्वारा include की गयी images web page से linked होती है उसमें included नहीं होती है। <img> tag एक खाली space create करता है जो page load होते समय URL पर दी गयी image द्वारा भर जाता है। दूसरी तरफ <figure> tag का content web page में ही included होता है।
  • <img> tag के द्वारा link की गयी images को शीर्षक देने के लिए आपको <p> आदि दूसरे tags use करने होंगे। इस शीर्षक को कोई search engines भी read नहीं कर सकेंगे। दूसरी तरफ <figure > tag में आप <figcaption> tag को use करते हुए diagram, code और उदाहरण आदि को शीर्षक दे सकते है जो search engines द्वारा आसानी से readable होता है। <figcaption> tag को <figure> tag से पहले, बाद में या फिर अंदर कँही भी use किया जा सकता है।

Syntax of HTML5 <figure> Tag

<figure> tag का syntax निचे दिया जा रहा है।

<figure>
code, diagram, example etc.
</figure>

जैसा की आप ऊपर दिए गए syntax को देख सकते है ये <figure> tag का standard syntax है। यदि आप <figure> tag में include किये गए content जैसे की diagram या उदाहरण आदि को शीर्षक देना चाहते है तो इसके लिए <figcaption> tag को use कर सकते है। इसका syntax निचे दिया जा रहा है।

<figure>
code, diagram, example etc.
<figcaption>...Caption Here...</figcaption>
</figure>

Attributes of HTML5 <figure> Tag

<figure> tag के साथ कोई भी element specific attribute available नहीं है। <figure> सभी global attributes जैसे की class, id आदि को support करता है।

<figure id="HTML-code">
//Content Here
</figure>

//Other tags here
<figure id="JavaScript-code">
//Content Here
</figure>

Styling HTML5 <figure> Tag

CSS के द्वारा आप <figure> tag को style कर सकते है। इसका उदाहरण निचे दिया जा रहा है।

figure
{
    display:block;
    color:red;
}

HTML5 का <figure> tag सभी global event attributes को support करता है।

tag के साथ ये events कई प्रकार से उपयोग किये जा सकते है। उदाहरण के लिए onclick event को handle करके आप user के diagram पर click करने पर diagram को full screen में show कर सकते है।

<figure onclick="script-code">
//Content Here
</figure>

Example:

<html>
<head>

<style>
figure
{
    display:block;
}
</style>

</head>
<body>

<p>This example illustrates the use of HTML5 figure tag. <br>This tag is used to include code, diagram or examples etc. <br>After this paragraph an image and its caption is displayed using figure tag.
</p>

<figure>
<img src="/HMP-logo.jpg" alt="Hindi-Me-Padhai-Logo" width="200" height="200">

<figcaption>Hindi Me Padhai Logo</figcaption>

</figure>

</body>
</html>

Related Posts