عنصر <figure>

عنصر figure[/caption] عنصر <figure> براي اتصال با <figcaption> در نظر گرفته شده است که براي دياگرام ها، تصاوير، نمونه کد ها و ديگر محتواها استفاده مي شود. درباره <figure> مي توان گفت: عنصر يا تگ figure نمايانگر واحدي از محتوا مي باشد که ممکن است داراي عنوان باشد و بخشي از جريان اصلي محتواي مقاله را بر عهده دارد. نکته اينجاست با نقل مکان کردن قسمت figure از مقاله به جاي ديگر آن هيچ خللي بر محتواي مقاله ايجاد نميشود .

عنصر <figcaption>

تگ figcaption[/caption] عنصر <figcaption> در واقع موضوع عنصر figure را مشخص مي کند. در ابتدا مي خواستند به جاي معرفي يک عنصر جديد بنام figcaption از عنصر <legend> استفاده کنند. از ديگر پيشنهادات براي اين کار استفاده از عناصر <label> ، <caption> ، <p> و <h1> تا <h6> بود. استفاده از <legend> منتفي شد و ترکيبي از <dt> و <dd> درون figure پيشنهاد شد. بيشتر اين پيشنهادات به دليل سازگاري نه چندان با css منتفي اعلام شد. همه مي دانيم آنچه به تصويب رسيد تگ figcaption مي باشد. استفاده از اين تگ اختياري مي باشد و مي تواند قبل و يا بعد محتواي مد نظر figure نمايش داده شود. تنها يک عنصر figcaption مي تواند درون يک figure استفاده شود .اما عنصر figure مي تواند شامل عناصر ديگري همچون img ، code و ... باشد. استفاده از <figure> و <figcaption> بياييد روش استفاده استفاده از اين دو تگ را با استفاده از چند مثال توضيح دهيم:

تگ figure در استفاده براي يک تصوير

کد:

<figure>
    <img src="/orang-utan.jpg" alt="Baby Orang Utan hanging from a rope">
</figure>

تگ figure و figcaption براي يک تصوير

يک تصوير با يک تگ <figure> و <figcaption>:

کد:

<figure>
   <img src="/macaque.jpg" alt="Macaque in the trees">
   <figcaption>A cheeky macaque, Lower Kintaganban River, Borneo. Original by <a href="http://www.flickr.com/photos/rclark/">Richard Clark</a></figcaption>
</figure>

تگ figure با چندين تصوير:

چندين تصوير که همگي در يک عنصر<figure> قرار داده شده اند و براي همه آن ها يک عنوان در نظر گرفته شده است:

کد:

<figure>
   <img src="/kookaburra.jpg" alt="Kooaburra">
   <img src="/pelican.jpg" alt="Pelican stood on the beach">
   <img src="/lorikeet.jpg" alt="Cheeky looking Rainbow Lorikeet">
   <figcaption>Australian Birds. From left to right, Kookburra, Pelican and Rainbow Lorikeet. Originals by <a href="http://www.flickr.com/photos/rclark/">Richard Clark</a></figcaption>
</figure>

<small>
<a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution Share-alike license</a>
</small>

کد:

<figure>
   <blockquote><p><code>&lt;small&gt;&lt;a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution Share-alike license</a></small></code></p></blockquote>
   <figcaption>Using <code>&lt;small&gt;</code> around a <a href="http://creativecommons.org/choose/" title="Choose a License">Creative Commons license</a> link with <code>rel="license"</code></figcaption>
</figure>

نکته: