X

X

X

HTML ব্লক এবং ইনলাইন ইলামেন্ট


প্রতিটি ইলামেন্ট স্বাভাবিকভাবে তার নিজস্ব স্টাইলে প্রদর্শিত হয়। বেশিরভাগ ইলামেন্টের ডিফল্ট মান হচ্ছে ব্লক বা ইনলাইন।


ব্লক লেভেল ইলামেন্ট

ব্লক লেভেল ইলামেন্ট নতুন লাইনে শুরু হয়, এর ডান এবং বামে অন্য কোনো ইলামেন্ট থাকে না। অর্থাৎ, এটি ডানে ও বামে যতটুকু জায়গা পায় পুরোটাই দখল করে।

<div> ইলামেন্ট একটি ব্লক ইলামেন্ট।

নিচে কয়েকটি ব্লক লেভেল ইলামেন্টের নাম উল্লেখ্য করা হল:

  • <div>
  • <h1> – <h6>
  • <p>
  • <form>

ইনলাইন ইলামেন্ট

ইনলাইন ইলামেন্ট নতুন লাইন থেকে শুরু হয় না। বরং এর পূর্ববর্তী ইলামেন্ট যেখান থেকে শেষ হয়, এটি সেখান থেকেই শুরু হয়।

ইনলাইন ইলামেন্টের উদাহরণ:

  • <span>
  • <a>
  • <img>

<div> ইলামেন্ট

<div> ইলামেন্ট সাধারণত অন্যান্য ইলামেন্টের কন্টেইনার হিসাবে ব্যবহৃত হয়। এর কোনো আবশ্যিক এট্রিবিউট নেই। style, id, class ইত্যাদি এট্রিবিউট সচরাচর ব্যবহৃত হয়। যদিও এটি ব্লক ইলামেন্ট কিন্তু CSS ব্যবহার করে এর ডিফল্ট অবস্থা পরিবর্তন করা যায়। অর্থাৎ, এটিকে তখন ইনলাইনে রূপান্তর করা যায়।

Code Example

<div style="background-color:black;color:white;padding:20px;">
  <h2>London</h2>
  <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
  <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</div> 

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


<span> ইলামেন্ট

এটি সাধারণত কিছু টেক্সটের ধারক হিসেবে ব্যবহৃত হয়। এর কোনো আবশ্যিক এট্রিবিউট নেই। কিন্তু এটিতে style ও class এট্রিবিউট সচরাচর ব্যবহৃত হয়। যখন এর সাথে CSS ব্যবহার করা হয় তখন এটি একটি বড় টেক্সটের কিছু অংশকে ডিজাইন করা যায়।

Code Example

<h1>My <span style="color:red">Important</span> Heading</h1>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


HTML গ্রুপিং ট্যাগ

ট্যাগ বর্ণনা
<div> ডকুমেন্টের সেকশন বর্ণনার জন্য ব্যবহৃত হয় (block-level)।
<span> ডকুমেন্টের সেকশন বর্ণনার জন্য ব্যবহৃত হয় (inline)