HTML5 Features - এইচটিএমএল ৫ ফিচার (পর্ব ২০)

HTML5 Features - এইচটিএমএল ৫ ফিচার

HTML5 হচ্ছে HTML-এর সবচেয়ে আধুনিক ভার্সন যা ওয়েবকে আরও গতিশীল এবং ইন্টারঅ্যাকটিভ করেছে।এতে যুক্ত হয়েছে নতুন নতুন Semantic ট্যাগ, মাল্টিমিডিয়া হ্যান্ডলিং, ইনপুট টাইপ, অ্যাপ্লিকেশন API সহ আরও অনেক কিছু।HTML5-এর এই ফিচারগুলো ব্যবহার করে আমরা CSS ও JavaScript ছাড়াও অনেক কাজ সহজে করতে পারি।

এই ভিডিওতে আমরা দেখবো HTML5-এ আসা কিছু গুরুত্বপূর্ণ ট্যাগ যেমন: <header>, <footer>, <section>, <article>, <audio>, <video>, <input type="date"> ইত্যাদি।
তাহলে চল, কোড উদাহরণ দেখে শুরু করি।

💻 HTML কোড উদাহরণ:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML5 Features Demo</title>
</head>
<body>

  <header>
    <h1>HTML5 Demo Page</h1>
  </header>

  <section>
    <article>
      <h2>New Semantic Tags</h2>
      <p>HTML5 introduced new semantic tags like &lt;section&gt;, &lt;article&gt;, &lt;header&gt;, &lt;footer&gt; etc.</p>
    </article>
  </section>

  <section>
    <h2>Audio and Video</h2>
    <audio controls>
      <source src="audio.mp3" type="audio/mpeg">
      Your browser does not support the audio element.
    </audio>

    <video controls width="320">
      <source src="video.mp4" type="video/mp4">
      Your browser does not support the video tag.
    </video>
  </section>

  <section>
    <h2>New Input Types</h2>
    <form>
      <label>Date of Birth: <input type="date"></label><br>
      <label>Email: <input type="email"></label><br>
      <label>Range: <input type="range" min="0" max="100"></label>
    </form>
  </section>

  <footer>
    <p>&copy; 2025 HTML5 Demo</p>
  </footer>

</body>
</html>

📘 প্রতিটি লাইনের ব্যাখ্যা:

✅ `<!DOCTYPE html>`

👉 HTML5-এর ডকুমেন্ট টাইপ ডিক্লেয়ারেশন। এটি খুব সহজ এবং সব ব্রাউজার সাপোর্ট করে।

✅ `<header>`, `<footer>`, `<section>`, `<article>`

👉 এগুলো Semantic Tags, যেগুলো পেজের বিভিন্ন অংশকে অর্থপূর্ণভাবে আলাদা করে।
👉 এগুলোর মাধ্যমে ব্রাউজার ও স্ক্রিন রিডার সহজেই কনটেন্ট বুঝতে পারে।

✅ `<audio>` এবং `<video>`

👉 HTML5 এর মাধ্যমে এখন ব্রাউজারেই অডিও ও ভিডিও প্লে করা যায়।
👉 আলাদা প্লাগইনের দরকার পড়ে না (যেমন Flash)।
👉 controls অ্যাট্রিবিউট দিলে ইউজার Play/Pause করতে পারে।

✅ `<input type="date">`, `type="email"`, `type="range"`

👉 HTML5-এ নতুন ইনপুট টাইপ এসেছে, যা ইউজার ইন্টারঅ্যাকশন সহজ করে।
👉 যেমন:

type="date" → ক্যালেন্ডার থেকে তারিখ সিলেক্ট করা যায়।
type="email" → ইমেইল ফর্ম্যাট চেক করে।
type="range" → স্লাইডার ব্যবহার করে মান বাছাই করা যায়।

Topic Covered: HTML5 Features, এইচটিএমএল ৫ ফিচার, features of html5

HTML5 Features - এইচটিএমএল ৫ ফিচার (পর্ব ২০)