جلسه ی چهل و ششم: تگ Figure در HTML

تگ Figure در HTML

در جلسه ی پیش در مورد تگ article صحبت کردیم (برای دیدن آموزش تگ article در HTML کلیک کنید.) در این جلسه میخواهیم درباره تگ Figure در HTML صحبت کنیم. (برای دیدن آموزش Html به زبان ساده کلیک کنید)

توضیح تگ Figure در HTML

عموما از تگ Figure در HTML برای قرار دادن یک جزء خاص استفاده می شود که می تواند به به محتویات ما مربوط باشد (شاید هم نباشد) اما به صورت مستقل از محتوا بوده و در صورتی که پاک شود مشکلی در محتویات ما پیش نمی آید. تگ Figure در HTML یک تگ جدید بوده و در نسخه ی پنجم همین زبان نشانه گذاری اضافه شده است. این تگ در تمامی مرورگر های اینترنتی پشتیبانی می شود.از تگ Figure در HTML باید به درستی استفاده کنیم تا در بخش سئو برای ما کاربرد خوبی داشته باشد. به طور کلی تگ Figure بیان کننده ی قسمتی از صفحه می باشد.

 

تگ Figcaption در HTML

عموما هر عنصری که در تگ Figure قرار می دهیم نیازمند توضیحات و یا عنوان می باشد. به همین منظور از تگ Figcaption در تگ Figure استفاده می کنیم. به وسیله ی تگ Figcaption می توانید به تگ Figure عنوان و با توضیحات خود را اضافه کنید. این تگ می تواند به قسمت بالایی و یا پایینی تگ Figure خود اضافه شود.

 

کاربرد Figure در HTML

یکی از کاربرد های تگ Figure عکس ها می باشند. شاید شما بخواهید علاوه بر نمایش عکس توضیحات آن نیز در کنار آن نشان داده شود. در این صورت باید از تگ IMG و از خصوصیت Title در کنار آن استفاده کنید. در HTML5 این مشکل حل شده و شما می توانید به وسیله ی تگ Figure عکس مورد نظر خود را قرار دهید و سپس به وسیله ی تگ Figcaption می توانید عنوان و یا توضیحات مورد نظر خود برای عکس مورد نظرتان را بنویسید.

در نسخه های قبلی زبان نشانه گذاری HTML ما برای قرار دادن نمونه کد ها، چارت ها، دیاگرام ها و… کد خاصی نداشتیم اما در این نسخه از زبان HTML ما می توانیم از تگ Figure برای اینکار استفاده کنیم. در صورتی که نمودار های ما نیاز به توضیحاتی داشته باشند نیز می توانیم از تگ Figcaption استفاده کنیم.

 

برای فهم بیشتر این مسئله به مثال زیر توجه کنید:

کد HTML:

<body>

<figure>

<img src="image/img.jpg" alt="#">

<figcaption>لوگوی کمیابی های</figcaption>

<p>این لوگو نشان گر سایت کمیابی ها می باشد.</p>

</figure>

</body>

کد CSS:

body {

background-color: #fff;

}

img{

width: 300px;

height: 200px;

}

figcaption {

color: #e64a19;

font-size: 28px;

}

خروجی کد بالا:

تگ Figure در HTML

 

خلاصه مطلب

  1. عموما از تگ Figure برای قرار دادن یک جزء خاص استفاده می شود که می تواند به به محتویات ما مربوط باشد.
  2. هر عنصری که در تگ Figure قرار می دهیم نیازمند توضیحات و یا عنوان می باشد به همین منظور از تگ Figcaption استفاده می کنیم.
  3. یکی از کاربرد های تگ Figure عکس ها می باشند. شاید شما بخواهید علاوه بر نمایش عکس توضیحات آن نیز در کنار آن نشان داده شود.
  4. در نسخه های قبلی زبان نشانه گذاری HTML ما برای قرار دادن نمونه کد ها، چارت ها، دیاگرام ها و… کد خاصی نداشتیم اما در این نسخه از زبان HTML ما می توانیم از تگ Figure برای اینکار استفاده کنیم.
ابوالفضل کلهری

فعال در زمینه های ui و ux و طراحی وب سایت مسلط به زبان های نشانه گذاری HTML و CSS و همچنین در زمینه ی آموزش زبان های HTML و CSS نیز فعالیت دارم . امیدوارم با آموزش هایی که در این سایت قرار می دهم موجب پیشرفت شما عزیزان باشم.

دیدگاه ها
  • قبل از ارسال دیدگاه خود قوانین بخش دیدگاه ها را مطالعه کنید. ارسال دیدگاه به معنی پذیرش این قوانین است. قوانین بخش دیدگاه ها