HTML Elements
HTML Elements — উপাদান (Elements) সম্পর্কে জানুন
HTML Element হলো একটি পূর্ণাঙ্গ HTML গঠন, যা শুরু ট্যাগ, কনটেন্ট ও শেষ ট্যাগ নিয়ে তৈরি হয়। উদাহরণ:
<p>এটি একটি প্যারাগ্রাফ</p>১) HTML Element এর গঠন
একটি সাধারণ HTML Element এর গঠন তিনটি অংশে ভাগ করা যায়:
- Start Tag: যেমন <p>
- Content: যেমন “এটি একটি প্যারাগ্রাফ”
- End Tag: যেমন </p>
<h1>Hello World</h1>
Visit Example২) Empty Elements (শূন্য উপাদান)
কিছু HTML Element এর শেষ ট্যাগ থাকে না — এগুলোকে Empty Elements বলা হয়। যেমন:
<br>— লাইন ব্রেক<img>— ছবি যোগ করার জন্য<input>— ইনপুট ফিল্ড<hr>— অনুভূমিক লাইন<meta>— মেটাডেটা
<p>লাইন ১<br>লাইন ২</p>৩) Nested Elements (অন্তর্নিহিত উপাদান)
HTML Element এর ভিতরে আরেকটি Element ব্যবহার করা যায় — একে Nested Element বলে।
<div>
শিরোনাম
এটি একটি প্যারাগ্রাফ যার মধ্যে গুরুত্বপূর্ণ শব্দ আছে।
৪) ব্লক ও ইনলাইন এলিমেন্ট
HTML Element দুটি প্রধান ক্যাটেগরিতে বিভক্ত:
- Block-level Elements: সবসময় নতুন লাইন নেয় (যেমন:
<div>,<p>,<h1>) - Inline Elements: একই লাইনে থাকে (যেমন:
<span>,<a>,<img>)
<p>এটি একটি <span>ইনলাইন</span> এলিমেন্ট।</p>৫) সঠিকভাবে এলিমেন্ট বন্ধ করা
HTML লেখার সময় প্রতিটি Element সঠিকভাবে বন্ধ করা জরুরি। নিচের ভুল ও সঠিক উদাহরণ দেখুন:
<p>ভুল উদাহরণ:
Hello
World
সঠিক উদাহরণ:
Hello
World
৬) Nested Error — একটি সাধারণ ভুল
Element এর ভিতরে ভুলভাবে Nest করা হলে ব্রাউজার সেটি ঠিকভাবে রেন্ডার করে না।
<p>এটি একটি <em>ভুল <p>নেস্টিং</em></p> ❌
সঠিক: এটি একটি সঠিক নেস্টিং
✅৭) অনুশীলন (Practice)
- একটি পেজ তৈরি করুন যেখানে
<h1>,<p>,<a>ও<img>ব্যবহার হবে। - একটি Nested Structure লিখুন যেখানে
<div>এর মধ্যে ২টি<p>থাকবে। - একটি উদাহরণ তৈরি করুন যেখানে Block এবং Inline Element একই সাথে থাকবে।
