HTML Elements

এর আগে HTML Tag নিয়ে আলোচনা করলাম। একটা start tag (যেমন <div>) এবং end tag (যেমন </div>)  এর মাঝে যা থাকে তা সহ পুরোটি একটা Element। একটা এলিমেন্টের ভিতর ট্যাগের মতই এক বা একাধিক এলিমেন্ট থাকতে পারে বা থাকে (এটাকে nested Element বলে) নিচের উদাহরনটি দেখুন

<!DOCTYPE html>

<html>

<head> </head>

<body>

<h1>Webcoachbd demo heading</h1>

<p>demo content goes here.</p>

</body>

</html>

এখানে <html> </html> এর ভিতর যত কিছু আছে সব নিয়ে এটা একটা html এলিমেন্ট এরুপ body একটা এলিমেন্ট। একইভাবে বাকিগুলিও এক একটি এলিমেন্ট।

এলিমেন্টের ভিতর এলিমেন্ট থাকতে পারে আবার যেমন <h1></h1> এর ভিতর কোন Element নেই, যে লেখাটি আছে সেটি হচ্ছে এর content। তাই <h1></h1> এর ভিতরের লেখাটিসহ এটা h1 Element।

এই উদাহরনটি Doc Type এও দেয়া আছে, আমাদের অনলাইন এডিটরে কোডটি পেস্ট করে দেখতে পারেন বা নোটপ্যাডে লিখে .html এক্সটেনশন (যেমন index.html বা test.html) দিয়ে সেভ করে ব্রাউজারে খুলুন, এটিই হচ্ছে আউটপুট, একটা বেসিক এইচটিএমএল Document বা একটা Web page।

এই উহরনটিতে মোট ৫টি এলিমেন্ট আছে html এলিমেন্ট, head এলিমেন্ট, body, h1 এবং p এলিমেন্ট।

* ট্যাগের মত এখানে html এলিমেন্টের চাইল্ড এলিমেন্ট হচ্ছে বাকি সবগুলি এলিমেন্ট। আবার body হচ্ছে প্যারেন্ট এবং এর চাইল্ড হচ্ছে h1 p এলিমেন্ট। যে এলিমেন্টের ভিতর অন্য এলিমেন্ট থাকে সেটা হচ্ছে প্যারেন্ট এবং ভিতরের গুলি চাইল্ড এলিমেন্ট।

* ট্যাগগুলির শব্দগুলি ছোটহাতের অক্ষরে লিখতে হবে, যেমন <body> এভাবে না দিয়ে <BODY> এভাবে দিলে এটা একটা গ্রামাটিকাল ভুল। সাথে সাথে end tag টিও দিতে হবে নাহলে একই ভুল হবে।

 

যত এলিমেন্ট লেখি না কেন সব body এলিমেন্টের ভিতরই লিখতে হবে, বাকি এলিমেন্ট যেমন head ইত্যাদির ভিতর শুধু নির্দিষ্ট কিছু এলিমেন্ট লেখা যায়। ব্রাউজারে শুধু ঐটুকুরই আউটপুট আসে যেটা body এলিমেন্টের ভিতর থাকে।