<div> হল একটি জেনেরিক কন্টেইনার যা HTML-এ এলিমেন্টগুলো গ্রুপ করার জন্য ব্যবহৃত হয় যাতে CSS ব্যবহার করে उनপরে স্টাইল প্রয়োগ করা যায়; div এলিমেন্টগুলো ডিফল্টভাবে খালি থাকে এবং কাজ করার জন্য HTML এলিমেন্ট দিয়ে পূরণ করতে হয়। <div> ট্যাগগুলো জোড়ায় আসে, একটি ওপেন ট্যাগ এবং একটি ক্লোজিং ট্যাগ:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { box-sizing: border-box; } body { font-family: Arial, Helvetica, sans-serif; font-size: large; } .first { width: 500px; border: 1px solid black; padding: 20px } .square { width: 100%; height: 250px; color: white; border: none; } .blue { background-color: royalblue; border: none; } .purple { background-color: purple; border: none; } </style> </head> <body> <div class="first"> <h4>I'm a div that is holding two smaller divs.</h4> <div class="square blue">1</div> <div class="square purple">2</div> </div> </body> </html>
<div> ট্যাগ সম্পর্কে সবচেয়ে বড় জিনিসটি হলো এটি নয় একটি সিম্যান্টিক HTML এলিমেন্ট। এর মানে ট্যাগটি দেখে স্পষ্টভাবে বোঝা যায় না <div> কী করে (unlike <caption>, <address>, <section>, etc.)
যদি অতিরিক্ত ব্যবহার করা হয়, তবে এটি স্ক্রিন রিডারের ক্ষেত্রে অ্যাক্সেসিবিলিটি সমস্যা তৈরি করতে পারে। নিশ্চিত করুন <div> ট্যাগকে লাস্ট রিসোর্ট হিসেবে ব্যবহার করেন যখন কোনো সিম্যান্টিক HTML এলিমেন্ট সম্ভাব্য ভালো চয়েস হতে পারে।
<div> কন্টেইনার একটি ব্লক-লেভেল এলিমেন্ট। এটি ভিউপোর্টের পুরো প্রস্থ নেয় যদি না ডেভেলপার CSS বা ইনলাইন-স্টাইলিং দিয়ে কন্ট্রোল করে। এছাড়া, এর আগে এবং পরে একটি লাইন ব্রেক থাকে যদি না display প্রোপার্টি কোনো ইনলাইন ভ্যালু বা flex-এ চেঞ্জ করা হয়।
লেআউটের দৃষ্টিতে, div-গুলো নিম্নতর ফ্লেক্সিবল। সেগুলো একে অপরের ভিতরে নেস্টেড হতে পারে।そう言うと, <div> কন্টেইনার প্যারাগ্রাফ ব্রেক করে—তাই <p> ট্যাগের ভিতরে <div> ট্যাগ নেস্ট করবেন না। এছাড়া, হেডলাইন ট্যাগ (<h1>, <h2>, etc.) এর ভিতরে <div> কন্টেইনার ইনসার্ট করলে ওয়েরড অ্যানোমালি হয় কারণ মনে হয় <h1> জিতছে এবং <div> উপেক্ষা করা হচ্ছে।
অ্যাট্রিবিউট
HTML <div> এলিমেন্টগুলোর অ্যাক্সেস আছে HTML-এর ইভেন্ট এবং গ্লোবাল অ্যাট্রিবিউটগুলোর। ইভেন্ট অ্যাট্রিবিউটগুলো সেসব যা তখন ব্যবহৃত হয় যখন একজন ইউজার আপনার ওয়েব পেজের সাথে যেকোনোভাবে ইন্টারঅ্যাক্ট করে—উদাহরণস্বরূপ, একটি onclick, যখন একজন ইউজার একটি ইমেজে ক্লিক করে, বা একটি onmouseover, যখন একজন ইউজার তাদের মাউস একটি এলিমেন্টের ওপর নিয়ে যায়। গ্লোবাল অ্যাট্রিবিউটগুলো সেসব অ্যাট্রিবিউট যেগুলো সব HTML এলিমেন্টের জন্য উপলব্ধ।
এই HTML অ্যাট্রিবিউটগুলোর পূর্ণ তালিকা Mozilla Developer Network ওয়েবসাইটে পাওয়া যাবে।
স্টাইলিং কীভাবে করবেন
একটি <div> স্টাইল করা খুব স্ট্রেটফরওয়ার্ড এবং একাধিক উপায়ে করা যায়। ইনলাইন স্টাইলিং করা যায় <div>-এ একটি style অ্যাট্রিবিউট যোগ করে স্ট্রাইল প্রোপার্টি এবং ভ্যালু স্ট্রিং হিসেবে যোগ করে:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Inline Styling</title> <body> <div style="width:500px;border: 3px solid black; padding: 20px;"> <h4>I'm a div that is holding two smaller divs.</h4> <div style="background-color: royalblue; border: none;">1</div> <div style="background-color: purple; border: none;">2</div> </div> </body> </html>
স্টাইলিং <style> ট্যাগে HTML ডকুমেন্টের <head>-এ বা একটি এক্সটার্নাল স্টাইলশিটেও করা যায়। এটি সেখানে <div> class বা id অ্যাট্রিবিউট কাজে আসে।
Classes একাধিক এলিমেন্টে ব্যবহার করা যায় যেগুলো আপনি একইভাবে স্টাইল করতে চান। একটি id শুধু একবার ব্যবহার করা যায় একটি HTML ডকুমেন্টে। এটিকে এইভাবে চিন্তা করুন: আপনি একই গ্রেড, একই বয়স, একই শিক্ষক এবং একই বিষয়ের একাধিক ছাত্রকে একসাথে গ্রুপ করতে পারেন, কিন্তু প্রতিটি ছাত্রের তার নিজস্ব পারসোনাল id অ্যাট্রিবিউট থাকে যেটি সেটি একজন মানব হিসেবে কে কী সেটি বর্ণনা করে।
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { box-sizing: border-box; } body { font-family: Arial, Helvetica, sans-serif; font-size: large; } .first { width: 500px; border: 3px solid black; padding: 20px } .square { width: 100%; height: 250px; color: white; border: none; } #blue { background-color: royalblue; border: none; } #purple { background-color: purple; border: none; } </style> </head> <body> <div class="first"> <h4>I'm a div that is holding two smaller divs.</h4> <div id="blue" class="square">1</div> <div id="purple" class="square">2</div> </div> </body> </html>
class অ্যাট্রিবিউট এবং id অ্যাট্রিবিউট একই সময়ে একটি <div>-এ ব্যবহার করা যায়। id ক্লাস অ্যাট্রিবিউटের চেয়ে বেশি স্পেসিফিক বলা হয়, তাই সেই নির্দিষ্ট <div>-এর জন্য যেকোনো স্টাইলিং id অ্যাট্রিবিউট ব্যবহার করে করা যাবে যাতে সেটি যেকোনো ক্লাস স্টাইলিং ওভাররাইড করে।
উপসংহার
আজ আমরা শিখলাম <div> কী, এর অ্যাট্রিবিউটগুলো কী এবং এলিমেন্টটি কীভাবে স্টাইল করা হয়। <div> কন্টেইনার কীভাবে display প্রোপার্টি প্রভাবিত করে সেটি জানতে, CareerKarma-এর বক্স মডেল এবং ফ্লেক্সবক্স মডেল सम्बन्धী আর্টিকেলগুলো দেখুন।
