HTML5 এ Block-level এবং Inline এলিমেন্টগুলো হলো এমন দুটি প্রধান ক্যাটাগরি, যেগুলো ওয়েব পেজে এলিমেন্টের প্রদর্শন পদ্ধতি এবং লেআউট ডিফাইন করে। প্রতিটি এলিমেন্ট কিভাবে অন্য এলিমেন্টের সাথে ইন্টারঅ্যাক্ট করবে, কতটুকু জায়গা নেবে, এবং কন্টেন্ট কিভাবে প্রদর্শিত হবে তা নির্ধারণ করে। নিচে এই দুটি এলিমেন্ট সম্পর্কে বিস্তারিত আলোচনা করা হলো:
Block-level Elements
বৈশিষ্ট্য
- সম্পূর্ণ প্রস্থ নেয়: Block-level এলিমেন্ট স্বয়ংক্রিয়ভাবে পুরো প্রস্থ (width) নেয়, অর্থাৎ তারা তাদের প্যারেন্ট এলিমেন্টের যতটুকু জায়গা আছে ততটুকু দখল করে।
- নতুন লাইন শুরু করে: একটি Block-level এলিমেন্ট যুক্ত করলে, এটি স্বয়ংক্রিয়ভাবে একটি নতুন লাইন শুরু করে এবং পরবর্তী কন্টেন্ট বা এলিমেন্টগুলোকে নিচে ঠেলে দেয়।
- নেস্টিং এবং অন্যান্য ব্লক এলিমেন্ট ধারণ করতে পারে: এগুলো অন্য Block-level অথবা Inline এলিমেন্ট ধারণ করতে পারে।
উদাহরণসমূহ
HTML5 এ সাধারণ কিছু Block-level এলিমেন্ট হলো:
<div>: একটি সাধারণ কন্টেইনার এলিমেন্ট যা ওয়েব পেজের একটি অংশ তৈরি করতে ব্যবহৃত হয়।<header>,<footer>,<section>,<article>,<aside>: এই সেম্যান্টিক ট্যাগগুলো HTML5 এর নতুন Block-level এলিমেন্ট, যা পেজের নির্দিষ্ট অংশ বা সেকশনকে ডিফাইন করে।<p>: প্যারাগ্রাফ তৈরি করতে ব্যবহৃত হয় এবং এটি একটি নতুন লাইন শুরু করে।<ul>,<ol>: আনঅর্ডার্ড এবং অর্ডার্ড লিস্টের জন্য ব্যবহৃত হয়।<h1>থেকে<h6>: শিরোনাম তৈরি করার জন্য ব্যবহৃত হয়, এগুলোও একটি নতুন লাইন শুরু করে।
উদাহরণ:
<div>
<h1>This is a heading</h1>
<p>This is a paragraph inside a div.</p>
</div>
উপরের উদাহরণে, <div>, <h1>, এবং <p> সকলেই Block-level এলিমেন্ট, যা নতুন লাইন শুরু করে এবং পুরো প্রস্থ দখল করে।
Inline Elements
বৈশিষ্ট্য
- শুধু প্রয়োজনীয় প্রস্থ নেয়: Inline এলিমেন্টগুলো শুধুমাত্র তাদের কন্টেন্ট অনুযায়ী প্রস্থ (width) নেয়, অর্থাৎ তারা পুরো লাইন দখল করে না।
- একই লাইনে থাকে: Inline এলিমেন্টগুলো অন্য Inline এলিমেন্টের সাথে এক লাইনে থাকে, তারা নতুন লাইন শুরু করে না।
- Block-level এলিমেন্ট ধারণ করতে পারে না: Inline এলিমেন্টগুলোর ভেতরে অন্য Block-level এলিমেন্ট রাখা যায় না, তবে অন্যান্য Inline এলিমেন্ট বা টেক্সট রাখা যায়।
উদাহরণসমূহ
HTML5 এ সাধারণ কিছু Inline এলিমেন্ট হলো:
<span>: একটি সাধারণ Inline কন্টেইনার যা ছোট টুকরো টেক্সট বা অন্য Inline এলিমেন্টের স্টাইলিং বা গ্রুপিং করার জন্য ব্যবহৃত হয়।<a>: হাইপারলিঙ্ক তৈরি করার জন্য ব্যবহৃত হয়।<img>: ছবি এম্বেড করতে ব্যবহৃত হয়।<strong>,<em>,<b>,<i>: টেক্সটকে স্টাইল করতে ব্যবহৃত হয়, যেমন বোল্ড বা ইটালিক।<label>: ফর্ম ইনপুটের লেবেল হিসেবে ব্যবহৃত হয়।
উদাহরণ:
<p>This is a <a href="#">link</a> inside a paragraph.</p>
উপরের উদাহরণে, <a> একটি Inline এলিমেন্ট যা <p> এর মধ্যে রয়েছে। এটি একটি নতুন লাইন শুরু করে না, বরং প্যারাগ্রাফের বাকী টেক্সটের সাথে একই লাইনে থাকে।
Block-level এবং Inline Elements এর তুলনা
| বৈশিষ্ট্য | Block-level Elements | Inline Elements |
|---|---|---|
| প্রস্থ | পুরো প্রস্থ নেয় | কন্টেন্ট অনুযায়ী প্রস্থ নেয় |
| লাইন ব্রেক | নতুন লাইন শুরু করে | একই লাইনে থাকে |
| এলিমেন্ট ধারণ করা | Inline এবং Block-level ধারণ করতে পারে | শুধুমাত্র Inline ধারণ করতে পারে |
| উদাহরণ | <div>, <p>, <h1> | <span>, <a>, <img> |
HTML5 এ Block-level এবং Inline এলিমেন্টগুলো পেজের স্ট্রাকচার এবং কন্টেন্টের প্রদর্শনের পদ্ধতি নির্ধারণে গুরুত্বপূর্ণ ভূমিকা পালন করে। এগুলোর সঠিক ব্যবহার ওয়েব পেজের লেআউট তৈরি, ডিজাইন করা, এবং রেস্পন্সিভিটি নিশ্চিত করতে সহায়ক।
Read more
