এক্সএইচটিএমএল (XHTML) ডকুমেন্টে <div> এবং <span> ট্যাগ দুটি অত্যন্ত গুরুত্বপূর্ণ। এগুলো সেমান্টিকভাবে নির্দিষ্ট কিছু কাজ করে না, তবে CSS (Cascading Style Sheets) বা JavaScript (JS) ব্যবহার করে এই উপাদানগুলিকে কাস্টমাইজ বা নিয়ন্ত্রণ করা যায়। এই ট্যাগগুলোর সাহায্যে HTML স্ট্রাকচার গঠন করা যায় এবং ওয়েব পেজের ভিজ্যুয়াল লেআউট এবং ফর্ম্যাটিং উন্নত করা যায়।
১. <div> ট্যাগের ব্যবহার
১.1 <div> ট্যাগের উদ্দেশ্য
<div> ট্যাগ একটি ব্লক-লেভেল উপাদান (block-level element) যা পেজের বড় অংশ বা সেকশনের বিভাজন করতে ব্যবহৃত হয়। এটি সাধারণত ওয়েব পেজের বিভিন্ন সেকশন বা গ্রুপিংয়ের জন্য ব্যবহৃত হয়, যেমন হেডার, ফুটার, সাইডবার ইত্যাদি।
১.2 <div> ট্যাগের গঠন
<div>
<h1>Welcome to My Website</h1>
<p>This is a paragraph inside a div element.</p>
</div>
এখানে <div> ট্যাগটি একটি সেকশন বা গ্রুপ তৈরি করেছে এবং তার মধ্যে একটি <h1> হেডিং এবং একটি <p> প্যারাগ্রাফ রয়েছে।
১.3 <div> ট্যাগের ব্যবহার কেস
- কন্টেন্ট গ্রুপিং: একাধিক উপাদানকে একত্রিত করতে এবং সেগুলোর জন্য একসাথে CSS প্রযোজ্য করতে
<div>ট্যাগ ব্যবহার করা হয়।
<div class="header">
<h1>My Website</h1>
<p>Welcome to my site!</p>
</div>
- লেআউট কন্ট্রোল: ওয়েব পেজের লেআউটের জন্য
divট্যাগের ব্যবহার প্রচলিত। সিএসএস দিয়ে লেআউট কাস্টমাইজ করা যায়।
<div class="content">
<p>This is the main content of the webpage.</p>
</div>
১.4 <div> এবং CSS
<div> ট্যাগের মধ্যে থাকা উপাদানগুলোর ডিজাইন বা স্টাইল কাস্টমাইজ করতে সিএসএস ব্যবহার করা হয়।
<head>
<style>
.content {
background-color: lightblue;
padding: 20px;
}
</style>
</head>
<body>
<div class="content">
<p>This section has a light blue background.</p>
</div>
</body>
২. <span> ট্যাগের ব্যবহার
২.1 <span> ট্যাগের উদ্দেশ্য
<span> ট্যাগ একটি ইনলাইন উপাদান (inline element) যা সাধারণত একটি নির্দিষ্ট অংশের স্টাইল বা কার্যকারিতা পরিবর্তন করতে ব্যবহৃত হয়। এটি ব্লক লেভেল উপাদানের তুলনায় ছোট এবং প্রাথমিকভাবে টেক্সট বা একক উপাদানগুলোর মধ্যে প্রয়োগ করা হয়।
২.2 <span> ট্যাগের গঠন
<p>Welcome to <span style="color: red;">my website</span>!</p>
এখানে <span> ট্যাগটি শুধুমাত্র "my website" টেক্সটটির রঙ পরিবর্তন করেছে। এটি পুরো প্যারাগ্রাফকে প্রভাবিত না করে শুধুমাত্র টেক্সটের একটি অংশকে প্রভাবিত করেছে।
২.3 <span> ট্যাগের ব্যবহার কেস
- টেক্সট অংশের স্টাইল পরিবর্তন: একক টেক্সটের একটি অংশে স্টাইল প্রয়োগ করতে
<span>ট্যাগ ব্যবহার করা হয়। যেমন:
<p>My favorite color is <span style="color: blue;">blue</span>.</p>
- আইকন বা ছোট উপাদান যোগ করা:
<span>ট্যাগ ব্যবহার করে ছোট আইকন বা চিত্রও যোগ করা যেতে পারে।
<p>Click <span class="icon">😀</span> to smile!</p>
২.4 <span> এবং CSS
<span> ট্যাগে স্টাইল প্রয়োগ করতে সিএসএস ব্যবহার করা যেতে পারে, যেমন:
<head>
<style>
.highlight {
background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<p>We are learning about <span class="highlight">XHTML</span> and <span class="highlight">CSS</span>.</p>
</body>
এখানে span ট্যাগের মধ্যে থাকা টেক্সটের ব্যাকগ্রাউন্ড রঙ হল হলুদ এবং এটি বোল্ড ফন্টে প্রদর্শিত হবে।
৩. <div> এবং <span> এর মধ্যে পার্থক্য
৩.1 ব্লক-লেভেল বনাম ইনলাইন
<div>একটি ব্লক-লেভেল ট্যাগ। এটি নতুন লাইন থেকে শুরু হয় এবং পূর্ণ প্রস্থে জায়গা নেয়।<span>একটি ইনলাইন ট্যাগ। এটি টেক্সটের মধ্যে অংশ হিসাবে ব্যবহৃত হয় এবং টেক্সটের পরবর্তী উপাদানের পাশে অবস্থান নেয়।
৩.2 কন্টেন্টের আকার এবং স্টাইল
<div>ট্যাগের মাধ্যমে সাধারণত বড় সেকশন বা কন্টেন্ট ব্লক তৈরি করা হয়, যেখানে একাধিক উপাদান থাকতে পারে।<span>ট্যাগটি ছোট উপাদান বা টেক্সটের অংশের জন্য ব্যবহৃত হয় এবং এটি টেক্সটের স্টাইল পরিবর্তন করতে সহায়ক।
৩.3 প্রধান ব্যবহারের ক্ষেত্র
<div>সাধারণত বড় স্কেল লেআউট বা সেকশনের জন্য ব্যবহৃত হয়, যেমন কন্টেন্ট, নেভিগেশন, হেডার বা ফুটার সেকশন।<span>সাধারণত ছোট টেক্সট অংশ বা উপাদানগুলি স্টাইল করার জন্য ব্যবহৃত হয়।
<div> এবং <span> ট্যাগ এক্সএইচটিএমএল (XHTML) ডকুমেন্টে সাধারণত কাঠামোগত এবং ভিজ্যুয়াল স্টাইলিংয়ের জন্য ব্যবহৃত হয়। <div> ট্যাগ বড় সেকশনের জন্য ব্যবহৃত হয়, যেখানে একাধিক উপাদান থাকতে পারে, এবং <span> ট্যাগ ছোট উপাদান বা টেক্সট অংশের জন্য ব্যবহৃত হয়। সিএসএস এবং জাভাস্ক্রিপ্ট ব্যবহার করে এগুলোর মাধ্যমে ডিজাইন ও কার্যকারিতা কাস্টমাইজ করা যায়।
