HTMLAdvanced

What are HTML5 semantic elements?

HTML5-এ আসা semantic elements-গুলো কী কী এবং প্রতিটি কী কাজ করে।

HTML5-এ বেশ কিছু নতুন element এসেছে যেগুলো পেজের বিভিন্ন অংশকে নাম দিয়ে চেনায়। সবচেয়ে গুরুত্বপূর্ণগুলো হলো:

<header> — পেজ বা section-এর শুরুর অংশ (শিরোনাম, লোগো)
<nav> — নেভিগেশন লিংকের জায়গা
<main> — পেজের মূল, একমাত্র কনটেন্ট
<section> — সম্পর্কিত কনটেন্টের একটি ভাগ
<article> — স্বাধীন, আত্মনির্ভর কনটেন্ট (blog post, product)
<aside> — মূল কনটেন্টের পাশের তথ্য (sidebar, বিজ্ঞাপন)
<footer> — পেজ বা section-এর শেষ অংশ (যোগাযোগ, কপিরাইট)
<figure> — ছবি + <figcaption> caption-সহ প্রেজেন্টেশন

গঠন উদাহরণhtml

html

<body>
  <header>লোগো ও মেনু</header>
  <main>
    <article>একটি সম্পূর্ণ লেখা</article>
    <aside>সাইডবার</aside>
  </main>
  <footer>কপিরাইট</footer>
</body>

মনে রাখুন

এই element-গুলো div-এর মতোই সাধারণ container, কিন্তু এরা কনটেন্টের অর্থও বোঝায় — তাই কম 'div soup', কম জটিলতা।

শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।