HTML5 এর লিঙ্ক এবং ইমেজ

HTML5 এ লিঙ্ক (Link) এবং ইমেজ (Image) ওয়েব পেজের একটি গুরুত্বপূর্ণ অংশ, যা ওয়েব পেজের ইন্টারঅ্যাক্টিভিটি এবং ভিজ্যুয়াল অ্যাপিল বাড়াতে সহায়ক। লিঙ্ক ব্যবহার করে পেজের মধ্যে বা অন্য পেজে নেভিগেট করা যায়, এবং ইমেজ ব্যবহার করে কন্টেন্টকে আরও আকর্ষণীয় এবং ভিজ্যুয়ালভাবে সমৃদ্ধ করা যায়।

HTML5 এ Anchor Tag (<a>) ব্যবহার করে Hyperlinks তৈরি করা হয়। Hyperlink হল এমন একটি লিঙ্ক যা ব্যবহারকারীদের ওয়েব পেজের এক অংশ থেকে অন্য অংশে, অন্য পেজে, বা অন্য ওয়েবসাইটে নিয়ে যেতে পারে। Anchor ট্যাগের মাধ্যমে ইন্টারনাল ও এক্সটার্নাল উভয় ধরনের লিঙ্ক তৈরি করা যায়, এবং এটি একটি অত্যন্ত গুরুত্বপূর্ণ ট্যাগ যা ওয়েব পেজে নেভিগেশন সিস্টেম গঠনে সহায়ক। নিচে Anchor ট্যাগ এবং Hyperlinks তৈরি করার পদ্ধতি নিয়ে বিস্তারিত আলোচনা করা হলো।

Anchor Tag (<a>) এর গঠন

Anchor ট্যাগের গঠন নিচের মতো:

<a href="URL">Link Text</a>

• <a>: Anchor ট্যাগ যা একটি Hyperlink তৈরি করে।
• href অ্যাট্রিবিউট: এটি লিঙ্কের গন্তব্য নির্ধারণ করে। এটি একটি ওয়েব পেজ, ইন্টারনাল সেকশন, ইমেইল লিঙ্ক, বা ফোন নম্বর হতে পারে।
• Link Text: এটি লিঙ্কে ক্লিক করার জন্য প্রদর্শিত টেক্সট।

Anchor Tag এবং Hyperlinks এর উদাহরণসমূহ

১. এক্সটার্নাল লিঙ্ক তৈরি করা

একটি ওয়েবসাইটের লিঙ্ক তৈরি করতে:

<a href="https://www.example.com">Visit Example Website</a>

ব্যাখ্যা:

• href অ্যাট্রিবিউটে "https://www.example.com" URL টি উল্লেখ করা হয়েছে।
• Link Text হলো "Visit Example Website" যা ইউজার ক্লিক করলে তাদের নির্দিষ্ট পেজে নিয়ে যাবে।

২. ইন্টারনাল লিঙ্ক তৈরি করা

ওয়েবসাইটের একই পেজে অন্য সেকশনে নেভিগেট করার জন্য:

<a href="#section1">Go to Section 1</a>

<h2 id="section1">Section 1</h2>
<p>This is the content of Section 1.</p>

ব্যাখ্যা:

• href="#section1": এখানে #section1 পেজের একটি নির্দিষ্ট সেকশন নির্দেশ করে। এটি একটি ইন্টারনাল লিঙ্ক।
• id="section1": যেখানে লিঙ্কটি নিয়ে যাবে, সেই সেকশনে একটি id অ্যাট্রিবিউট সেট করা হয়েছে। এটি লিঙ্কের গন্তব্য নির্ধারণ করে।

৩. ইমেইল লিঙ্ক তৈরি করা

ইমেইল অ্যাড্রেসে ইমেইল পাঠানোর জন্য:

<a href="mailto:someone@example.com">Send Email</a>

ব্যাখ্যা:

• href="mailto:someone@example.com": এটি ইমেইল ক্লায়েন্ট খুলে নির্দিষ্ট ইমেইল অ্যাড্রেসে মেইল পাঠানোর জন্য প্রস্তুত করে।
• Link Text: "Send Email" প্রদর্শিত হবে, যা ইউজারকে ইমেইল পাঠানোর সুযোগ দেবে।

৪. টেলিফোন লিঙ্ক তৈরি করা

ফোন নম্বর ডায়াল করার জন্য:

<a href="tel:+1234567890">Call Us</a>

ব্যাখ্যা:

• href="tel:+1234567890": এটি একটি ফোন লিঙ্ক তৈরি করে, যা মোবাইল বা ডিভাইসে ক্লিক করলে ডায়ালার খুলবে।
• Link Text: "Call Us" প্রদর্শিত হবে, যা ইউজারকে ফোন নম্বরে কল করার সুযোগ দেবে।

৫. একটি ইমেজকে লিঙ্ক হিসেবে ব্যবহার করা

<a href="https://www.example.com" target="_blank">
    <img src="image.jpg" alt="Example Image">
</a>

ব্যাখ্যা:

• <a> ট্যাগ একটি ইমেজকে লিঙ্ক হিসেবে ব্যবহার করা হয়েছে। ক্লিক করলে এটি ইউজারকে "https://www.example.com" এ নিয়ে যাবে।
• target="_blank": লিঙ্কটি নতুন ট্যাবে খুলবে।

Anchor Tag এর গুরুত্বপূর্ণ অ্যাট্রিবিউট

১. href

• ব্যাখ্যা: গন্তব্য URL বা লোকেশন নির্ধারণ করে।
• মান: যেকোনো URL, ইন্টারনাল ID (যেমন #section1), mailto:, বা tel:।

২. target

• ব্যাখ্যা: লিঙ্কটি কীভাবে খোলা হবে তা নির্ধারণ করে।
• মান:
  • _self: একই ট্যাবে লিঙ্কটি খুলবে (ডিফল্ট)।
  • _blank: লিঙ্কটি নতুন ট্যাবে খুলবে।
  • _parent: প্যারেন্ট ফ্রেমে লিঙ্ক খুলবে।
  • _top: পুরো ব্রাউজার উইন্ডোতে লিঙ্ক খুলবে।

৩. title

• ব্যাখ্যা: লিঙ্কের একটি টুলটিপ বা ব্যাখ্যা প্রদর্শন করে যখন ইউজার মাউস হোভার করে।
• উদাহরণ:

৪. rel

• ব্যাখ্যা: লিঙ্ক এবং তার গন্তব্যের মধ্যে সম্পর্ক নির্দেশ করে, বিশেষ করে SEO এবং নিরাপত্তার জন্য গুরুত্বপূর্ণ।
• মান:
  • noopener: নিরাপত্তা বজায় রাখতে নতুন ট্যাবে খোলা লিঙ্কগুলোর জন্য।
  • noreferrer: রেফারার তথ্য গোপন রাখে।
  • nofollow: সার্চ ইঞ্জিনকে নির্দেশ করে লিঙ্কটি ফলো না করতে।

CSS ব্যবহার করে লিঙ্ক স্টাইলিং

<style>
    a {
        text-decoration: none; /* আন্ডারলাইন সরিয়ে দেয় */
        color: blue; /* লিঙ্কের রঙ নির্ধারণ */
    }
    a:hover {
        color: red; /* মাউস হোভার করলে রঙ পরিবর্তন */
        text-decoration: underline; /* হোভার করলে আন্ডারলাইন যোগ হয় */
    }
</style>

<a href="https://www.example.com">Styled Link</a>

ব্যাখ্যা:

• text-decoration: none;: লিঙ্কের আন্ডারলাইন সরিয়ে দেয়।
• color: লিঙ্কের ডিফল্ট রঙ সেট করা হয়েছে।
• :hover: মাউস হোভার করলে আন্ডারলাইন এবং রঙ পরিবর্তন করে।

HTML5 এ External এবং Internal Links হলো এমন লিঙ্ক যা ওয়েব পেজের মধ্যে নেভিগেশন এবং ব্যবহারকারীদের বিভিন্ন পেজ বা রিসোর্সে নিয়ে যেতে সাহায্য করে। এগুলো একটি ওয়েবসাইটের স্ট্রাকচার এবং নেভিগেশন সিস্টেম গঠনে গুরুত্বপূর্ণ ভূমিকা পালন করে। নিচে External এবং Internal Links সম্পর্কে বিস্তারিত আলোচনা করা হলো।

১. External Links

বর্ণনা:

• External Links এমন লিঙ্ক যা ব্যবহারকারীদের একটি ওয়েবসাইট থেকে অন্য একটি সম্পূর্ণ আলাদা ওয়েবসাইটে নিয়ে যায়।
• External Links সাধারণত একটি URL ব্যবহার করে গন্তব্য নির্ধারণ করে, যা নির্দিষ্ট ওয়েবসাইট বা ডোমেইনের সাথে যুক্ত থাকে।

External Link এর উদাহরণ:

<a href="https://www.example.com" target="_blank">Visit Example Website</a>

ব্যাখ্যা:

• href="https://www.example.com": এখানে URL টি একটি এক্সটার্নাল ওয়েবসাইটে নির্দেশ করে, যা ব্যবহারকারীকে সম্পূর্ণ ভিন্ন ডোমেইনে নিয়ে যাবে।
• target="_blank": এটি লিঙ্কটি একটি নতুন ট্যাবে খুলবে, যা ইউজারের বর্তমান পেজটি বজায় রাখতে সাহায্য করে।

External Links এর ব্যবহার:

• এক পেজ থেকে অন্য পেজে বা অন্য ডোমেইনে রিসোর্স বা তথ্য প্রদান করতে।
• সোশ্যাল মিডিয়া পেজ, রেফারেন্স ওয়েবসাইট, বা থার্ড-পার্টি সার্ভিসে নেভিগেট করতে।

External Link এর নিরাপত্তা:

External Link ব্যবহার করলে নিরাপত্তা নিশ্চিত করতে কিছু অ্যাট্রিবিউট ব্যবহার করা হয়:

• rel="noopener noreferrer": যখন একটি লিঙ্ক নতুন ট্যাবে খোলা হয়, এটি ব্যবহার করে রেফারার তথ্য গোপন রাখা হয় এবং নিরাপত্তা বজায় থাকে।

<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">Secure External Link</a>

২. Internal Links

বর্ণনা:

• Internal Links এমন লিঙ্ক যা একই ওয়েবসাইটের বিভিন্ন পেজ বা সেকশনে নেভিগেট করে।
• Internal Links ব্যবহার করে একটি ওয়েবসাইটের স্ট্রাকচার এবং নেভিগেশন মেনু তৈরি করা যায়।

Internal Link এর উদাহরণ:

২.১ একটি পেজের মধ্যে অন্য পেজে লিঙ্ক করা

<a href="/about.html">About Us</a>

ব্যাখ্যা:

• href="/about.html": এটি একই ওয়েবসাইটের /about.html পেজে নেভিগেট করে। এটি একটি ইন্টারনাল লিঙ্ক কারণ এটি একই ডোমেইনের মধ্যে থাকে।

২.২ একটি পেজের মধ্যে নির্দিষ্ট সেকশনে লিঙ্ক করা

<a href="#contact">Go to Contact Section</a>

<h2 id="contact">Contact Us</h2>
<p>Feel free to reach out to us!</p>

ব্যাখ্যা:

• href="#contact": এটি একই পেজের একটি নির্দিষ্ট সেকশন নির্দেশ করে, যেখানে id অ্যাট্রিবিউট ব্যবহার করে সেকশন চিহ্নিত করা হয়েছে।
• id="contact": যেখানে লিঙ্কটি নিয়ে যাবে, সেই সেকশনের id নির্ধারণ করা হয়েছে।

Internal Links এর ব্যবহার:

• মেনু বা নেভিগেশন বার তৈরি করতে, যা একই ওয়েবসাইটের বিভিন্ন পেজ বা সেকশনে দ্রুত নেভিগেট করার সুযোগ দেয়।
• একই পেজের বিভিন্ন অংশে দ্রুত স্ক্রল করতে (যেমন, FAQ পেজে নির্দিষ্ট প্রশ্নে পৌঁছানো)।

Internal Link এর উদাহরণ:

<a href="/services.html">Our Services</a>
<a href="#top">Back to Top</a>

ব্যাখ্যা:

• /services.html লিঙ্কটি একই ওয়েবসাইটের "Our Services" পেজে নেভিগেট করে।
• #top লিঙ্কটি একই পেজের উপরের দিকে স্ক্রল করে নিয়ে যায়, যেখানে id="top" পূর্বে সেট করা থাকতে হবে।

External এবং Internal Links এর পার্থক্য

• External Links ব্যবহার করা হয় যখন ইউজারদের অন্য একটি ডোমেইনে বা এক্সটার্নাল রিসোর্সে নিয়ে যাওয়ার প্রয়োজন হয়।
• Internal Links ব্যবহার করা হয় ওয়েবসাইটের অভ্যন্তরীণ নেভিগেশন সিস্টেম তৈরি করতে এবং ব্যবহারকারীদের একই ওয়েবসাইটের বিভিন্ন পেজ বা সেকশনে দ্রুত পৌঁছাতে সাহায্য করে।

HTML5 এ Image Tag (<img>) ব্যবহার করে ওয়েব পেজে ইমেজ এম্বেড করা হয়। এটি একটি self-closing ট্যাগ, অর্থাৎ এটি ক্লোজিং ট্যাগ ছাড়াই ব্যবহার করা হয়। ইমেজ ট্যাগ ব্যবহার করে ওয়েব পেজে বিভিন্ন ফরম্যাটের ছবি যোগ করা যায়, যেমন JPEG, PNG, GIF ইত্যাদি। <img> ট্যাগের সাথে বিভিন্ন Attributes ব্যবহার করে ইমেজের আকার, বর্ণনা, এবং স্টাইল নির্ধারণ করা যায়। নিচে <img> ট্যাগ এবং এর Attributes সম্পর্কে বিস্তারিত আলোচনা করা হলো।

Image Tag (<img>) এর গঠন

<img src="image.jpg" alt="Description of the image" width="500" height="300">

• <img>: ইমেজ এম্বেড করার জন্য HTML ট্যাগ।
• src: ইমেজের সোর্স বা ফাইল পাথ, যা ইমেজ প্রদর্শন করার জন্য ব্যবহৃত হয়।
• alt: ইমেজের বিকল্প টেক্সট, যা ইমেজ লোড না হলে বা অ্যাক্সেসিবিলিটি ডিভাইসে ইমেজের পরিবর্তে প্রদর্শিত হয়।
• width এবং height: ইমেজের প্রস্থ এবং উচ্চতা নির্ধারণ করতে ব্যবহৃত হয়।

Image Attributes

HTML5 এ <img> ট্যাগের সাথে বেশ কিছু গুরুত্বপূর্ণ Attributes ব্যবহার করা হয়, যা ইমেজের আকার, স্টাইলিং, এবং বৈশিষ্ট্য নির্ধারণে সহায়ক। নিচে এই Attributes এর বিস্তারিত আলোচনা করা হলো:

১. src (Source)

• বর্ণনা: ইমেজের সোর্স বা লোকেশন নির্ধারণ করে, যা ইমেজের ফাইল পাথ বা URL নির্দেশ করে।
• ব্যবহার: লোকাল ইমেজ ফাইল বা ওয়েবের কোনো ইমেজ ফাইল লোড করতে।
• উদাহরণ: 

<img src="images/picture.jpg" alt="A beautiful scenery">

• এখানে "images/picture.jpg" হলো ইমেজের লোকাল সোর্স।

২. alt (Alternative Text)

• বর্ণনা: ইমেজের একটি বর্ণনা বা বিকল্প টেক্সট প্রদান করে, যা ইমেজ লোড না হলে বা স্ক্রিন রিডার ব্যবহারকারীরা ইমেজের পরিবর্তে পড়তে পারে।
• গুরুত্ব: এটি অ্যাক্সেসিবিলিটি উন্নত করে এবং SEO তে সাহায্য করে, কারণ সার্চ ইঞ্জিন ইমেজের alt ট্যাগ পড়ে।
• উদাহরণ:

<img src="images/picture.jpg" alt="A beautiful mountain view">

• এখানে, "A beautiful mountain view" ইমেজের একটি বিকল্প বর্ণনা।

৩. width এবং height

• বর্ণনা: ইমেজের প্রস্থ (width) এবং উচ্চতা (height) নির্ধারণ করে, যা পিক্সেলে উল্লেখ করা হয়।
• ব্যবহার: ইমেজের আকার নিয়ন্ত্রণ করতে এবং নির্দিষ্ট লেআউট বজায় রাখতে।
• উদাহরণ:

<img src="images/picture.jpg" alt="A beautiful scenery" width="500" height="300">

• এখানে, ইমেজের প্রস্থ ৫০০ পিক্সেল এবং উচ্চতা ৩০০ পিক্সেল নির্ধারণ করা হয়েছে।

৪. title

• বর্ণনা: ইমেজের একটি টুলটিপ যোগ করতে ব্যবহার করা হয়, যা ইমেজের উপর মাউস হোভার করলে প্রদর্শিত হয়।
• ব্যবহার: ইমেজ সম্পর্কে আরও তথ্য বা বর্ণনা প্রদর্শন করতে।
• উদাহরণ:

<img src="images/picture.jpg" alt="A beautiful scenery" title="Scenic mountain view during sunrise">

৫. loading

• বর্ণনা: ইমেজ লোড করার প্রক্রিয়া নির্ধারণ করে। HTML5 এ নতুন এই অ্যাট্রিবিউটটি lazy বা eager হতে পারে।
  • lazy: স্ক্রল করে ইমেজ যখন ভিউপোর্টে আসবে তখন লোড হবে। এটি পেজের লোডিং টাইম উন্নত করে।
  • eager: ইমেজ দ্রুত লোড হয়, ডিফল্ট সেটিং।
• উদাহরণ:

<img src="images/picture.jpg" alt="A beautiful scenery" loading="lazy">

৬. style

• বর্ণনা: ইনলাইন স্টাইল যোগ করতে ব্যবহৃত হয়, যা ইমেজের স্টাইলিং কাস্টমাইজ করতে সহায়ক।
• উদাহরণ:

CSS দিয়ে ইমেজ স্টাইলিং কাস্টমাইজ করা

HTML ইমেজ ট্যাগের সাথে CSS ব্যবহার করে ইমেজের আকার, পজিশন, এবং স্টাইলিং কাস্টমাইজ করা যায়।

<style>
    img {
        max-width: 100%; /* ইমেজকে রেস্পন্সিভ করে তোলে */
        height: auto; /* উচ্চতা আপেক্ষিক করে তোলে */
        border-radius: 10px; /* কোণাগুলো গোলাকার করে */
        box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5); /* ইমেজের চারপাশে শেডো */
    }
</style>

<img src="images/picture.jpg" alt="A beautiful scenery">

ব্যাখ্যা:

• max-width: ইমেজের প্রস্থ প্যারেন্ট কন্টেইনারের প্রস্থ অনুযায়ী স্কেল করে, যা রেস্পন্সিভ ডিজাইন নিশ্চিত করে।
• height: auto;: ইমেজের উচ্চতা আপেক্ষিক করে, যা প্রস্থ অনুযায়ী স্বয়ংক্রিয়ভাবে পরিবর্তিত হয়।
• border-radius: ইমেজের কোণাগুলো গোলাকার করে।
• box-shadow: ইমেজের চারপাশে শেডো যোগ করে, যা ইমেজকে আরও আকর্ষণীয় করে।

Image Tag এর কিছু ব্যবহারিক উদাহরণ

১. ওয়েব থেকে ইমেজ লোড করা

<img src="https://www.example.com/image.jpg" alt="External Image">

২. লোকাল ফাইল থেকে ইমেজ লোড করা

<img src="images/local-image.jpg" alt="Local Image">

৩. রেস্পন্সিভ ইমেজ ব্যবহার করা

<img src="images/responsive.jpg" alt="Responsive Image" style="max-width: 100%; height: auto;">

সারসংক্ষেপ

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. ইমেজ এবং ক্যাপশন একসাথে গঠন করা: এই ট্যাগগুলো ব্যবহার করে ইমেজ এবং ক্যাপশন একসাথে গঠনমূলকভাবে উপস্থাপন করা যায়, যা পেজের স্ট্রাকচার ও লেআউটকে আরও পরিষ্কার করে।