تگ های 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 بدین شکل استفاده می شود:
<figure id="figure1">
<img src="figure1.gif" alt="Figure 1: An image">
</figure>
و یا می توان با تگ figcaption این کار را انجام داد:
<figure id="figure2">
<img src="shasta.jpg" alt="My Dog Shasta">
<figcaption>My Dog Shasta</figcaption>
</figure>
تگ figcaption می تواند اول بیاید و شما می تواند چندین تصویر را درون تگ figure قرار دهید:
<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>

نظر شما

یادگیری SEO

بررسی عملکرد موتور های جستجو افزایش رتبه الکسا با استفاده از Alexa Toolbar 7 فاکتور SEO در سال 2013 تاثیر رتبه نویسنده در SEO در سال 2013 سئو ، بازی استراتژیک یا رتبه دهی به ارزش واقعی محتوا ؟ برترین تکنیک های سئو در سال 2013 تست نسخه موبایل صفحات وب بیانیه Doctype اعتبار سند HTML شما رنگ ها ، کلید جذب بازدید کننده قوانینی برای تنظیم اندازه متن در صفحات وب 12 نکته از تکنیک های اساسی سئو 4 راه کار برای بالا بردن پیج رنک گوگل سئو و محتوای متناسب با آن 10 متد قدیمی سئو که دیگر نباید استفاده شود ری دایرکت و روش صحیح آن لینک خوب ، لینک بد : نکاتی مفید در مورد لینک گذاری عنوان صفحه ، شاه کلیدی برای ورود به صفحه وب شما 5 قاعده برای استفاده از کلمات کلیدی سئو 7 قدم برای داشتن وبلاگی جذاب 6 قانون برای استفاده از سئو و مزایای آن 9 گام اساسی برای جلب توجه مخاطب به وبلاگتان انتخاب URL ، اصول و مبانی 4 روند برتر استراتژیک سئو در 2013 نکاتی در مورد طراحی نسخه موبایل برای وب سایت 4 نکته که تازه واردها باید در مورد سئو بدانند 10 دلیلی که ما را ملزم به استفاده از HTML5 می کند 10 روش برتر برای افزایش رتبه الکسا 7 روش جدید برای بهبود رتبه سایت در گوگل جدیدترین های سئو در سال 2013 قوانین جدید برای موفقیت SEO در سال 2013 نوار وضعیت الکسا و یا نوار ابزار الکسا اشتباه SEO و راه های جلوگیری از آن بهینه سازی ویدیو برای موتورهای جستجو چگونه اطلاعات نویسنده را به وبسایت اضافه کنیم؟ 4 قانون برای نوشتن مطالب چند راه آسان برای تبلیغ سایت خود از طریق لینک ها سئو در فلش ، جاوا اسکریپت و jQuery . مشکل چیست؟ سئو ، بهینه سازی تصاویر تاثیر تبلیغات بر سئو وبسایت ها 3 ابزار رایگان سئو چه موقع ربات گوگل از سایت شما بازدید کرده است؟ HTML5 زبان نشانه گذاری الزامی برای موفقیت در سئو تگ های Figure و Figcaption در HTML5 عناصر <figure> و <figcaption> (تشریح کامل) اشتباهات و مشکلات متداول SEO ابزارهای ضروری برای سئو متا تگ ها و موتور های جستجو ( سئو متا تگ ها) 4 روش کاربردی برای تولید محتوای تک و مفید چرا باید به اعتبار دامنه اهمیت داد؟ رفع اشکالات مربوط به اطلاعات نویسنده در گوگل : آموزش گام به گام 20 نکته کوتاه اما مهم برای سئو راهنمای google webmaster tools برای حرفه ای های سئو نکاتی درباره طراحی وب سایت جهانی ( بین الملل ) Sitemap یا همان نقشه سایت چیست؟ 18 نکته کوتاه و مفید درباره سئو طراحی بهترین صفحه ” درباره ما “ 7 ترفند ساده برای ارتقای سئوی سایت در سال 2016

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران بپیوندید

   
   
عضویت
پیام تستی برای وبساز