সিমেন্টিক এইচটিএমএল

🔖 সিমেন্টিক এইচটিএমএল (Semantic HTML)

Semantic মানে হলো অর্থবহ। Semantic HTML মানে হলো এমন HTML লেখা যেখানে প্রতিটি ট্যাগ তার নিজের অর্থ বহন করে। ব্রাউজার, সার্চ ইঞ্জিন এবং স্ক্রিন রিডার সবাই এই ট্যাগ দেখে পেজের কাঠামো বুঝতে পারে।

💡

Non-semantic vs Semantic: <div> বা <span> ট্যাগ কিছুই বলে না, এরা non-semantic। কিন্তু <header>, <nav>, <article> ট্যাগগুলো নিজেই তাদের কাজ বলে দেয়, এরা semantic।

📌 গুরুত্বপূর্ণ Semantic ট্যাগসমূহ

semantic-structure.html


<!DOCTYPE html>
<html lang="bn">
<head>
  <meta charset="UTF-8">
  <title>সিমেন্টিক HTML উদাহরণ</title>
</head>
<body>
 
  <!-- পেজের শীর্ষে থাকে, লোগো বা নেভিগেশন ধারণ করে -->
  <header>
    <h1>আমার ওয়েবসাইট</h1>
  </header>
 
  <!-- নেভিগেশন মেনু -->
  <nav>
    <a href="/">হোম</a>
    <a href="/about">সম্পর্কে</a>
    <a href="/contact">যোগাযোগ</a>
  </nav>
 
  <!-- পেজের মূল কন্টেন্ট -->
  <main>
 
    <!-- একটি স্বনির্ভর কন্টেন্ট ব্লক -->
    <article>
      <h2>একটি ব্লগ পোস্ট</h2>
      <p>এখানে ব্লগ পোস্টের কন্টেন্ট থাকবে।</p>
    </article>
 
    <!-- মূল কন্টেন্টের সাথে সম্পর্কিত পার্শ্ব কন্টেন্ট -->
    <aside>
      <h3>সাম্প্রতিক পোস্ট</h3>
      <ul>
        <li><a href="#">পোস্ট ১</a></li>
        <li><a href="#">পোস্ট ২</a></li>
      </ul>
    </aside>
 
  </main>
 
  <!-- পেজের নিচে থাকে, কপিরাইট তথ্য ইত্যাদি -->
  <footer>
    <p>&copy; ২০২৫ আমার ওয়েবসাইট</p>
  </footer>
 
</body>
</html>

📌 কোন ট্যাগ কোন কাজে?

ট্যাগ	কাজ
`<header>`	পেজ বা সেকশনের শীর্ষ অংশ
`<nav>`	নেভিগেশন লিংকের সমষ্টি
`<main>`	পেজের মূল ও প্রধান কন্টেন্ট (প্রতি পেজে একটি)
`<article>`	একটি স্বনির্ভর ও শেয়ারযোগ্য কন্টেন্ট (ব্লগ পোস্ট, নিউজ)
`<section>`	একটি থিমেটিক গ্রুপ বা বিভাগ
`<aside>`	মূল কন্টেন্টের সাথে সম্পর্কিত পার্শ্ব কন্টেন্ট (সাইডবার)
`<footer>`	পেজের নিচের অংশ
`<figure>`	ছবি, ডায়াগ্রাম বা কোড ব্লকের কন্টেইনার
`<figcaption>`	`<figure>` এর ক্যাপশন
`<time>`	তারিখ বা সময় নির্দেশ করে

⚠️

কেন Semantic HTML ব্যবহার করবেন? ✅ SEO উন্নত হয়: গুগল পেজের স্ট্রাকচার বুঝতে পারে। ✅ Accessibility বাড়ে: স্ক্রিন রিডার পেজ পড়তে পারে। ✅ কোড পড়তে সহজ: অন্য ডেভেলপাররা সহজে কোড বুঝতে পারে।