HTML <div> এলিমেন্ট কীভাবে ব্যবহার করবেন তা শিখুন।
<div> এলিমেন্টটি একটি জেনেরিক কন্টেইনার এলিমেন্ট যা কন্টেন্ট ডিভাইড, গ্রুপ এবং এনক্যাপসুলেট করতে ব্যবহৃত হয়।
আপনার কনটেক্সটের সাথে কোনো সিম্যান্টিক HTML এলিমেন্টের মেনিং না মিললে, অথবা আপনি নিশ্চিত না হলে শুধু তখন <div> এলিমেন্ট ব্যবহার করা উচিত।
সিম্যান্টিক মার্কআপ হচ্ছে এমন HTML এলিমেন্ট ব্যবহার করা যা আপনার ভিতরে রাখা কন্টেন্টের অর্থ/ফাংশন বর্ণনা করে। <div> এলিমেন্ট একটি জেনেরিক/নন-সিম্যান্টিক এলিমেন্ট।
<div> এলিমেন্টের ব্যবহারের ক্ষেত্র
মান লইয়ে নিন আপনার ওয়েবসাইটের জন্য একটি রিঅসেবল মডাল কম্পোনেন্ট কোড করছেন, যা সাইট ভিজিটরদের নিউজলেটার সাবস্ক্রাইব করতে উৎসাহিত করবে।
এক্সক্লুসিভ সিম্যান্টিক HTML ট্যাগ নেই যাতে এমন কম্পোনেন্ট ডিফাইন করা যায়, তাই এটা জেনেরিক <div> কন্টেইনার এলিমেন্ট ব্যবহার করার পারফেক্ট উদাহরণ:
<div class="subscribe-modal"> <form id="contact" method="post" action=""> <fieldset> <h3>আমার নিউজলেটার সাবস্ক্রাইব করুন</h3> <input name="email" id="email" type="email" placeholder="এখানে আপনার ইমেইল ঠিকানা দিন" required /> <input type="submit" name="submit" class="submit" value="সাবস্ক্রাইব!" /> </fieldset> </form> </div><div> ট্যাগ কন্টেইনার এলিমেন্ট ডিফাইন করার জন্য ব্যবহৃত অনেক HTML ট্যাগের একটি। সবচেয়ে কমন ব্যবহৃত HTML কন্টেইনার এলিমেন্টগুলো হচ্ছে:
<article>,<section>, <main> , <header>, <footer>,<form>।
যদি উপরের কোনো এলিমেন্ট আপনার কন্টেন্টের জন্য কন্টেইনার হিসেবে ব্যবহার করার যোগ্য লাগে, তবে জেনেরিক <div> ব্যবহার না করে সেগুলো ব্যবহার করুন।
কেন? কারণ উপরের সবগুলো সিম্যান্টিক এলিমেন্ট ট্যাগ যখন <div> একটি নন-সিম্যান্টিক ট্যাগ যা কোনো স্পেসিফিক কনটেক্সট প্রদান করে না।
<div> এলিমেন্ট সম্পর্কে জানা দরকার
<div> এলিমেন্টের ভিতরে যেকোনো টাইপের কন্টেন্ট রাখা যায়।
যদিও সিম্যান্টিক মার্কআপ সাধারণত রিকমেন্ড করা হয়, কিন্তু ব্রাউজার আপনার পেজ বুঝতে এবং ইউজারকে রেন্ডার করতে সেটি আবশ্যিক নয়।
তবে, যদি আপনি এমন সিচুয়েশনে জেনেরিক/নন-সিম্যান্টিক HTML এলিমেন্ট ব্যবহার করেন যেখানে HTML-ই ইতিমধ্যে সিম্যান্টিক ট্যাগ দিয়ে আছে, তবে সেটি আপনার SEO-কে আহত করতে পারে।
সাধারণত, আমি <div> এলিমেন্ট ব্যবহার করি যদি আমি নিশ্চিত নই কোন HTML এলিমেন্ট ব্যবহার করব, কারণ আমি ভুল এলিমেন্টের চেয়ে জেনেরিক এলিমেন্ট ব্যবহার করতেই ভালো বোঝাই। বসাইড, টেকনিক্যাল দৃষ্টিকোণ থেকে <div> এলিমেন্ট ভুল ব্যবহার করা সম্ভব নয় — শুধু সিম্যান্টিক দৃষ্টিকোণ থেকে।
