HTML में टैग्स को समूहित करने के लिए div टैग

पिछले पाठ में हमने span टैग के बारे में जाना, जो टेक्स्ट के एक हिस्से को किसी तरह हाइलाइट करने में सक्षम है। एक विशेष टैग div भी मौजूद है, जो कई टैग्स को समूहित करने की अनुमति देता है ताकि बाद में उन सभी के साथ एक साथ कुछ किया जा सके।

उदाहरण के लिए, मान लीजिए कि div टैग का उपयोग करके हम पैराग्राफ को समूहित करते हैं:

<div class="block1">
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>
<div class="block2">
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>

आइए पहले समूह के एलिमेंट्स को लाल रंग दें, और दूसरे समूह के एलिमेंट्स - हरा रंग:

.block1 {
	color: red;
}
.block2 {
	color: green;
}

निम्नलिखित कोड दिया गया है:

<div>
	<h2>Title</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>
<div>
	<h2>Title</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>
<div>
	<h2>Title</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>

पहले div की सामग्री को लाल रंग में रंगें, दूसरे div की सामग्री - हरे रंग में, और तीसरे div की सामग्री - नीले रंग में। इसके लिए प्रत्येक div को एक अलग क्लास दें।

निम्नलिखित कोड दिया गया है:

<div>
	<h2>Title</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>
<div>
	<h2>Title</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>
<div>
	<h2>Title</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>
<div>
	<h2>Title</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>

पहले और तीसरे div की सामग्री को लाल रंग में रंगें, दूसरे और चौथे div की सामग्री - हरे रंग में। इसके लिए पहले और तीसरे div को एक क्लास दें, और दूसरे और चौथे को - दूसरा क्लास दें।