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

تگ های Figure و Figcaption در HTML5

تگ برچسب figure

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

تگ برچسب figcaption

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

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

همه تصایر از تگ figure استفاده نمی کنند

استفاده از figure ممکن است بسیار وسوسه انگیز باشد که برای تمامی تصاویر موجود در صفحه وب یک تگ figure تعریف کنید اما این روش ، روش صحیحی نیست.
برای استفاده صحیح و بهتر ازتگ figure شما باید روی چگونگی استفاده از تصاویر فکر کنید. و اگر جواب شما به پرسش های زیر مثبت باشد باید از تگ figure استفاده کنید:

  • آیا تصویر بخشی از محتوای صفحه است؟
  • آیا می توانم تصویر را در هر جایی استفاده کنم بدون آنکه معنا را تغییر دهد؟
  • اگر تصویر را در بیرون از آن مقاله استفاده کنم معنای خود را حفظ می کند؟

و کی شما نباید از تگ figure برای تصاویر استفاده کنید:

    • آیکون ها و عکس های استفاده شده در منو ها و لینک ها
    • لوگوی وبسایت
    • تصاویری که باید در مکان خاصی از مقاله قرار گیرند مانند مقالاتی که آموزش گام به گام با تصاویر ارائه می دهند

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

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

و یا می توان با تگ figcaption این کار را انجام داد:

تگ figcaption می تواند اول بیاید و شما می تواند چندین تصویر را درون تگ figure قرار دهید:

1
2
3
4
5
<figure id="figure3">
<figcaption>Figure 1: My Dogs Shasta and McKinley</figcaption>
<img src="shasta.jpg" alt="My Dog Shasta">
<img src="mckinley.jpg" alt="My Dog McKinley">
</figure>
تعداد بازدید : 374
ارسال به دوستان

ارسال