آموزش تگ figure در html

آموزش تگ figure در html

تگ Figure یک تگ جدید می باشد که با html5 ارائه شده است که به طراحان وب اجازه می دهد تا به توصیف تصاویر و یا دیگر محتوایی که خوانده شدن آن ها توسط موتور های جستجو دشوار است بپردازند.
یک تگ figure می تواند محتوای واقعی تصویر را برای موتور های جستجو مشخص کند و یا حتی می تواند چیزی جدا از محتوای واقعی موجود در تصویر و یا فیلم را ارائه دهد.
کلید کار اینجا این است که figure برای توصیف محتوای اصلی تصاویری که جزوی از محتوای اصلی مقاله هستند ضروری است، اما موقعیت آن در آن صفحه می تواند بدون تاثیرگذاری روی معنای محتوا تغییر پیدا کند.
با figcaption شما می توانید به تگ figure در توصیف شرح تصاویر کمک کنید.
Figure ها فقط مختص تصاویر نیستند. بیشتر استفاده های متداول از تگ figure در تصاویر می باشد که با تگ figcaption نیز شرحی برای آن تصاویر داده می شود اما figure ها تنها برای تصاویر ساخته نشده اند.
شما می توانید یک بلوک از کد ها، و یا قسمتی که نقل قول شده است اما جزو جریان اصلی نوشته نیست را با figure توصیف کنید.

تگ figure در html

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

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

تگ فیگور مانند تگ های دیگر دارای یک تگ باز(open) ، و یک تگ بسته(close) است.

تگ figure تگی است که با استفاده از آن میتوان محتوای مستقلی همچون ( تصاویر ، نمودارها ، کدها ، لیست ها و.. ) را در یک صفحه ی وب تعریف نمود.

خوب کجا باید از تگ figure استفاده کنیم؟

• تصاویر چه دارای caption باشند و چه خیر می توانند از تگ figure استفاده کنند.
• نمونه های کد که در خارج از محتوای نوشته قرار دارند می توانند از تگ figure استفاده کنند.
• فیلم ها و ویدئو هایی که با محتوای نوشته هم سو هستند می توانند از تگ figure استفاده کنند.
• نظرات و یا نقل قول هایی که با مقاله اصلی مرتبط هستند می توانند از تگ figure استفاده کنند.
• نقشه تصاویر یا همان image map ها که قسمت های مختلف آن ها که قسمت وظیفه ای را به عهده دارند می تواند توسط تگ figure توصیف شوند.

فرق تگ img و figure در html

شاید این سوال در ذهن برخی از کاربران باهوش پاسخ وردپرس پیش بیاید که چه تفاوتی بین تگ Img و Figure است.در ادامه با ما همراه باشید تا تفاوت این دو را بررسی کنیم.

تفاوت بین figure و img بسیار ساده است. img برای جاسازی تصویر در یک سند HTML استفاده می شود در حالی که تگ figure برای سازماندهی معنایی محتوای یک تصویر در سند HTML استفاده می شود.
توجه به این نکته ضروری است که این دو عنصر قابل تعویض نیستند.
هر دوی این عناصر در مکان های مربوطه به یک اندازه اهمیت دارند.
شما نمی توانید از تگ figure برای جاسازی تصویر در سند HTML5 استفاده کنید ، سعی کنید ویژگی src را به تگ figure به جای تگ img اضافه کنید ، و متوجه خواهید شد که تصویر نمایش داده نمی شود.
بنابراین ، برای افزودن تصویر ، هیچ چیزی در اسناد HTML5 تغییر نکرده است ، ما هنوز از تگ img برای همان استفاده می کنیم.
پس در این صورت چه چیزی تغییر کرده است؟
قبل از HTML5 اگر نیازی به اضافه کردن عنوان برای تصویر بود ، باید از تگ p یا تگ span استفاده می کردیم و با تعریف کلاس برای آن ، می توانستیم کپشن ها را ایجاد کنیم.
بنابراین ، راهی برای افزودن کپشن به تصویر از طریق HTML وجود نداشت ، اما با تگ فیگور ، یک تگ اختصاصی فقط برای کپشن / عنوان های تصویر معروف به وجود دارد.
این تگ به طور پیش فرض سبک های پاراگراف معمول را با زیرنویس ها جدا می کند.
اما استفاده از تگ figcaption در هر بار استفاده از تگ فیگور اجباری نیست ، اختیاری است.

آموزش تگ figcaption در جلسات آینده به صورت کامل آموزش داده خواهد شد نگران نباشید .

مثال از تگ figure در HTML5

مثال شماره ۱ : استفاده خالی از figure

مثال شماره ۲ : مشخص کردن کپشن برای تگ figure با استفاده از تگ figcaption

پشتیبانی از صفات و رویدادهای عمومی

تگ figure از صفات عمومی و رویدادهای عومی در HTML پشتیبانی می کند

نکات و توضیحات تگ figure

تگ figure یک تگ جدید/اضافه شده در HTML5 می باشد.

با استفاده از تگ figcaption میتوان برای محتوای تگ figure یک عنوان/کپشن مشخص کرد.

روش استفاده از تگ ها figure و figcaption

وقتی شما ایک تگ figure در صفحه وب خود قرار می دهید ، مرورگر ها باید تصایر و یا دیگر محتوای درون figure را در یک بلوک قرار دهند (شبیه div می باشد).
اگر شما نیاز به استایل خاصی برای figure داریدمی توانید از css استفاده کنید. تگ figure بدین شکل استفاده می شود:

دستورات CSS پیش فرض تگ figure

دانلود فایل این جلسه

برای نصب نرم افزار برای کد نویسی html از لینک زیر استفاده فرمایید.

آموزش نرم افزار های مورد نیاز طراحی وب سایت

در صورت که به طراحی وب آشنایی ندارید میتوانید از آموزش زیر استفاده فرمایید .

طراحی وب

در صورت که میخواهید به صورت حرفه ای طراحی وب را فرا بگیرید از لینک زیر استفاده فرمایید .

آموزش css html آموزش HTML5 CSS3

در یافت تمام جلسات آموزش مرحله به مرحله html از لینک زیر استفاده فرمایید.

آموزش html