سرخط خبرها

تگ figure و figcaption در HTML5

تگ figure و figcaption در HTML5
تگ figure و figcaption در HTML5

تگ های figure و figcaption در html5

در این مقاله می خواهیم در مورد دو تا تگ جدید در html5 صحبت کنیم یعنی تگ figure و figcaption. این تگ ها برای محتوا سایت استفاده میشوند

قبلا در html ما برای قرار دادن نمودارها، چارت ها، عکس ها و کدها تگ خاصی نداشتیم ولی در html5 برای این نوع استفاده ها تگ خاصی در نظر گرفته شده است و البته ما برای این موارد همیشه احتیاج به یک توضیح خاص در ابتدا یا انتها داشتیم که قبلا زحمت این کار و به عهده css قرار میدادیم که html5 سعی کرده است با معرفی دو تگ figure و figcaption این کارها را به انجام برساند.

همانطور که می دانید استفاده از تصاویر جهت ارائه مطالب بسیار می تواند تاثیر گذارتر باشد از یک مطلب بدون تصویر. استفاده از تصاویر در یک صفحه وب با استفاده از تگ img صورت می گیرد. ولی هر تصویری یک توضیح خاصی را نیز به همراه دارد (منظور صفت title و alt است) ولی بعضی مواقع موردنیاز است توضیح تصویری در کنار آن تصویر باشد (مانند اسلایدر ها که همراه تصویر توضیح مورد نظرش نیز در کنارش قرار می گیرد). HTML5 جهت بهینه سازی کدها، برای ایجاد چنین حالاتی که نیاز است، یک تصویر یا متن به همراه توضیحاتش نمایش داده شود دو تگ figure و figcaption را معرفی کرد.

 

تگ figure

تگ figure و figcaption در HTML5

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

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

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

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

نکته:
– Figure ها فقط مختص تصاویر نیستند.

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

-این تگ در تمام مرورگرهای مطرح پشتیبانی می شود .

 

 

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

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

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

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

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

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

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

شکل کلی تعریف یک تگ < figure > بصورت زیر است :

 

<figure>   محتویان مورد نظر درون تگ      </figure>

در مثال های زیر ، نحوه استفاده از تگ < fiqure > را در عمل نمایش داده ایم :

مثال استفاده از تگ <figure>
<figure>
  <img src="html5.jpg" alt="learning html5" width="300" height="200">
</figure>

با figcaption شما می توانید به تگ figure در توصیف شرح تصاویر کمک کنید.

<figure>
    <img src="html5.png" alt="learning html5">
    <figcaption>Web Design by html5!</figcaption>
</figure>

البته تگ figure فقط مخصوص تگ img نیست، برای سایر تگ ها که نیاز به توضیح دارند، و بایستی همراه با توضیحشان در یک تگ جهت کنترلشان قرار بگیرند ازتگ های figure و figcaption استفاده می کنیم

به طور مثال:

<figure>
    <figcaption>HTML</figcaption>
    <p>Hypertext Markup Language<p>
</figure>

<html>
<body>
<!-- Just a figure -->
<figure>
<img src="http://ax.jizjiz.ir/ax/figure1-jizjiz-ir.png" alt="An awesome picture">
</figure>
<p></p>
<!-- 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>
<p></p>
</body>
</html>
  <html>
<body>
<p>The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden, opposite the Kjerag plateau, in Forsand, Ryfylke, Norway. The top of the cliff is approximately 25 by 25 metres (82 by 82 feet) square and almost flat, and is a famous tourist attraction in Norway.</p>
<figure>
  <img src="http://compiler.ir/wp-content/uploads/2014/09/img.png" alt="The Pulpit Rock" width="304" height="228">
</figure>
</body>
</html>

 

تگ figcaption

تگ figure و figcaption در HTML5

تگ figcaption بیان کننده یک توضیح یا راهنما برای تگ figure می باشد.

*ما فقط از یک تگ figcaprion می توانیم داخل تگ figure استفاده کنیم و این تگ باید اول یا آخر تگ figure استفاده شود.

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

*این نکته هم قابل توجه است که ما می توانیم داخل تگ figure از تگ figcaption استفاده نکنیم.

تگ <figcaption> عنوانی را به عنصر <figure> اختصاص می دهد.

تگ <figcaption> از تگ های جدید موجود در HTML5 است.

محتواهایی که برای تگ figure قابلیت استفاده دارد شامل: قسمت های صوتی و تصویری،چارت ها، تگ Canvas یا SVG، اشعار و حتی جداول نیز میباشد

از تگ < figcaption > ، برای تعیین یک عنوان برای تگ < fiqure > استفاده می شود .

<figure>
      .....      figure محتویات تگ   .....
<figcaption>
عنوان یا توضیح مورد نظر
/figcaption>

</figure>

به مثال دقت نمایید :

 

<figure>
 <img src="/figcaption.jpg" alt="figcaption">
 <figcaption> توضیحات مربوط به عکس </figcaption>
</figure>
 
<figure>
  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>Fig1. - A view of the pulpit rock in Norway.</figcaption>
</figure>

به مثال دقت نمایید :

<p>
     ASP.Net is a very poewrfull language .
</p>

<figure>
      <img src="../Pic/ADS/ASP.gif" alt="ASP.Net" width="200" height="120">
      <figcaption>
            Figure 1 . ASP.Net
       </figcaption>
</figure>


ASP.Net is a very poewrfull language .

ASP.Net
Figure 1 . ASP.Net

 

نکته ای که بایستی به آن توجه کنید، آمدن تگ figcaption یا به عنوان اولین فرزند تگ figure یا آخرین فرزند است.

در ضمن می توانید بیش از یک تگ به همراه تگ figcaption استفاده کنید

به طور مثال :

<figure>
    <figcaption>HTML</figcaption>
    <p>Hypertext Markup Language<p>
    <img src="html.png" alt="HTML" >
</figure> 
QR Code For: تگ figure و figcaption در HTML5

درباره ی jizjiz

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Time limit is exhausted. Please reload CAPTCHA.