عناصر <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

بررسی عملکرد موتور های جستجو افزایش رتبه الکسا با استفاده از Alexa Toolbar 7 فاکتور SEO در سال 2013 تاثیر رتبه نویسنده در SEO در سال 2013 سئو ، بازی استراتژیک یا رتبه دهی به ارزش واقعی محتوا ؟ برترین تکنیک های سئو در سال 2013 تست نسخه موبایل صفحات وب بیانیه Doctype اعتبار سند HTML شما رنگ ها ، کلید جذب بازدید کننده قوانینی برای تنظیم اندازه متن در صفحات وب 12 نکته از تکنیک های اساسی سئو 4 راه کار برای بالا بردن پیج رنک گوگل سئو و محتوای متناسب با آن 10 متد قدیمی سئو که دیگر نباید استفاده شود ری دایرکت و روش صحیح آن لینک خوب ، لینک بد : نکاتی مفید در مورد لینک گذاری عنوان صفحه ، شاه کلیدی برای ورود به صفحه وب شما 5 قاعده برای استفاده از کلمات کلیدی سئو 7 قدم برای داشتن وبلاگی جذاب 6 قانون برای استفاده از سئو و مزایای آن 9 گام اساسی برای جلب توجه مخاطب به وبلاگتان انتخاب URL ، اصول و مبانی 4 روند برتر استراتژیک سئو در 2013 نکاتی در مورد طراحی نسخه موبایل برای وب سایت 4 نکته که تازه واردها باید در مورد سئو بدانند 10 دلیلی که ما را ملزم به استفاده از HTML5 می کند 10 روش برتر برای افزایش رتبه الکسا 7 روش جدید برای بهبود رتبه سایت در گوگل جدیدترین های سئو در سال 2013 قوانین جدید برای موفقیت SEO در سال 2013 نوار وضعیت الکسا و یا نوار ابزار الکسا اشتباه SEO و راه های جلوگیری از آن بهینه سازی ویدیو برای موتورهای جستجو چگونه اطلاعات نویسنده را به وبسایت اضافه کنیم؟ 4 قانون برای نوشتن مطالب چند راه آسان برای تبلیغ سایت خود از طریق لینک ها سئو در فلش ، جاوا اسکریپت و jQuery . مشکل چیست؟ سئو ، بهینه سازی تصاویر تاثیر تبلیغات بر سئو وبسایت ها 3 ابزار رایگان سئو چه موقع ربات گوگل از سایت شما بازدید کرده است؟ HTML5 زبان نشانه گذاری الزامی برای موفقیت در سئو تگ های Figure و Figcaption در HTML5 عناصر <figure> و <figcaption> (تشریح کامل) اشتباهات و مشکلات متداول SEO ابزارهای ضروری برای سئو متا تگ ها و موتور های جستجو ( سئو متا تگ ها) 4 روش کاربردی برای تولید محتوای تک و مفید چرا باید به اعتبار دامنه اهمیت داد؟ رفع اشکالات مربوط به اطلاعات نویسنده در گوگل : آموزش گام به گام 20 نکته کوتاه اما مهم برای سئو راهنمای google webmaster tools برای حرفه ای های سئو نکاتی درباره طراحی وب سایت جهانی ( بین الملل ) Sitemap یا همان نقشه سایت چیست؟ 18 نکته کوتاه و مفید درباره سئو طراحی بهترین صفحه ” درباره ما “ 7 ترفند ساده برای ارتقای سئوی سایت در سال 2016

مقالات و دروس

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

   
   
عضویت
پیام تستی برای گروه نرم افزاری وب مهراز