HTML <figure> ট্যাগ

  • পূর্ববর্তী পৃষ্ঠা <figcaption>
  • পরবর্তী পৃষ্ঠা <font>

বিবরণ ও ব্যবহার

<figure> ট্যাগটি স্বসম্পূর্ণ বিষয়বস্তুকে নির্দিষ্ট করে, যেমন চিত্র, গ্রাফ, ছবি, কোড তালিকা ইত্যাদি。

যদিও <figure> উপাদানের বিষয়বস্তু মূল বিষয়বস্তুর সঙ্গে সম্পর্কিত, কিন্তু তার স্থান মূল বিষয়বস্তুর প্রবাহ থেকে স্বাধীন, যদি তা মুছে ফেলা হয়, তবে ডকুমেন্টের প্রবাহকে কোনভাবেই প্রভাব ফেলবে না。

ইলেকট্রনপরামর্শ করুন: <figcaption> ইলেকট্রন জন্য <figure> উপাদানকে শিরোনাম যোগ করুন。

অন্যান্য দেখুন:

HTML DOM রেফারেন্স ম্যানুয়াল:ফিগার ওবজেক্ট

ইনস্ট্যান্স

উদাহরণ ১

ডকুমেন্টের ছবিগুলি ট্যাগ করুন <figure> ইলেকট্রন, <figcaption> ইলেকট্রন দিয়ে ছবির শিরোনাম নির্ধারণ করুন:

<figure>
  <img src="trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>চিত্র ১ - ইতালীয় পুলিয়া অঞ্চলের Trulli。</figcaption>
</figure>

আপনার হাতে পরীক্ষা করুন

উদাহরণ ২

সিএসএস (CSS) দিয়ে <figure> এবং <figcaption> এর স্টাইল সেট করুন:

<html>
<head>
<style>
figure {
  border: 1px #cccccc solid;
  padding: 4px;
  margin: auto;
}
figcaption {
  background-color: black;
  color: white;
  font-style: italic;
  padding: 2px;
  text-align: center;
}
</style>
</head>
<body>
<figure>
  <img src="trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>চিত্র ১ - ইতালীয় পুলিয়া অঞ্চলের Trulli。</figcaption>
</figure>
</body>
</html>

আপনার হাতে পরীক্ষা করুন

গ্লোবাল অ্যাট্রিবিউট

<figure> ট্যাগটি আরও HTML-তে গ্লোবাল অ্যাট্রিবিউট。

ইভেন্ট অ্যাট্রিবিউট সমর্থন করে

<figure> ট্যাগটি আরও HTML-তে ইভেন্ট অ্যাট্রিবিউট。

ডিফল্ট সিএসএস সেটিং

অধিকাংশ ব্রাউজার নিম্নলিখিত ডিফল্ট মান ব্যবহার করবে <figure> উপাদান:

figure {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 40px;
  margin-right: 40px;
}

আপনার হাতে পরীক্ষা করুন

ব্রাউজার সমর্থন

সারণীতে দেওয়া সংখ্যাগুলি এই ইলেকট্রনের প্রথম পূর্ণাত্মকভাবে সমর্থনকারী ব্রাউজার সংস্করণ

চ্রোম এজ ফায়ারফক্স স্যাফারি অপেরা
চ্রোম এজ ফায়ারফক্স স্যাফারি অপেরা
8.0 9.0 4.0 5.1 11.0

মন্তব্য: <figure> ট্যাগটি একটি নতুন HTML 5 ট্যাগ

  • পূর্ববর্তী পৃষ্ঠা <figcaption>
  • পরবর্তী পৃষ্ঠা <font>