HTML5-এ নতুন ট্যাগসমূহ (New Tags)

HTML5-এ যোগ করা নতুন সিমান্টিক ও ফাংশনাল ট্যাগ

HTML5 হলো HTML মানটির বড় রিভিশন যা HTML 4.01, XHTML 1.0, এবং XHTML 1.1-এর miejsc দিয়েছে। এটি W3C এবং WHATWG-এর সহযোগিতায় বিকসিত। HTML5 নये সিমান্টিক (অর্থবহ) ট্যাগ যোগ করেছে যা কোডকে আরও পঠনীয়, অ্যাকসেসিবল, এবং SEO-বান্ধব করে।

নতুন ট্যাগের সম্পূর্ণ তালিকা ও বর্ণনা

ট্যাগ (এলিমেন্ট)	বর্ণনা
`<article>`	ডকুমেন্টের একটি স্বতন্ত্র কন্টেন্ট ব্লক উপস্থাপন করে (ব্লগ পোস্ট, নিউজ আর্টিকেল, ফোরাম পোস্ট)।
`<aside>`	মূল কন্টেন্ট سے কিছুটা সম্পর্কিত কন্টেন্ট (সাইডবার, পুল কোট, বিজ্ঞাপন)।
`<audio>`	অডিও ফাইল এমবেড করার জন্য (নেটিভ প্লেয়ার কন্ট্রোলসহ)।
`<canvas>`	JavaScript দিয়ে ডাইনামিক বিটম্যাপ গ্রাফিক্স আঁকার জন্য (গেম, চার্ট, অ্যানিমেশন)।
`<command>`	ব্যবহারকারীর আহ্বানযোগ্য কমান্ড (মেনু আইটেম, বাটন) — অবসন/Deprecated।
`<datalist>`	`<input list="...">` এর সাথে ব্যবহার করে অটোকমপ্লিট/কম্বোবক্স তৈরি করে।
`<details>`	অতিরিক্ত ইনফো/কন্ট্রোল যা ব্যবহারকারী চাইলে দেখতে পারে (ড্রপডাউন সারমর্ম)۔
`<embed>`	বাহ্যিক ইন্টারেক্টিভ কন্টেন্ট বা প্লাগইন এমবেড করার জন্য (PDF, Flash ইত্যাদি)।
`<figure>`	সেলফ-কন্টেইনড ফ্লো কন্টেন্ট (ইমেজ, ডায়াগ্রাম, কোড স্নিপেট) যা ক্যাপশন `<figcaption>` দিয়ে থাকে।
`<footer>`	সেকশন বা পেজের ফুটার (লেখক, কপিরাইট, লিংক, যোগাযোগ)۔
`<header>`	ইন্ট্রোডাক্টরি বা নেভিগেশনাল এডস (হেডিং, লোগো, সার্চ ফর্ম, নেভ)۔
`<hgroup>`	একটি সেকশনের হেডিং গ্রুপ (`<h1>`-`<h6>` গ্রুপিং) — অবসন।
`<keygen>`	কি-পেয়ার জেনারেশন কন্ট্রোল (ফর্ম সাবমিশনে পাবলিক কি) — অবসন/Deprecated।
`<mark>`	রেফারেন্সের জন্য হাইলাইট করা টেক্সট (সার্চ রেজাল্ট হাইলাইটের মতো)۔
`<meter>`	জানা রেঞ্জের মধ্যে একটি মেজারমেন্ট (ডিস্ক ইউজ, ভোট পার্সেন্টেজ) — প্রগ্রেস বার নয়।
`<nav>`	নেভিগেশন লিংকের সেকশন (মেনু, টেবিল অব কন্টেন্ট, পেজিনেশন)۔
`<output>`	ক্যালকুলেশন বা স্ক্রিপ্ট আউটপুট প্রদর্শনের জন্য।
`<progress>`	একটি টাস্কের প্রগ্রেস (ডাউনলোড, আপলোড, মাল্টি-স্টেপ ফর্ম) — `value`/`max` অ্যাট্রিবিউট থাকে।
`<ruby>`	রুবি এনোটেশন (জাপানি/চাইনিজ ক্যারেক্টারের রিডিং) — `<rt>`, `<rp>` সহ।
`<section>`	জেনেরিক ডকুমেন্ট/অ্যাপ্লিকেশন সেকশন (থিমেটিক গ্রুপিং) — `<div>` নয়।
`<time>`	তারিখ/সময় উপস্থাপন (machine-readable `datetime` অ্যাট্রিবিউটসহ)۔
`<video>`	ভিডিও ফাইল এমবেড করার জন্য (নেটিভ প্লেয়ার, সাবটাইটল, মাল্টিপল সোর্স)۔
`<wbr>`	ওয়ার্ড ব্রেক অপোর্চুনিটি (লং ওয়ার্ডে লাইন ব্রেকের সুযোগ) — ফরম্যাটিংহিন।

ব্যবহারের উদাহরণ: সিমান্টিক পেজ স্ট্রাকচার

<!DOCTYPE html>
<html lang="bn">
<head>
  <meta charset="UTF-8">
  <title>HTML5 সিমান্টিক লেআউট</title>
</head>
<body>
  <header>
    <h1>ওয়েবসাইট টাইটেল</h1>
    <nav>
      <ul><li><a href="#">হোম</a></li><li><a href="#">আমাদের সম্পর্কে</a></li></ul>
    </nav>
  </header>

  <main>
    <article>
      <header>
        <h2>আর্টিকেল শিরোনাম</h2>
        <time datetime="2024-01-15">১৫ জানুয়ারি, ২০২৪</time>
      </header>
      <figure>
        <img src="image.jpg" alt="বর্ণনা">
        <figcaption>চিত্রের ক্যাপশন</figcaption>
      </figure>
      <p>আর্টিকেল কন্টেন্ট...</p>
      <footer>
        <p>লেখক: নাম | <a href="#">কমেন্ট</a></p>
      </footer>
    </article>
    
    <aside>
      <h3>সাইডবার</h3>
      <nav>...</nav>
    </aside>
  </main>

  <footer>
    <p>&copy; ২০২৪ কোম্পানি নাম। সকল অধিকার সংরক্ষিত।</p>
  </footer>
</body>
</html>

ব্রাউজার সাপোর্ট নোট

সকল আধুনিক ব্রাউজার এই ট্যাগগুলো সাপোর্ট করে। পুরানো IE (9 বা তার নিচে) এর জন্য html5shiv বা html5shim পলিফিল ব্যবহার করতে হয়।

সেরা অনুশীলন

<div> এবং <span> শুধু স্টাইলিং/লেআউটের জন্য ব্যবহার করুন, সিমান্টিক মানে নয়।
<section> vs <article>: <article> স্বতন্ত্রভাবে বিতরণযোগ্য কন্টেন্টের জন্য।
<meter> vs <progress>: <meter> = বর্তমান মান (স্ট্যাটিক), <progress> = টাস্ক প্রগ্রেস (ডাইনামিক)۔
<time datetime="..."> এট্রিবিউট সবসময় ব্যবহার করুন মেশিন-রিডেবিলিটির জন্য।