यदि आप एचटीएमएल को देखते हैं मार्कअप आज किसी भी वेबपेज के लिए, आप HTML तत्वों को अन्य HTML तत्वों में समाहित देखेंगे। ये तत्व जो अन्य तत्वों के "अंदर" होते हैं उन्हें के रूप में जाना जाता है नेस्टेड तत्व, और वे आज किसी भी वेबपेज के निर्माण के लिए आवश्यक हैं।
HTML टैग्स को नेस्ट करने का क्या मतलब है?
नेस्टिंग को समझने का सबसे आसान तरीका है के बारे में सोचना एचटीएमएल टैग आपकी सामग्री रखने वाले बॉक्स के रूप में। आपकी सामग्री में टेक्स्ट, चित्र और संबंधित मीडिया शामिल हो सकते हैं। HTML टैग सामग्री के चारों ओर के बॉक्स हैं। कभी-कभी, आपको अन्य बक्सों के अंदर बक्सों को रखने की आवश्यकता होती है। वे "आंतरिक" बक्से दूसरों के अंदर घोंसला बनाते हैं।
यदि आपके पास टेक्स्ट का एक ब्लॉक है जिसे आप एक पैराग्राफ के अंदर बोल्ड करना चाहते हैं, तो आपके पास दो होंगे HTML तत्व साथ ही पाठ स्वयं।
उदाहरण: यह पाठ का वाक्य है।
वह पाठ वह है जिसे हम अपने उदाहरण के रूप में उपयोग करेंगे। यहां बताया गया है कि इसे HTML में कैसे लिखा जाएगा:
उदाहरण: यह पाठ का वाक्य है।
शब्द बनाने के लिए वाक्य बोल्ड, उस शब्द के पहले और बाद में उद्घाटन और समापन टैग जोड़ें।
उदाहरण: यह एक है वाक्य पाठ का।
जैसा कि आप देख सकते हैं, हमारे पास एक बॉक्स (पैराग्राफ) है जिसमें वाक्य की सामग्री है, साथ ही एक दूसरा बॉक्स (the .) है मजबूत टैग जोड़ी), जो उस शब्द को बोल्ड के रूप में प्रस्तुत करता है।
जब आप टैग्स को नेस्ट करते हैं, तो टैग्स को आपके द्वारा खोले गए विपरीत क्रम में बंद करें। आप खोलें
पहले, उसके बाद , जिसका अर्थ है कि आप उसे उलट देते हैं और बंद कर देते हैं और फिर.
इसके बारे में सोचने का एक और तरीका है कि एक बार फिर से बक्सों की सादृश्यता का उपयोग किया जाए। यदि आप एक बॉक्स को दूसरे बॉक्स के अंदर रखते हैं, तो बाहरी या युक्त बॉक्स को बंद करने से पहले आपको आंतरिक बॉक्स को बंद करना होगा।
अधिक नेस्टेड टैग जोड़ना
क्या होगा यदि आप केवल एक या दो शब्द चाहते हैं बोल्ड, और इटैलिक होने के लिए दूसरा सेट set? यहाँ यह कैसे करना है।
उदाहरण: यह एक है वाक्य पाठ का और इसमें कुछ भी है इटैलिकाइज़्ड टेक्स्ट भी।
आप देख सकते हैं कि हमारा बाहरी बॉक्स,
, अब इसके अंदर दो नेस्टेड टैग हैं—the और यह . इससे पहले कि बॉक्स बंद किया जा सके, उन दोनों को बंद कर दिया जाना चाहिए।
उदाहरण: यह एक है वाक्य पाठ का और इसमें कुछ भी है इटैलिकाइज़्ड टेक्स्ट भी।
यह एक और पैराग्राफ है।
इस मामले में, हमारे पास बक्सों के अंदर बक्से हैं! सबसे बाहरी बॉक्स है
या ए. विभाजन. उस बॉक्स के अंदर नेस्टेड की एक जोड़ी है। पैराग्राफ टैग, और पहले पैराग्राफ के अंदर, हमारे पास अगला है। तथा टैग जोड़ी।आपको घोंसले के शिकार की परवाह क्यों करनी चाहिए
यदि आप CSS का उपयोग करने जा रहे हैं तो नंबर 1 कारण आपको नेस्टिंग के बारे में ध्यान रखना चाहिए। व्यापक शैली पत्रक दस्तावेज़ के भीतर लगातार नेस्टेड होने के लिए टैग पर भरोसा करें ताकि यह बता सके कि शैलियाँ कहाँ से शुरू और समाप्त होती हैं। गलत नेस्टिंग ब्राउज़र के लिए यह जानना कठिन बना देती है कि इन शैलियों को कहाँ लागू किया जाए। आइए कुछ एचटीएमएल देखें:
उदाहरण: यह एक है वाक्य पाठ का और इसमें कुछ भी है इटैलिकाइज़्ड टेक्स्ट भी।
यह है एक और पैराग्राफ.
ऊपर दिए गए उदाहरण का उपयोग करते हुए, यदि हम a write लिखना चाहते हैं सीएसएस शैली जो इस डिवीजन के अंदर के लिंक को प्रभावित करेगा, और केवल वह लिंक (पृष्ठ के अन्य अनुभागों में किसी भी अन्य लिंक के विपरीत), हमें इस शैली को लिखने के लिए नेस्टिंग का उपयोग करने की आवश्यकता होगी, जैसे:
.मुख्य-सामग्री ए {
रंग: #F00;
}
अन्य बातें
अभिगम्यता और ब्राउज़र संगतता भी मायने रखती है। यदि आपका HTML गलत तरीके से नेस्ट किया गया है, तो यह स्क्रीन रीडर्स और पुराने ब्राउज़रों के लिए एक्सेस योग्य नहीं होगा—और यह पूरी तरह से टूट भी सकता है। किसी पृष्ठ की दृश्य उपस्थिति यदि ब्राउज़र यह पता नहीं लगा सकता है कि किसी पृष्ठ को ठीक से कैसे प्रस्तुत किया जाए क्योंकि HTML तत्व और टैग बाहर हैं जगह।
अंत में, यदि आप पूरी तरह से सही और मान्य HTML लिखने का प्रयास कर रहे हैं, तो आपको सही नेस्टिंग का उपयोग करना होगा। अन्यथा, प्रत्येक सत्यापनकर्ता आपके HTML को गलत के रूप में चिह्नित करेगा।