HTML Semantic Elements

Semantic HTML কী?

Semantic HTML মানে অর্থপূর্ণ tag ব্যবহার করা — যে tag-এর নাম থেকেই বোঝা যায় এটি কী কাজ করে। এটি SEO, accessibility ও কোড পড়ার জন্য গুরুত্বপূর্ণ।

পুরনো বনাম আধুনিক

<!-- ❌ পুরনো পদ্ধতি -->
<div id="header">...</div>
<div id="nav">...</div>
<div id="main">...</div>
<div id="footer">...</div>

<!-- ✅ আধুনিক (HTML5) -->
<header>...</header>
<nav>...</nav>
<main>...</main>
<footer>...</footer>

একটি সম্পূর্ণ পেজের কাঠামো

<body>
  <header>
    <h1>সাইটের নাম</h1>
    <nav>
      <ul>
        <li><a href="/">হোম</a></li>
        <li><a href="/about">আমাদের সম্পর্কে</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <h2>ব্লগ পোস্টের শিরোনাম</h2>
      <section>
        <h3>প্রথম অংশ</h3>
        <p>কন্টেন্ট...</p>
      </section>
    </article>

    <aside>
      <h3>সম্পর্কিত লিংক</h3>
      <ul>...</ul>
    </aside>
  </main>

  <footer>
    <p>&copy; ২০২৫ কপিরাইট</p>
  </footer>
</body>

প্রতিটি element এর ব্যবহার

• <header> — পেজ/সেকশনের শুরু (logo, title)
• <nav> — navigation menu
• <main> — পেজের মূল কন্টেন্ট (একটিই থাকবে)
• <article> — স্বয়ংসম্পূর্ণ কন্টেন্ট (blog post, news article)
• <section> — কন্টেন্টের একটি অংশ (heading সহ)
• <aside> — side content (sidebar, ads, related links)
• <footer> — পেজ/সেকশনের শেষ (copyright, links)
• <figure>, <figcaption> — ছবি + ক্যাপশন
• <time> — তারিখ/সময়: <time datetime="2025-01-15">১৫ জানুয়ারি</time>
• <mark> — হাইলাইট
• <details>, <summary> — expandable section

SEO এর জন্য গুরুত্বপূর্ণ

• Google bot semantic tag বোঝে — সাইটের র‍্যাঙ্কিং বাড়ায়
• Screen reader-এ visually impaired ব্যবহারকারীরা সুবিধা পায়
• কোড পড়তে ও maintain করতে সহজ