এইচটিএমএল <figure> ট্যাগ
<figure> ট্যাগের ব্রাউজার সাপোর্ট
| এলিমেন্ট | Google Chrome | Edge/IE | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
<figure> |
সকল ভার্সন | সকল ভার্সন | সকল ভার্সন | সকল ভার্সন | সকল ভার্সন |
সংজ্ঞা ও ব্যবহার
স্বয়ংসম্পূর্ণ কোন কন্টেন্টকে বুঝাতে <figure> এলিমেন্টটি ব্যবহৃত হয়। যেমনঃ কোন কিছুর ব্যাখ্যা, ডায়াগ্রাম, ছবি, কোডের লিস্ট ইত্যাদি।
যদিও <figure> এর কন্টেন্টের বিষয়বস্তুর মূল ধারার সাথে সম্পর্কিত হয়, তারপরও এর অবস্থান মূল ধারার তুলনায় কিছুটা স্বাধীন থাকে। এবং খেয়াল রাখতে হবে, যখন এটিকে বাদ দেয়া হবে তখন যেন এটি মূল ধারায় তেমন প্রভাব ফেলতে না পারে।
নিচের উদাহরণে <figure> এলিমেন্টের ব্যবহার দেখানো হলোঃ
উদাহরণ
<!DOCTYPE html>
<html>
<body>
<figure>
<img src="Nilgiri.jpg" alt="Nilgiri Bangladesh" width="420" height="280">
</figure>
</body>
</html>
বিঃদ্রঃ <figure> ট্যাগ ইন্টারনেট এক্সপ্লোরার(৮) এবং এর পূর্বের ভার্সন গুলোতে সাপোর্ট করে না।
ফলাফল
টীকা ও মন্তব্যঃ
<figure>ট্যাগের ক্যাপশন দেয়ার জন্য<figcaption>ট্যাগটি ব্যবহার করা হয়।
<figure> ট্যাগে গ্লোবাল এবং ইভেন্ট এট্রিবিউট সাপোর্ট করে কিনা?
| গ্লোবাল এট্রিবিউট | ইভেন্ট এট্রিবিউট |
|---|---|
| সাপোর্ট করে | সাপোর্ট করে |
<figure> ট্যাগের ডিফল্ট স্টাইল
অধিকাংশ ব্রাউজারেই <figure> এলিমেন্ট নিম্নলিখিত স্টাইল ভ্যালুগুলো সহকারে প্রদর্শিত হয়ঃ
figure {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;
}