एचटीएमएल 5 सेक्शन तत्व को समझना
जब एचटीएमएल 5 कई साल पहले दृश्य पर फट गया, तो उसने सेक्शन तत्व समेत लैंगेज में नए सेक्शनिंग तत्वों का एक गुच्छा जोड़ा। एचटीएमएल 5 के अधिकांश नए तत्वों के स्पष्ट उपयोग हैं। उदाहरण के लिए, तत्व का उपयोग वेब पेज के लेखों और मुख्य भागों को परिभाषित करने के लिए किया जाता है, तत्व का उपयोग संबंधित सामग्री को परिभाषित करने के लिए किया जाता है जो शेष पृष्ठ के लिए महत्वपूर्ण नहीं है, और हेडर, एनएवी और पाद लेख बहुत आत्म-व्याख्यात्मक हैं। नया जोड़ा अनुभाग तत्व, हालांकि, थोड़ा कम स्पष्ट है।
बहुत से लोग मानते हैं कि HTML तत्व सेक्शन और वास्तव में वही चीज़ हैं-जेनेरिक कंटेनर तत्व जो वेब पेज पर सामग्री शामिल करते थे। हकीकत यह है कि ये दो तत्व हैं, जबकि दोनों कंटेनर तत्व हैं, लेकिन सामान्य हैं लेकिन कुछ भी सामान्य हैं। सेक्शन तत्व और डीआईवी तत्व दोनों का उपयोग करने के विशिष्ट कारण हैं - और यह आलेख उन मतभेदों को समझाएगा।
अनुभाग और divs
सेक्शन तत्व को किसी वेब पेज या साइट के अर्थात् खंड के रूप में परिभाषित किया गया है जो एक और अधिक विशिष्ट प्रकार नहीं है (जैसे आलेख या एक तरफ)। जब मैं पृष्ठ के एक अलग सेक्शन को चिह्नित कर रहा हूं, तो मैं इस तत्व का उपयोग करता हूं - एक अनुभाग जिसे थोक स्थानांतरित किया जा सकता है और साइट के अन्य पृष्ठों या भागों पर उपयोग किया जा सकता है। यह सामग्री का एक अलग टुकड़ा है, या सामग्री के "खंड", यदि आप करेंगे।
इसके विपरीत, आप उस पृष्ठ के उन हिस्सों के लिए DIV तत्व का उपयोग करते हैं जिन्हें आप विभाजित करना चाहते हैं, लेकिन अर्थशास्त्र के अलावा अन्य उद्देश्यों के लिए। यदि मैं सीएसएस के साथ उपयोग करने के लिए खुद को "हुक" देने के लिए पूरी तरह से कर रहा हूं तो मैं एक विभाजन में सामग्री का एक क्षेत्र लपेटूंगा। यह अर्थशास्त्र के आधार पर सामग्री का एक अलग वर्ग नहीं हो सकता है, लेकिन ऐसा कुछ है जो मैं अपने पृष्ठ के लिए इच्छित लेआउट प्राप्त करने के लिए निर्देशित कर रहा हूं।
यह सब सेमेन्टिक्स के बारे में है
यह समझने की एक कठिन अवधारणा है, लेकिन डीआईवी तत्व और सेक्शन तत्व के बीच एकमात्र अंतर अर्थशास्त्र है। दूसरे शब्दों में, यह आपके द्वारा विभाजित किए जा रहे कोड के अनुभाग का अर्थ है।
किसी भी सामग्री जो एक डीआईवी तत्व के अंदर निहित है, में कोई अंतर्निहित अर्थ नहीं है। यह चीजों के लिए सबसे अच्छा उपयोग किया जाता है जैसे:
- सीएसएस शैलियों के लिए सीएसएस शैलियों और हुक
- लेआउट कंटेनर
- जावास्क्रिप्ट हुक
- एचटीएमएल के लिए डिवीजन इसे पढ़ने में आसान बनाते हैं
डीआईवी तत्व हमारे दस्तावेज़ों को स्टाइल करने और कॉलम और फैंसी लेआउट बनाने के लिए हुक जोड़ने के लिए एकमात्र तत्व होता था। इसके कारण, हम एचटीएमएल के साथ समाप्त हुए जो डीआईवी तत्वों के साथ झुका हुआ था- वेब डिज़ाइनर "डिवाइटिस" कह सकते हैं। यहां तक कि WYSIWYG संपादक भी थे जो विशेष रूप से डीआईवी तत्व का उपयोग करते थे। मैंने वास्तव में HTML पर चलाया है जो पैराग्राफ के बजाय DIV तत्व का उपयोग करता है!
एचटीएमएल 5 के साथ, हम अधिक अर्थात् वर्णनात्मक दस्तावेज (नेविगेशन और वर्णनात्मक आंकड़ों के लिए उपयोग आदि) बनाने के लिए सेक्शनिंग तत्वों का उपयोग शुरू कर सकते हैं और उन तत्वों पर शैलियों को भी परिभाषित कर सकते हैं।
स्पैन तत्व के बारे में क्या?
अन्य तत्व जो ज्यादातर लोग सोचते हैं कि जब वे डीआईवी तत्व के बारे में सोचते हैं तो तत्व होता है। यह तत्व, डीआईवी की तरह, एक अर्थपूर्ण तत्व नहीं है। यह एक इनलाइन तत्व है जिसे आप सामग्री के इनलाइन ब्लॉक (आमतौर पर पाठ) के आस-पास शैलियों और स्क्रिप्ट के लिए हुक जोड़ने के लिए उपयोग कर सकते हैं। उस अर्थ में यह वास्तव में डीआईवी तत्व की तरह है, केवल ब्लॉक तत्व की बजाय इनलाइन है । कुछ मायनों में, डीआईवी को ब्लॉक-स्तरीय स्पैन तत्व के रूप में सोचना आसान हो सकता है और उसी तरह इसका उपयोग करें जैसे आप केवल HTML सामग्री के पूरे ब्लॉक के लिए स्पैन करेंगे।
एचटीएमएल 5 में कोई तुलनीय इनलाइन सेक्शनिंग तत्व नहीं है।
इंटरनेट एक्सप्लोरर के पुराने संस्करणों के लिए
यहां तक कि यदि आप IE के नाटकीय रूप से पुराने संस्करणों (जैसे आईई 8 और निचले) का समर्थन कर रहे हैं, जो विश्वसनीय रूप से HTML5 को पहचान नहीं पाते हैं, तो आपको सैद्धांतिक रूप से सही HTML टैग का उपयोग करने से डरना नहीं चाहिए। अर्थशास्त्र आपको और आपकी टीम को भविष्य में पृष्ठ का प्रबंधन करने में मदद करेगा (क्योंकि आपको पता चलेगा कि वह लेख आलेख है यदि यह लेख तत्व से घिरा हुआ है)। इसके अलावा, ब्राउज़र जो उन टैग को पहचानते हैं उन्हें बेहतर समर्थन मिलेगा।
आप अभी भी इंटरनेट एक्सप्लोरर के साथ एचटीएमएल 5 अर्थात् सेक्शनिंग तत्वों का उपयोग कर सकते हैं, आपको केवल HTML के रूप में टैग को पहचानने के लिए स्क्रिप्टिंग और संभवतः कुछ आसपास के डीआईवी तत्वों को जोड़ने की आवश्यकता है।
डीआईवी और सेक्शन तत्वों का उपयोग करना
यदि आप उन्हें सही तरीके से उपयोग कर रहे हैं, तो आप एक वैध HTML5 दस्तावेज़ में एक साथ DIV और SECTION तत्वों का उपयोग कर सकते हैं। जैसा कि आपने यहां इस आलेख में देखा है, आप सामग्री के अर्थात् पृथक हिस्सों को परिभाषित करने के लिए सेक्शन तत्व का उपयोग करते हैं, और आप डीआईवी तत्व का उपयोग सीएसएस और जावास्क्रिप्ट के लिए हुक के रूप में करते हैं और साथ ही परिभाषित लेआउट को परिभाषित करते हैं जिसका अर्थ अर्थपूर्ण अर्थ नहीं है।
जेनिफर क्रिनिन द्वारा मूल लेख। जेरेमी गिरार्ड द्वारा 3/15/17 को संपादित किया गया