HTML <span> एलिमेंट का उपयोग करना सीखें।
HTML <span> एलिमेंट एक जेनेरिक इनलाइन कंटेनर एलिमेंट है, जिसका उपयोग टेक्स्ट को मार्क अप करने के लिए किया जाता है। इसका उपयोग अक्सर किसी अन्य एलिमेंट के अंदर किया जाता है।
<span> का उपयोग अक्सर टेक्स्ट के एक हिस्से को बाकी से अलग दिखाने के लिए किया जाता है।
उदाहरण:
<p>मेरी टोपी <span style="color:red">लाल</span> है।</p>आप <span> का उपयोग उन एलिमेंट्स को ग्रुप करने के लिए भी कर सकते हैं जो class के माध्यम से समान स्टाइलिंग एट्रिब्यूट वैल्यू शेयर करते हैं।
उदाहरण के लिए, मान लें कि आप रेसिपी लिख रहे हैं, और आप अपने टेक्स्ट ब्लॉक में हर उस शब्द को एक विशिष्ट कलर के साथ हाइलाइट करना चाहते हैं जो एक घटक-शब्द है:
<p> मेरी स्वादिष्ट लहसुन मक्खन बनाने के लिए आपको केवल चार सामग्रियों की आवश्यकता है, <span class="ingredient">मक्खन</span>, <span class="ingredient">लहसुन</span>, <span class="ingredient">नमक</span> और <span class="ingredient">काली मिर्च।</span> </p>आप फिर CSS क्लास को इस तरह बना सकते हैं:
.ingredient { color: green; }पुन: प्रयोज्य क्लास का उपयोग करने के बारे में स्मार्ट बात यह है कि यदि आप किसी बिंदु पर अपना मन बदलते हैं कि घटक शब्दों को नेत्रहीन रूप से कैसे दिखना चाहिए, तो आप बस उस .ingredient क्लास में एक बार इसकी स्टाइल बदल सकते हैं, और प्रभाव हर <span> एलिमेंट पर लागू होगा जो इस क्लास का उपयोग करता है।
उदाहरण के लिए, मान लें कि आप सामग्रियों को हाइलाइट करने के लिए कलर के बजाय बोल्ड फ़ॉन्ट का उपयोग करना चाहते हैं:
.ingredient { font-weight: bold; }<span> एलिमेंट की जेनेरिक प्रकृति, इसे एक अन-सिमेंटिक एलिमेंट बनाती है। इसलिए इस एलिमेंट का उपयोग केवल तभी किया जाना चाहिए जब कोई अन्य एलिमेंट उपयोग करने के लिए अधिक समझदार न हो।
<span> एलिमेंट <div> एलिमेंट के समान है, लेकिन मुख्य अंतर यह है कि डिफ़ॉल्ट रूप से, <span> एक इनलाइन एलिमेंट है, और <div> एक ब्लॉक-लेवल एलिमेंट है। हालांकि, आप CSS के साथ एलिमेंट्स की डिफ़ॉल्ट स्टाइलिंग को ओवरराइड कर सकते हैं।
