معرفی و کاربرد تگ figure در HTML
معرفی و کاربرد تگ 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 4.01 و HTML5
تگ <figure> یک تگ جدید در HTML5 است. و در HTML4.01 و نسخه های قدیمی تر وجود نداشت.
خصوصیات ویژه تگ <figure> در اچ تی ام ال
تگ <figure> هیچ خاصیت ویژه ای در سند HTML ندارد .
خصوصیات عمومی تگ <figure> در HTML
تگ <figure> از کلیه ویژگی های عمومی در سند HTML پشتیبانی می کند.
پشتیبانی مرورگرها از تگ <figure> در اچ تی ام ال
تگ <figure> در همه مرورگرهای معتبر اینترنتی نظیر اینترنت اکسپلورر ، فایرفاکس ، اپرا ، گوگل کروم و سافاری پشتیبانی می شود.
در جدول زیر اولین نسخه ی مرورگرهای اینترنتی که به طور کامل از تگ <figure> در HTML پشتیبانی کردند را مشاهده می کنید:
تگ | مرورگر فایرفاکس | مرورگر اینترنت اکسپلورر | مرورگر گوگل کروم | مرورگر سافاری | مرورگر اپرا |
figure | 4.0 به بالا | 9.0 به بالا | 6.0 به بالا | 5.0 به بالا | 11.1 به بالا |
پیوندهای مهم و کاربردی
تگ های جدید HTML5 در سایت آموزی
صفات تگ های HTML در سایت آموزی
تگ های منسوخ شده HTML5 در سایت آموزی
تگ های block level و inline level در سایت آموزی
معرفی و کاربرد تگ figure در HTML محتوای مستقل تصاویر – اختصاصی سایت آموزی
درباره سایت آموزی
علیرضا ابراهیمی - بنیانگذار وبسایت آموزشی سایت آموزی ، 8 سال سابقه فعالیت حرفه ای در زمینه طراحی سایت ، سئو ، سابقه تدریس اغلب زبان های برنامه نویسی تحت وب ، محقق و تحلیلگر ساختارهای توسعه دهنده وب
نوشته های بیشتر از سایت آموزی
دیدگاهتان را بنویسید