علیرضا احمدی بابلانی : وب مهراز - جامعه برنامه نویسان

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

عنصر <figure>

تگ figure

عنصر figure

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

عنصر <figcaption>

 

تگ figcaption

تگ figcaption

عنصر <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 و figcaption برای یک تصویر

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

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

کد:

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

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

 

kookaburra lorikeetpelican

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

کد:

تگ figure برای یک بلوک نمونه کد تگ figure می تواند برای نمونه کد ها استفاده شود:
استفاده از small قرار دادن متن لایسنس با استفاده از rel=”license”

کد:

نکته:

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

تعداد بازدید : 512
ارسال به دوستان

ارسال