Figure এবং Figcaption ব্যবহার করে ইমেজ প্রদর্শন

HTML5 এ <figure> এবং <figcaption> ট্যাগ ব্যবহার করে ইমেজ এবং তার বর্ণনা বা ক্যাপশন একসাথে প্রদর্শন করা যায়। এই ট্যাগগুলো ইমেজ বা গ্রাফিক কন্টেন্টকে আরও অর্থবহ এবং সংগঠিত করতে সাহায্য করে। <figure> এবং <figcaption> এর ব্যবহার ওয়েব পেজের অ্যাক্সেসিবিলিটি এবং SEO উভয় ক্ষেত্রেই সহায়ক। নিচে এই ট্যাগগুলো সম্পর্কে বিস্তারিত আলোচনা এবং উদাহরণ দেয়া হলো।

<figure> এবং <figcaption> ট্যাগের গঠন

১. <figure>

• বর্ণনা: <figure> ট্যাগ ব্যবহার করে ইমেজ, চার্ট, বা গ্রাফিক কন্টেন্ট একটি গোষ্ঠীতে সংগঠিত করা হয়। এটি সাধারণত একটি ইমেজ এবং তার ক্যাপশন ধারণ করতে ব্যবহৃত হয়।
• উপযোগিতা: কন্টেন্টকে গঠনমূলকভাবে উপস্থাপন করা এবং ইমেজ বা গ্রাফিক কন্টেন্টকে একটি পৃথক ও স্বতন্ত্র উপাদান হিসেবে উপস্থাপন করা।

২. <figcaption>

• বর্ণনা: <figcaption> ট্যাগ ব্যবহার করে <figure> ট্যাগের মধ্যে থাকা ইমেজ বা কন্টেন্টের বর্ণনা বা ক্যাপশন প্রদান করা হয়। এটি ইমেজের সাথে সম্পর্কিত তথ্য বা বর্ণনা যোগ করতে সাহায্য করে।
• উপযোগিতা: ইমেজের অর্থ আরও পরিষ্কারভাবে বোঝাতে এবং ইউজারদের ইমেজের সাথে সম্পর্কিত কন্টেক্সট বুঝতে সহায়তা করা।

উদাহরণ: <figure> এবং <figcaption> ব্যবহার করে ইমেজ প্রদর্শন

<figure>
    <img src="images/mountain.jpg" alt="A beautiful mountain landscape" width="600" height="400">
    <figcaption>A breathtaking view of the mountain landscape during sunrise.</figcaption>
</figure>

ব্যাখ্যা:

1. <figure>: ইমেজ এবং ক্যাপশনকে একটি গ্রুপ হিসেবে ধরে রাখে।
2. <img>: ইমেজ প্রদর্শন করে। এখানে "images/mountain.jpg" ইমেজ সোর্স এবং "A beautiful mountain landscape" বিকল্প টেক্সট।
3. <figcaption>: ইমেজের নিচে ক্যাপশন প্রদান করে, যা ইমেজের বর্ণনা বা ইমেজ সম্পর্কে একটি তথ্য যোগ করে।

ফলাফল:

উপরের উদাহরণে ইমেজ এবং তার ক্যাপশন একসাথে প্রদর্শিত হবে, যেখানে ক্যাপশনটি ইমেজের নিচে দেখাবে। এটি ইমেজের সাথে সম্পর্কিত তথ্য ইউজারদের কাছে পরিষ্কারভাবে উপস্থাপন করবে।

<figure> এবং <figcaption> ট্যাগের ব্যবহারিক উদাহরণ

উদাহরণ ১: গ্রাফ বা চার্ট সহ ব্যবহার

<figure>
    <img src="images/chart.png" alt="Sales growth chart for 2024" width="600" height="400">
    <figcaption>Figure 1: Sales growth chart showing the increase in sales for the year 2024.</figcaption>
</figure>

• এখানে, একটি চার্ট এবং তার ক্যাপশন ব্যবহার করা হয়েছে যা চার্টের অর্থ এবং কন্টেক্সট বুঝতে সহায়ক।

উদাহরণ ২: ইলাস্ট্রেশন বা ডায়াগ্রাম সহ ব্যবহার

<figure>
    <img src="images/diagram.jpg" alt="Diagram of the human respiratory system" width="500" height="350">
    <figcaption>Diagram illustrating the human respiratory system and its components.</figcaption>
</figure>

• এখানে, ইমেজটি একটি ডায়াগ্রাম যা একটি নির্দিষ্ট বিষয় (মানব শ্বাসযন্ত্র) প্রদর্শন করে, এবং ক্যাপশন তার বর্ণনা দেয়।

CSS দিয়ে <figure> এবং <figcaption> কাস্টমাইজেশন

CSS ব্যবহার করে <figure> এবং <figcaption> এর স্টাইলিং কাস্টমাইজ করা যায়, যাতে ইমেজ এবং ক্যাপশন আরও আকর্ষণীয়ভাবে উপস্থাপিত হয়।

<style>
    figure {
        display: block;
        max-width: 700px;
        margin: 20px auto;
        text-align: center;
        border: 1px solid #ddd;
        padding: 10px;
        border-radius: 8px;
    }
    figcaption {
        font-size: 14px;
        color: #555;
        margin-top: 10px;
    }
</style>

<figure>
    <img src="images/scenery.jpg" alt="Scenic view of a lake" width="600">
    <figcaption>A scenic view of a lake surrounded by mountains during sunset.</figcaption>
</figure>

ব্যাখ্যা:

• figure CSS: ইমেজ এবং ক্যাপশনকে কেন্দ্র করে প্রদর্শন করা হয়েছে, বর্ডার ও প্যাডিং যোগ করা হয়েছে এবং কোণাগুলোকে গোলাকৃতির (rounded) করা হয়েছে।
• figcaption CSS: ক্যাপশন টেক্সটের ফন্ট সাইজ এবং রঙ পরিবর্তন করা হয়েছে, যা ক্যাপশনটিকে আরও পরিষ্কারভাবে প্রদর্শিত করতে সহায়ক।

<figure> এবং <figcaption> এর উপকারিতা

1. অর্থবহ এবং সেম্যান্টিক: <figure> এবং <figcaption> ট্যাগগুলো HTML এর সেম্যান্টিক উপাদান, যা ওয়েব পেজের কন্টেন্টকে আরও অর্থবহ এবং গঠনমূলক করে তোলে। এটি সার্চ ইঞ্জিন এবং স্ক্রিন রিডারগুলোর জন্য কন্টেন্ট বোঝা সহজ করে।
2. অ্যাক্সেসিবিলিটি উন্নত করে: <figcaption> ব্যবহার করে ইমেজের সাথে একটি বর্ণনা যোগ করা হলে, বিশেষ চাহিদাসম্পন্ন ইউজারদের জন্য (যারা স্ক্রিন রিডার ব্যবহার করেন) পেজের কন্টেন্ট বুঝতে সহায়ক হয়।
3. ইমেজ এবং ক্যাপশন একসাথে গঠন করা: এই ট্যাগগুলো ব্যবহার করে ইমেজ এবং ক্যাপশন একসাথে গঠনমূলকভাবে উপস্থাপন করা যায়, যা পেজের স্ট্রাকচার ও লেআউটকে আরও পরিষ্কার করে।