এইচটিএমএল সিএসএস জাভাস্ক্রিপ্ট পিএইচপি এসকিউএল জেকুয়েরি বুটস্ট্রাপ সি প্রোগ্রামিং
ফোরাম
 

এইচটিএমএল <div> ট্যাগ


<div> ট্যাগের ব্রাউজার সাপোর্ট



এলিমেন্ট Google Chrome Edge / IE Mozila Firefox Safari Opera
<div> সকল ভার্সন সকল ভার্সন সকল ভার্সন সকল ভার্সন সকল ভার্সন




সংজ্ঞা ও ব্যবহার

<div> ট্যাগটি হলো একটি ব্লক-লেভেল এলিমেন্ট।

এইচটিএমএল ডকুমেন্টের মধ্যে আলাদা আলাদা Division বা Section তৈরি করার জন্য <div> ট্যাগটি ব্যবহার করা হয়।

<div> ট্যাগের মাধ্যমে ব্লক-লেভেল এলিমেন্টগুলোকে একটি গ্রুপের আওতায় এনে খুব সহজে সিএসএস(স্টাইল) করা যায়।

এইচটিএমএলের ট্যাগগুলোর যেমন স্পেসিফিক অর্থ থাকে <div> ট্যাগ সেরকম কোন অর্থ বহন করে না। সাধারনত এর মধ্যে অন্যান্য এইচটিএমএল এলিমেন্টগুলোকে রাখা হয়।
<div> ট্যাগে সিএসএস ব্যাবহার করে কোনো ডিজাইন বা স্টাইল করলে এর মধ্যের সবগুলো এলিমেন্টে এর প্রভাব পড়বে।
<div> ট্যাগ ব্যাবহার করে আমরা সহজে এইচটিএমএল এলিমেন্টের জন্য নতুন নতুন কন্টেইনার তৈরি করতে পারি।



<div> এলিমেন্টের মাধ্যমে কিভাবে ডকুমেন্টের একটি সেকশনকে সহজে স্টাইল করা যায় তা নিচের উদাহরণে দেখানো হলোঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <style>
  div {
    background: green;
    color: white;
    border: 3px solid red;
    padding: 10px;
  }
  </style>
</head>
<body>
    
  <div>
  <h3>স্যাট একাডেমী</h3>
  <p>স্যাট একাডেমীর ওয়েবসাইটের মাধ্যমে আপনি খুব সহজে বাংলায় প্রোগ্রামিং শিখতে পারবেন।
  </div>
      
  <p>স্যাটের ওয়েবসাইটের মাধ্যমে আপনি বাংলায় এইচটিএমএল, সিএসএস, জাভাস্ক্রিপ্ট, পিএইচপি, সি প্রোগ্রামিং,
     সি++ প্রোগ্রামিং শিখতে পারবেন।</p>

</body>
</html>

ফলাফল





টীকা ও মন্তব্যঃ

  • ওয়েবপেজের লে-আউট তৈরি করার জন্য <div> এলিমেন্টে সিএসএস ব্যবহার করুন।
  • ডিফল্টভাবে, ব্রাউজার সবসময় <div> এলিমেন্টের এর পুর্বে এবং পরে একটি লাইন ব্রেক নেয়।
    যাইহোক, আপনি চাইলে এটি সিএসএসের মাধ্যমে পরিবর্তন করতে পারবেন।


এট্রিবিউট

নিচের টেবিলে <div> ট্যাগের এট্রিবিউট, এট্রিবিউটের ভ্যালু এবং তাদের ব্যবহার তুলে ধরা হলোঃ

এট্রিবিউট ভ্যালু বর্ণনা
align left
right
center
justify
এইচটিএমএল(৫) এ সাপোর্ট করে না।
<div> এলিমেন্টের ভিতরের কন্টেন্টের এলাইনমেন্ট নির্দিষ্ট করে।


<div> ট্যাগে গ্লোবাল এবং ইভেন্ট এট্রিবিউট সাপোর্ট করে কিনা?

গ্লোবাল এট্রিবিউট ইভেন্ট এট্রিবিউট
সাপোর্ট করে সাপোর্ট করে


<div> ট্যাগের ডিফল্ট স্টাইল

অধিকাংশ ব্রাউজারেই <div> এলিমেন্টটি নিম্নলিখিত স্টাইল ভ্যালুগুলো সহকারে প্রদর্শিত হয়ঃ

div {
    display: block;
  }


সম্পর্কিত পেজ