معرفی و کاربرد تگ figure در HTML محتوای مستقل تصاویر

در این مقاله از سایت آموزی جهت استفاده شما همراهان گرامی به معرفی تگ <figure> در HTML می پردازیم.

تگ <figure> در اچ تی ام ال

"معرفی

تگ <figure> محتوای خود مانند تصاویر، نمودار ها، عکس ها، لیست کد و … را مشخص می کند.

در حالی که محتوای تگ <figure> با جریان اصلی سند مرتبط است، جایگاهی مستقل دارد و در صورتی که این تگ حذف شود، نباید تاثیری بر جریان اصلی بگذارد.

تگ <figure> یک تگ جدید در HTML5 است. و در نسخه های قبلی html وجود نداشت.

تگ <figure> مانند بسیاری از تگ های html دارای یک تگ باز ( opening tag ) و یک تگ بسته ( closing tag ) می باشد.

نکته مهم

تگ figcaption یک عنوان یا caption به تگ <figure> اضافه می کند.

این تگ می تواند به عنوان اولین یا آخرین عنصر داخل تگ <figure> قرار بگیرد. استفاده از این تگ اختیاری است .

مثال در مورد تگ <figure> در اچ تی ام ال

[html]<!DOCTYPE html>
<html>
<body>
<!– Just a figure –>
<figure> <img src=”https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png” alt=”An awesome picture”></figure>
<!– Figure with figcaption –>
<figure> <img src=”https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png” alt=”An awesome picture”>
<figcaption>Caption for the awesome picture</figcaption>
</figure>
</body>
</html>[/html]

خروجی کد در مرورگر اینترنتی

معرفی و کاربرد تگ figure در HTML محتوای مستقل تصاویر

معرفی و کاربرد تگ figure در HTML محتوای مستقل تصاویر

بررسی تگ <figure> در HTML 4.01 و HTML5

تگ <figure> یک تگ جدید در HTML5 است. و در HTML4.01 و نسخه های قدیمی تر وجود نداشت.

خصوصیات ویژه تگ <figure> در اچ تی ام ال

تگ <figure> هیچ خاصیت ویژه ای در سند HTML ندارد .

خصوصیات عمومی تگ <figure> در HTML

تگ <figure> از کلیه ویژگی های عمومی در سند HTML پشتیبانی می کند.

پشتیبانی مرورگرها از تگ  <figure> در اچ تی ام ال

تگ <figure> در همه مرورگرهای معتبر اینترنتی نظیر اینترنت اکسپلورر ، فایرفاکس ، اپرا ، گوگل کروم و سافاری پشتیبانی می شود.

در جدول زیر اولین نسخه ی مرورگرهای اینترنتی که به طور کامل از تگ <figure> در HTML پشتیبانی کردند را مشاهده می کنید:

پیوندهای مهم و کاربردی

تگ های HTML در سایت آموزی

تگ های جدید HTML5 در سایت آموزی

صفات تگ های HTML در سایت آموزی

تگ های منسوخ شده HTML5 در سایت آموزی

تگ های block level و inline level در سایت آموزی

تگ های HTML در W3school

ویژگی های CSS در سایت آموزی

ویژگی های CSS در W3schools

معرفی و کاربرد تگ figure در HTML محتوای مستقل تصاویر – اختصاصی سایت آموزی