এইচটিএমএল <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;
}