এইচটিএমএল ডিভ টিউটোরিয়াল (বাংলায়)

<div> ট্যাগ হলো এইচটিএমএল-এর একটি ব্লক-লেভেল উপাদান যা কন্টেন্ট গ্রুপ করতে এবং ওয়েব পেজের লেআউট তৈরি করতে ব্যবহৃত হয়। এই টিউটোরিয়ালে আমরা শিখব কীভাবে <div> ব্যবহার করা যায় এবং সিএসএস দিয়ে স্টাইল করা যায়।

১. <div> ট্যাগ কী?

<div> হলো একটি ব্লক-লেভেল উপাদান যা:

• কন্টেন্টকে গ্রুপ করে।
• লেআউট তৈরির জন্য কন্টেইনার হিসেবে কাজ করে।
• সিএসএস দিয়ে স্টাইলিং এবং পজিশনিংয়ের জন্য ব্যবহৃত হয়।
• অন্যান্য এইচটিএমএল উপাদান (যেমন <p>, <img>) ধারণ করতে পারে।

২. <div> ব্যবহারের উদাহরণ

<div class="div-example">
    <h4>এটি একটি ডিভ</h4>
    <p>এই ডিভের মধ্যে একটি হেডিং এবং প্যারাগ্রাফ আছে।</p>
</div>
            

<style>
    .container {
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
        background-color: #ffffff;
        border-radius: 5px;
    }
</style>
<div class="container">
    <h4>কেন্দ্রীভূত কন্টেন্ট</h4>
    <p>এই ডিভটি কন্টেন্টকে কেন্দ্রে রাখতে এবং স্টাইল করতে ব্যবহৃত হয়।</p>
</div>
            

<style>
    .flex-container {
        display: flex;
        gap: 10px;
        margin: 10px 0;
    }
    .flex-item {
        flex: 1;
        background-color: #2d3436;
        color: white;
        padding: 10px;
        text-align: center;
        border-radius: 5px;
    }
</style>
<div class="flex-container">
    <div class="flex-item">আইটেম ১</div>
    <div class="flex-item">আইটেম ২</div>
    <div class="flex-item">আইটেম ৩</div>
</div>
            

<div class="div-example">
    <h4>বাইরের ডিভ</h4>
    <div class="div-example">
        <p>এটি ভিতরের ডিভ।</p>
    </div>
</div>
            

৩. <div> ব্যবহারের টিপস

• লেআউট তৈরির জন্য <div> ব্যবহার করুন, তবে সিমান্টিক ট্যাগ (<header>, <section>) প্রাধান্য দিন।
• ক্লাস বা আইডি ব্যবহার করে ডিভগুলো স্টাইল করুন।
• ফ্লেক্সবক্স বা গ্রিড ব্যবহার করে আধুনিক লেআউট তৈরি করুন।
• অতিরিক্ত নেস্টিং এড়িয়ে কোড পরিষ্কার রাখুন।
• অ্যাক্সেসিবিলিটির জন্য সঠিক এইচটিএমএল গঠন বজায় রাখুন।