HTML Semantic Elements এইচটিএমএল সেমান্টিক এবং HTML Accessibility এইচটিএমএল অ্যাক্সেসিবিলিটি
আজকে আমরা শিখবো HTML Semantics এবং Accessibility সম্পর্কে। Semantics মানে হচ্ছে অর্থপূর্ণ ট্যাগ ব্যবহার যেমন <header>, <article>, <nav>, <footer> ইত্যাদি। এই ট্যাগগুলো ব্রাউজার, সার্চ ইঞ্জিন এবং স্ক্রিন রিডারদের বুঝতে সাহায্য করে কোন অংশটা কী কাজ করছে। একটি ওয়েবসাইট কেবল সুন্দর হলেই চলবে না, সেটি যেন সবার জন্য ব্যবহারযোগ্য হয় সেটাও নিশ্চিত করতে হয়।
💻 HTML কোড উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Semantic HTML Example</title>
</head>
<body>
<header>
<h1>My Blog</h1>
<nav>
<a href="#home">Home</a> |
<a href="#articles">Articles</a> |
<a href="#contact">Contact</a>
</nav>
</header>
<main>
<article>
<h2>What is Semantic HTML?</h2>
<p>Semantic HTML uses meaningful tags that describe the content clearly.</p>
</article>
<aside>
<h3>Related Links</h3>
<ul>
<li><a href="#">HTML Basics</a></li>
<li><a href="#">HTML5 Features</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2025 My Blog. All rights reserved.</p>
</footer>
</body>
</html>
📘 প্রতিটি লাইনের ব্যাখ্যা:
🔹 <header>
👉 ওয়েবসাইট বা একটি সেকশনের হেডার অংশ বোঝাতে ব্যবহার হয়।
👉 এখানে সাধারণত লোগো, টাইটেল, এবং মেনু লিংক থাকে।
🔹 <nav>
👉 ওয়েবসাইটের নেভিগেশন বা মেনু বার বোঝায়।
👉 স্ক্রিন রিডার বুঝতে পারে যে এটা ন্যাভিগেশন লিংক — অ্যাক্সেসিবিলিটিতে সহায়ক।
🔹 <main>
👉 পুরো পেজের মূল কনটেন্ট যেখানে থাকে সেটাই বোঝায়।
👉 একটি পেজে সাধারণত একটি মাত্র <main> ট্যাগ থাকে।
🔹 <article>
👉 যেকোনো স্বাধীন কনটেন্ট বা ব্লগ পোস্ট, নিউজ আর্টিকেল, ইত্যাদির জন্য ব্যবহার হয়।
👉 এটি অন্য জায়গায় আলাদা করে প্রকাশ করা যায়।
🔹 <aside>
👉 সাইড ইনফো বা রিলেটেড কনটেন্ট যেমন লিংক, বিজ্ঞাপন, ছোট টিপস ইত্যাদির জন্য ব্যবহৃত হয়।
