HTML <div> ট্যাগ
সংজ্ঞা ও ব্যবহার
<div> ট্যাগগুলি এইচটিএমএল ডকুমেন্টের ভাগ বা অংশ (ডিভিজন/সেকশন, পার্টিশন বা সেকশন) নির্দিষ্ট করে
<div> ট্যাগগুলি ডকুমেন্টকে পৃথক, ভিন্ন অংশগুলিতে ভাগ করতে পারে। এটি একটি সংকীর্ণ সংগঠন টুল হিসাবে ব্যবহৃত হতে পারে এবং কোনও ফরম্যাটকে সংযুক্ত করে না।
কোনো ধরনের কনটেন্ট রাখা যায় <div> এক্স!<div> ট্যাগ হলো HTML ইলেকমেন্টের কনটেনার, তারপর CSS-এর মাধ্যমে স্টাইল সেট করা হয় বা JavaScript-এর মাধ্যমে অপারেশন করা হয়。
ট্যাগ id বা class ট্যাগ দ্বারা <div>ট্যাগ class বা id প্রকৃতি, তাই <div> ট্যাগ স্টাইল সেট করে
নোট:ডিফল্টভাবে, ব্রাউজার সবসময় <div> ইলেকমেন্টের সামনে ও পিছনে একটি লাইন ব্রেক লাগানো হয়。
ব্যবহার
<div> একটি ব্লক ইলেকমেন্ট <div> স্বাভাবিক একক ফরম্যাটিং প্রদর্শন। এটা দ্বারা <div> এর class বা id অতিরিক্ত শৈলী প্রয়োগ করতে হবে না。
প্রত্যেকটি <div> কেবল ক্লাস বা id
একই <div> ইলেকমেন্ট প্রয়োগ class বা id প্রতিভাত এটা একটি প্রকৃতি, কিন্তু সাধারণত শুধুমাত্র একটি কেবল প্রয়োগ করা হয়। এদুটির মূল পার্থক্য হল যে, class ইলেকমেন্টের গোষ্ঠীকে (একই ধরনের ইলেকমেন্ট, বা কোনো ধরনের ইলেকমেন্টগুলোর একটি গোষ্ঠী) ব্যবহার করা হয়, এবং id একক বিনিময়যোগ্য ইলেকমেন্টকে চিহ্নিত করতে ব্যবহৃত হয়।
আরও দেখুন:
HTML শিক্ষাক্রম:HTML এর ব্লক ইউনিট এবং ইনলাইন ইউনিট
HTML শিক্ষাক্রম:HTML এর লেআউট
HTML DOM পরিচ্ছেদক:Div অবজেক্ট
উদাহরণ
ডকুমেন্টের মধ্যে CSS-এর মাধ্যমে সেট করা হওয়া div অংশ:
<html>
<head>
<style>
.myDiv {
border: 5px outset red;
background-color: lightblue;
text-align: center;
}
</style>
</head>
<body>
<div class="myDiv">
<h2>এটি div ইলেকমেন্টের শিরোনাম</h2>
<p>এটি div ইলেকমেন্টের মধ্যে কিছু লেখা।</p>
</div>
</body>
</html>
ক্ষেত্রগত পর্যালোচনা
<body> <h1>নতুন ওয়েবসাইট</h1> <p>কিছু লেখা। কিছু লেখা। কিছু লেখা...</p> ... <div class="news"> <h2>নিউজ হেডলাইন 1</h2> <p>কিছু লেখা। কিছু লেখা। কিছু লেখা...</p> ... </div> <div class="news"> <h2>নিউজ হেডলাইন 2</h2> <p>কিছু লেখা। কিছু লেখা। কিছু লেখা...</p> ... </div> ... </body>
উদাহরণ ব্যাখ্যা
এভাবে আপনি দেখতে পাবে, উপরের এই HTML নিউজ সাইটের বিন্যাসটি মিলিয়েছে। প্রত্যেকটি div একটি নিউজের শিরোনাম ও সারাংশকে মিলিয়ে দিয়েছে, অর্থাৎ, div ডকুমেন্টকে অতিরিক্ত বিন্যাস যোগ করেছে। সমস্ত div একই ধরনের ইলেকমেন্ট, তাই class="news"-এর মাধ্যমে এগুলোকে চিহ্নিত করা যায়, এটা শুধুমাত্র div-কে উপযুক্ত সার্থকতা যোগ করেছে না, এমনকি div-কে আরও ব্যবহারযোগ্য করে তুলেছে, যা দুইমূলক ব্যবহারের ব্যাপারে অনেক সুবিধা প্রদান করে।
টীকা:class এবং id এর ব্যবহার নিয়ে আরও গভীরভাবে শিখতে, পড়ুন W3school এর স্ট্রাকচারাল ট্যাগ, div, id এবং অন্যান্য সহযোগীদের সেকশন。
গ্লোবাল অ্যাট্রিবিউট
<div> ট্যাগটি ইভেন্ট অ্যাট্রিবিউটসও সমর্থন করে HTML এর গ্লোবাল অ্যাট্রিবিউট。
ইভেন্ট অ্যাট্রিবিউট
<div> ট্যাগটি ইভেন্ট অ্যাট্রিবিউটসও সমর্থন করে HTML এর ইভেন্ট অ্যাট্রিবিউট。
ডিফল্ট সিএসএস সেটিং
অধিকাংশ ব্রাউজার নিম্নলিখিত ডিফল্ট মান ব্যবহার করবে <div> এলিমেন্ট:
div {
display: block;
}
ব্রাউজার সমর্থন
| চ্রোম | এডজ | ফায়ারফক্স | স্যাফারি | ওপেরা |
|---|---|---|---|---|
| চ্রোম | এডজ | ফায়ারফক্স | স্যাফারি | ওপেরা |
| সমর্থন | সমর্থন | সমর্থন | সমর্থন | সমর্থন |
