সিরিজের অষ্টম পর্ব — Div, Span ও Layout বেসিক।
আগের পর্বে আমরা শিখেছি Semantic HTML — header, nav, main, footer এর মতো অর্থবহ ট্যাগ। কিন্তু সবসময় কি পেজের প্রতিটা অংশের জন্য একটা নির্দিষ্ট semantic ট্যাগ পাওয়া যায়? না। তখন কাজে লাগে <div> আর <span>।
<div> কী?
<div> মানে "division" — এটা একটা জেনেরিক কনটেইনার, যার নিজের কোনো semantic অর্থ নেই। এটা শুধু কন্টেন্টকে গ্রুপ করার জন্য ব্যবহার হয়, বিশেষ করে CSS দিয়ে স্টাইল করার জন্য:
<div> <h2>প্রোডাক্ট কার্ড</h2> <p>দাম: ৫০০ টাকা</p> </div>
টিপস: আগে সবসময় ভাবো — এই জায়গায় কি কোনো semantic ট্যাগ (section, article, aside...) খাটে? যদি না খাটে, তাহলেই <div> ব্যবহার করো।
Block vs Inline Element
HTML-এর প্রতিটা এলিমেন্ট মূলত দুই ধরনের হয় — এটা বোঝা খুব গুরুত্বপূর্ণ, কারণ পরে CSS দিয়ে লেআউট বানানোর সময় এই কনসেপ্টটাই সবকিছুর ভিত্তি।
| ধরন | বৈশিষ্ট্য | উদাহরণ |
|---|---|---|
| Block | নতুন লাইন থেকে শুরু হয়, পুরো width দখল করে নেয় | div, p, h1-h6, ul, table |
| Inline | লাইনের মধ্যেই বসে থাকে, শুধু নিজের কন্টেন্ট যতটুকু জায়গা লাগে ততটুকু দখল করে | span, a, strong, em, img |
একটা উদাহরণ দিয়ে পার্থক্যটা দেখি:
<div>ব্লক ১</div> <div>ব্লক ২</div> <span>ইনলাইন ১</span> <span>ইনলাইন ২</span>
উপরের কোডে দুইটা div আলাদা আলাদা লাইনে দেখাবে, কিন্তু দুইটা span একই লাইনে পাশাপাশি দেখাবে — যেন কিছুই আলাদা করেনি।
<span> কখন ব্যবহার হয়
কোনো প্যারাগ্রাফের একটা নির্দিষ্ট অংশকে আলাদা করে স্টাইল দিতে চাইলে <span> ব্যবহার হয়, যেহেতু <div> ব্যবহার করলে লাইন ভেঙে যাবে:
<p>আমার প্রিয় রং হলো <span>নীল</span> এবং <span>সবুজ</span>।</p>
id vs class
এলিমেন্টকে চিহ্নিত করার জন্য দুইটা গুরুত্বপূর্ণ অ্যাট্রিবিউট আছে — id ও class। দেখতে প্রায় একইরকম মনে হলেও এদের নিয়ম আলাদা।
id |
class |
|
|---|---|---|
| পেজে ব্যবহার | একবারই — ইউনিক হতে হবে | একাধিক এলিমেন্টে বারবার |
| ব্যবহারের উদ্দেশ্য | একটা নির্দিষ্ট এলিমেন্টকে চিহ্নিত করা (যেমন anchor link, form field) | একই ধরনের একাধিক এলিমেন্টে একই স্টাইল দেওয়া |
| CSS সিলেক্টর | #idname |
.classname |
<div id="header">এটা পেজে একবারই থাকবে</div> <div class="card">কার্ড ১</div> <div class="card">কার্ড ২</div> <div class="card">কার্ড ৩</div>
একটা এলিমেন্টে একসাথে একটা id এবং একাধিক class থাকতে পারে (স্পেস দিয়ে আলাদা করে):
<div id="main-card" class="card featured"> বিশেষ কার্ড </div>
টিপস: সাধারণ নিয়ম হলো — class ব্যবহার করো CSS স্টাইলিং-এর জন্য (কারণ একই স্টাইল বারবার লাগে), আর id ব্যবহার করো JavaScript দিয়ে একটা নির্দিষ্ট এলিমেন্ট খুঁজে বের করতে বা পেজের ভেতরে anchor link (#section) বানাতে।
<div> দিয়ে নেস্টেড লেআউট
বাস্তব ওয়েবপেজে div-এর ভেতরে div বসিয়ে জটিল লেআউট তৈরি করা হয়:
<div class="card">
<div class="card-image">
<img src="product.jpg" alt="প্রোডাক্ট">
</div>
<div class="card-content">
<h3>প্রোডাক্টের নাম</h3>
<p>দাম: ৫০০ টাকা</p>
</div>
</div>
এভাবেই এখনকার প্রায় সব মডার্ন ওয়েবসাইট বানানো হয় — semantic ট্যাগ দিয়ে বড় কাঠামো, আর div/span দিয়ে ভেতরের ছোট ছোট গ্রুপিং, তারপর CSS class দিয়ে সবকিছু স্টাইল করা হয় (এটা আমরা পরের সিরিজে বিস্তারিত শিখবো)।
একটা সম্পূর্ণ উদাহরণ
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>Div ও Span উদাহরণ</title>
</head>
<body>
<div id="page-wrapper">
<div class="card">
<h2>জ্যাকেট</h2>
<p>দাম: <span class="price">১২০০ টাকা</span></p>
</div>
<div class="card">
<h2>জুতা</h2>
<p>দাম: <span class="price">৮০০ টাকা</span></p>
</div>
</div>
</body>
</html>
নিজে চেষ্টা করো
Exercise:
- তিনটা
divবানাও, প্রতিটাতেclass="card"দাও - প্রতিটা card-এর ভেতরে একটা heading ও একটা paragraph রাখো
- একটা paragraph-এর ভেতরে একটা শব্দকে
<span>দিয়ে আলাদা করো - একটা div-কে
id="featured"দাও, বাকিগুলোতে দিয়ো না
পরের পর্বে যা থাকছে
পর্ব ৯-এ আমরা শিখবো Media Elements — <audio>, <video>, এবং <iframe>, উদাহরণসহ।
প্রশ্ন থাকলে কমেন্টে জানাতে পারো।