HTML स्पैन टैग: शुरुआती लोगों के लिए गाइड

निम्नलिखित अनुभाग में, हम कुछ उदाहरणों के माध्यम से जाएंगे जो दर्शाते हैं कि HTML में `` टैग कैसे काम करता है।

`` टैग HTML उदाहरण

आइए HTML में इंलाइन एलिमेंट को स्टाइल करने के लिए `` टैग का उपयोग करने वाले कोड के कुछ उदाहरण देखें। हमारा पहला उदाहरण पैराग्राफ में `` टैग का उपयोग करेगा; हमारा दूसरा उदाहरण इसे सूची में उपयोग करेगा।

पैराग्राफ में `` HTML

मान लीजिए हम एक स्थानीय बेकरी—Pringle and Sons Bakery के लिए एक वेब पेज डिज़ाइन कर रहे हैं। यह वेब पेज बेकरी के इतिहास की रूपरेखा तैयार करेगा। बेकरी के मालिक, Mr. Pringle, ने हमसे कुछ प्रमुख तथ्यों को लाल टेक्स्ट के साथ जोर देने के लिए कहा।

हम इस कार्य को पूरा करने के लिए निम्न कोड का उपयोग कर सकते हैं:

index.html <p>Pringle and Sons Bakery is a staple of the Oakbridge, Indiana community. The Bakery, founded by James Pringle in 1975, serves <span class="redText">delicious baked goods</span> and coffee to the Oakbridge area. It has served <span class="redText">thousands</span> of customers since its foundation.</p> styles.css .redText { color: red; }

हमारा कोड लौटाता है:

हमारे उदाहरण में, हमने "delicious baked goods" और "thousands" शब्दों पर जोर दिया। Mr. Pringle ने हमें बताया कि ये शब्द महत्वपूर्ण हैं, इसलिए हमने प्रोग्राम को उन्हें लाल रंग में प्रदर्शित करने का निर्देश दिया।

हमने `

` HTML टैग के भीतर संलग्न टेक्स्ट की एक स्ट्रिंग को परिभाषित किया। यह टेक्स्ट Pringle and Sons Bakery के इतिहास की रूपरेखा तैयार करता है। फिर, हम उन शब्दों को `` टैग में संलग्न करते हैं जिन्हें हम लाल रंग में दिखाना चाहते हैं।

हमारी CSS फ़ाइल में, हमने निर्दिष्ट किया कि redText क्लास को असाइन किए गए किसी भी एलिमेंट का रंग लाल होना चाहिए। यह हमें `` टैग का उपयोग करते समय अपने टेक्स्ट का रंग लाल बदलने की अनुमति देता है।

`` टैग इस मामले में उपयोगी है क्योंकि हम केवल अपने टेक्स्ट में विशेष शब्दों पर जोर देना चाहते थे। हम लाल टेक्स्ट स्टाइलिंग को `

` टैग पर ही लागू कर सकते थे। लेकिन, इसका परिणाम लाल टेक्स्ट के पूरे पैराग्राफ के रूप में होता।

सूची में `` HTML

मान लीजिए Pringle and Sons Bakery ने हमें अपनी वेबसाइट पर उनके सोशल मीडिया पेज के लिंक के साथ एक सूची जोड़ने के लिए कहा।

बेकरी ने नोट किया कि उनके ट्विटर और फेसबुक पेज के लिंक विशेष रूप से महत्वपूर्ण हैं क्योंकि टीम उन प्लेटफॉर्म पर सबसे अधिक सक्रिय है। इसलिए, वे चाहते हैं कि हम उन लिंक को हल्के नीले टेक्स्ट में हाइलाइट करें।

हम इस कार्य को पूरा करने के लिए निम्न कोड का उपयोग कर सकते हैं:

index.html <ul> <li><span class="blue"><a href="twitter.com">Twitter</a></span></li> <li><span class="blue"><a href="facebook.com">Facebook</a></span></li> <li><a href="instagram.com">Instagram</a></li> </ul> styles.css .blue { background: lightblue; }

हमारा कोड लौटाता है:

हमारे HTML कोड में, हमने `

` टैग का उपयोग करके एक अनऑर्डर्ड सूची बनाई। इस सूची में तीन आइटम हैं, जिनमें से प्रत्येक `
• ` टैग के भीतर समाहित है।

  ट्विटर और फेसबुक के लिए सूची आइटम HTML स्पैन टैग (`` और ``) के भीतर संलग्न हैं। प्रत्येक सूची आइटम के लिए ओपनिंग स्पैन टैग एक क्लास एट्रिब्यूट निर्दिष्ट करता है। क्लास एट्रिब्यूट का मान "blue" है।

  हमने .blue नामक एक स्टाइल परिभाषित की जो किसी भी एलिमेंट की बैकग्राउंड रंग को बदल देती है जिस पर इसे लागू किया जाता है, हल्के नीले रंग में। इसने हमारे HTML कोड में CSS क्लास .blue वाले सभी लिंक की बैकग्राउंड रंग को हल्के नीले रंग में बदल दिया।

  हमारे इंस्टाग्राम लिंक से जुड़ा बैकग्राउंड रंग नहीं बदला क्योंकि हमने उस लिंक के टेक्स्ट को `` टैग में संलग्न नहीं किया था।

  निष्कर्ष

  HTML `` टैग HTML पेज पर विशिष्ट एलिमेंट पर स्टाइल लागू करने के लिए उपयोग किया जाने वाला एक जेनेरिक कंटेनर है। डिफ़ॉल्ट रूप से, `` टैग कुछ नहीं करता, लेकिन इसे CSS के साथ संयोजन में एलिमेंट पर स्टाइल लागू करने के लिए उपयोग किया जा सकता है।

  एक चुनौती के रूप में, एक `` टैग परिभाषित करें जो वाक्य में किसी शब्द को सभी बड़े अक्षरों में दिखाता है। आपको अपने `` टैग के साथ टेक्स्ट को अपरकेस में बदलने के लिए CSS नियम का उपयोग करना होगा।

  इस ट्यूटोरियल ने उदाहरणों के साथ चर्चा की कि अपने कोड में HTML `` टैग का उपयोग कैसे करें। अब आप `` टैग का उपयोग एक पेशेवर वेब डेवलपर की तरह करने के लिए तैयार हैं!

  HTML सीखने के तरीके पर मार्गदर्शन और समर्थन के लिए, हमारा पूर्ण HTML सीखने का गाइड पढ़ें।