با تشکر از شکیبایی شما سایت در حال بروزرسانی است.

عناصر <figure> و <figcaption> (تشریح کامل)

عنصر <figure>

 

تگ figure

 

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

 

عنصر <figcaption>

 

تگ 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> بدون عنوان يا کپشن:

کد:

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

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

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

 

 

اين تصويرنوعي ميمون دنياي قديمي داراي گونه هاي برامده را نشان مي دهد که در پايين رودخانه Kintaganban در Borneo زندگي مي کند.عکس توسط ريچارد کلارک گرفته شده است.

کد:

<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> قرار داده شده اند و براي همه آن ها يک عنوان در نظر گرفته شده است:

 

kookaburra lorikeetpelican

پرندگان استراليايي از چپ به راست Kookburra ، Pelican و Rainbow Lorikeet. عکس توسط ريچارد کلارک گرفته شده است.

کد:


<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>
تگ figure براي يک بلوک نمونه کد تگ figure مي تواند براي نمونه کد ها استفاده شود:
<small>
<a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution Share-alike license</a>
</small>
استفاده از small قرار دادن متن لايسنس با استفاده از rel=”license”

کد:


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

نکته:

نيازي نيست تا خودتان را مجبور کنيد که حتما فقط براي تصاوير و نمونه کد ها از figure استفاده کنيد. محتواي ديگري مانند صداها ، ويدئو ها . فيلم ها نمودار ها ، جداول و .. نيز مي توانند از اين تگ استفاده کنند. همچنين گاهي اوقات مثلا براي يک بنر گرافيکي نيازي به figure نداريد و به راحتي با استفاده از <img> و استفاده از صفت alt مي توانيد اين کار را انجام دهيد.

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

یادگیری SEO)

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران بپیوندید

مقالات مرتبط