প্রত্যেকটি এইচটিএমএল এলিমেন্ট এর ডিফল্ট ডিসপ্লে ভেলু আছে । এবং এই ডিফল্ট ডিসপ্লে ভেলু গুলো হচ্ছে block ও inline
HTML Element গুলোর আচরনের উপর ভিত্তি করে এদের দুই ভাগে ভাগ করা যায় । যেমন ব্লক লেভেল এলিমেন্ট ও ইনলাইন এলিমেন্ট
ব্লক লেভেল এলিমেন্ট
যে এইচটিএমএল এলিমেন্ট গুলো নিজে থেকেই নতুন লাইন তৈরি করতে পারে এবং একটার পর আর একটি নতুন লাইন এ বসে, সেগুলো ব্লক এলিমেন্ট। যেমন <div> <p> ইত্যাদি এলিমেন্ট গুলো ।
উদাহরণ
<h1>h1 to h6 are block level elements</h1> <div> The element is a block-level element. </div> <p> p also a block-level element as it is also creating new lines </p>
ব্লক লেভেল এলিমেন্ট গুলো নিচে দেয়া হলো
উপরের সবগুরো ব্লক এলিমেন্ট ।
ইনলাইন এলিমেন্ট
যে এইচটিএমএল এলিমেন্ট গুলো নিজে থেকেই নতুন লাইন তৈরি করতে পারেনা এবং পাশাপাশি বসে যেগুলো বলা হয় ইনলাইন এলিমেন্ট। যেমন <i> <b> <strong> <mark> ইত্যাদি এলিমেন্ট গুলো ।
উদাহরণ
<p> this is an <span>Inline </span> <span> elememts </span> <i>example</i> </p>
নিচে ইনলাইন এলিমেন্ট গুলো দেয়া হলোঃ
উপরের HTML Element গুলো সব ইনলাইন এলিমেন্ট ।
Block-Lelel Element গুলোকে পাশাপাশি বসালেও তারা নতুন লাইন তৈরি করে প্রদর্শিত বা ডিসপ্লে হবে, আর InLine Element গুলোকে নতুন নতুন লাইন এ নিলেও পাশাপাশি বসবে ।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title> Block and Inline Elements example</title>
</head>
<body>
<h3>নিচের গুলো Block Element এর উদাহরণ </h3>
<p> ১ </p> <p> ২</p> <p> ৩ </p>
<div>1</div> <div>2</div> <div>3</div>
<h3>নিচের গুলো Inline Element এর উদাহরণ </h3>
<p>
this is an <span>Inline </span>
<span> elememts </span>
<i>example</i>
</p>
</body>
</html>Note: একটি inline এলিমেন্ট এর ভেতরে একটি Block-Level এলিমেন্ট থাকতে পারেনা
<div> Element
<div> Element টি সাধারনত HTML এ কন্টেইনার হিসেবে ব্যবহার হয়।
<div> এর সাথে কোন এট্রিবিউট দরকার না হলেও style, class ও id এই attribute গুলো ব্যবহার হয়।
যখন CSS ব্যবহার করা হয় <div> এর সাথে, তখন এটিকে বক্স আকারে প্রকাশ করা যায় ।
উদাহরণ
<div style="background:LightGrey; padding:30px;">
<h1>Bangladesh</h1>
<p>
Bangladesh is a small sized country with a Big heart!
It is the eighth-most populous country in the world.
Bangladesh is the only country in the world that was created on the basis of language and ethnicity
</p>
</div><span> Element
<span> Element টি একটি ইনলাইন কন্টেইনার এবং এটি ব্যবহার হয় লেখার একটি পার্ট বা ডকুমেন্ট এর একটি পার্ট কে ধারন করতে ।
<div> এর মতোই <span> সাথে কোন এট্রিবিউট দরকার না হলেও style, class ও id এই attribute গুলো ব্যবহার হয়।
<span> এর সাথে CSS ব্যবহার করে টেস্ট কে সাজানো যায়
উদাহরণ
<h1>Bangladesh</h1> <p> <span style="color:green">Bangladesh</span> is a small sized country with a <span style="font-size:20px">Big heart</span>! It is the eighth-most populous country in the <span style="color:red">world</span>. </p>
ব্লক ও ইনলাইন এলিমেন্ট এর ভিডিও টিউটোরিয়াল
বিষয় সম্পর্কে আরো ভালো ধারনা পেতে নিচের ব্লক ও ইনলাইন এলিমেন্ট এর উপরে ভিডিও টি দেখে নিতে পারেন ।