HTML Element

আমরা দেখেছি, HTML ট্যাগ এর মাঝে কিছু কন্টেন্ট থাকে। এই সবগুলো কে একসাথে HTML Element বলে।যেমনঃ 

<b>I am Bold </b>

হল একটি HTML Element,   I am bold হল কন্টেন্ট।

HTML Element এর প্রকার ভেদ

HTML Element দুই প্রকারঃ ১.  Block Level Element  ২. Inline Element

• Block Level Element:   ব্লক লেবেল ইলিমেন্ট কি বুঝার জন্য আমরা সরাসরি একটি উদাহরন দেখব। নিচের কোডটি চিন্তা করুনঃ

উপরের কোডটির আউটপুট আপনার ব্রাউজারে দেখতে নিচের মতঃ

আউটপুটটি লক্ষ্যকরুন, Paragrap1 লেখাটি যতটুকু জায়গা দখল করে আছে সেই জায়গাটুকু কে সবুজ দাগ দিয়ে চিহ্নিত করেছি। সামনের ফাকা জায়গাটা Paragrap2 এর জন্য ছেড়ে দিতে পারত। অর্থাৎ নিচের মত করে থাকতে পারতঃ

প্রথম p ট্যাগ টা ১০০% জায়গা নিয়ে আছে। একইভাবে, দ্বিতীয় p ট্যাগটা ১০০% জায়গা নিয়ে আছে। ১০০% জায়গা নিয়ে একটি ব্লক তৈরি করে আছে বলে এই p ট্যাগ কে ব্লক লেবেল ইলেমেন্ট (Block level element) বলে।

অর্থাৎ, যেই ইলেমেন্ট নিজের জন্য যতটুকু জায়গা দরকার ততটুকু জায়গা নিয়ে বাকি জায়গাও দখল করে নেয় সেই ইলেমেন্ট কে Block Level Element বলে।

আপনার মনে কি নিচের মত একটা ব্যাখ্যা ঘুরপাক খাচ্ছে?

<p> Paragraph1 </p>

এর পরে নতুন লাইন থেকে

<p> Paragraph2 </p>

লেখা হয়েছে তাই দ্বিতীয়  ট্যাগ টা নতুন লাইন থেকে প্রিন্ট হয়েছে। সহজ ব্যাখ্যা। আবার ব্লক লেবেল ইলেমেন্ট এর ব্যাপার আনার কি দরকার? আপনি এভাবে ভেবে থাকলে নিজেকে নিয়ে গর্ব করতে পারেন, এরকম বিশ্লেষন ধর্মী মানুষ খুবই কম। আসলে HTML ল্যাঙ্গুয়েজে আপনি কোন ট্যাগ এর পর কয়টা স্পেস দিলেন কত লাইন পরে আরেকটা লাইন লিখেন সেটা HTML বুঝে না। স্পেস বা নতুন লাইন দেওয়া যেই কথা না দেওয়া একই কথা। যেমন উপরের কোড টা নিচের মত লিখলেও একই আউটপুট দেখতে পাবেনঃ

HTML এর কোডগুলো এভাবে ভেঙ্গে ভেঙ্গে লেখা হয় কেন? কারন এভাবে লেখলে দেকতে সুন্দর দেখায় এবং পড়তে সহজ হয়।

• Inline Element:  এটা হল ব্লক লেবেল ইলেমেন্ট এর ঠিক বিপরীত। অর্থাৎ, যেই ইলেমেন্ট নিজের জন্য যতটুকু জায়গা দরকার ততটুকু জায়গা নিয়ে বাকি জায়গা পরবর্তী ইলেমেন্ট এর জন্য ছেড়ে দেয় সেই ইলেমেন্ট কে Inline Element বলে। যেমনঃ

<b> </b>

একটি Inline Element.

আশাকরি, আউটপুট দেখেই বুজতে পারছেন কিভাবে প্রথম

<b> </b>

ট্যাগ নিজের জায়গা দখল করার পর পরবর্তী

<b> </b>

ট্যাগ এর জন্য জায়গা ছেড়ে দিয়েছে।

---