<figure> و <figcaption>

همانطور که می دانید استفاده از تصاویر جهت ارائه مطالب بسیار می تواند تاثیر گذارتر باشد از یک مطلب بدون تصویر. استفاده از تصاویر در یک صفحه وب با استفاده از تگ img صورت می گیرد. ولی هر تصویری یک توضیح خاصی را نیز به همراه دارد (منظور صفت title و alt است) ولی بعضی مواقع موردنیاز است توضیح تصویری در کنار آن تصویر باشد (مانند اسلایدر ها که همراه تصویر توضیح مورد نظرش نیز در کنارش قرار می گیرد). HTML5 جهت بهینه سازی کدها، برای ایجاد چنین حالاتی که نیاز است، یک تصویر یا متن به همراه توضیحاتش نمایش داده شود دو تگ figure و figcaption را معرفی کرد.

به کد زیر توجه کنید.

ds

البته این تگ فقط مخصوص تگ img نیست، برای سایر تگ ها که نیاز به توضیح دارند، و بایستی همراه با توضیحشان در یک تگ جهت کنترلشان قرار بگیرند ازتگ های figure و figcaption استفاده می کنیم به طور مثال

cap

نکته ای که بایستی به آن توجه کنید، آمدن تگ figcaption یا به عنوان اولین فرزند تگ figure یا آخرین فرزند است. در ضمن می توانید بیش از یک تگ به همراه تگ figcaption استفاده کنید به طور مثال :

html