उचित HTML5 शब्दार्थ में एक नज़र
यदि आप ध्यान से अपने HTML दस्तावेजों की संरचना की योजना बनाते हैं, तो आप कर सकते हैं कंप्यूटर आपकी सामग्री के अर्थ को समझने में मदद करता है. उचित वाक्यविन्यास सुनिश्चित करने के लिए महत्वपूर्ण है, लेकिन यह मूल रूप से डेटा के अर्थ समूह के साथ केवल पार्सर, खोज इंजन और सहायक तकनीक प्रदान करता है.
यदि आप शब्दार्थ पर ध्यान देने के साथ अपने फ्रंट-एंड वर्कफ़्लो में सुधार करते हैं, तो आप एक उच्च गुणवत्ता की सामग्री बना सकते हैं जो अधिक आगंतुकों को आकर्षित करती है। शब्दार्थ है अर्थ का अध्ययन, एक व्यापक संदर्भ में तर्क और भाषा विज्ञान की एक शाखा.
वेब विकास की दुनिया में हम शब्दार्थ सामग्री के बारे में बात करते हैं जब कंप्यूटर एक दस्तावेज़ की संरचना, और संरचना को समझते हैं इसके अंदर के तत्वों की भूमिका. अगर हम उचित शब्दार्थ बनाना चाहते हैं, तो हमें गहराई से सोचने की जरूरत है संरचना को समझें हमारी सामग्री और क्षमताओं प्रौद्योगिकियों के सामने.
तो मूर्त लाभ क्या हैं? उचित शब्दार्थ का अर्थ है a अधिक खोज योग्य सामग्री उस की ओर जाता है बेहतर खोज इंजन रैंकिंग. हम सहायक तकनीकों के रूप में पहुंच में वृद्धि करते हैं, जैसे कि स्क्रीन पाठक हमारी सामग्री के अर्थ की बेहतर व्याख्या कर सकते हैं.
कई अलग-अलग फ्रंट-एंड डेवलपमेंट तकनीकें हैं जो डेवलपर्स को सिमेंटिक पेज संरचना प्राप्त करने में सक्षम बनाती हैं। यह पोस्ट आपको सिमेंटिक HTML टैग्स में एक संक्षिप्त परिचय और दस्तावेज़ की रूपरेखा की अवधारणा प्रदान करेगा.
शब्दार्थ और गैर-शब्दार्थ HTML टैग्स
शब्दार्थ की अवधारणा उतनी नई नहीं है जितनी प्रतीत होती है, यह एचटीएमएल 5 के युग से पहले अस्तित्व में थी। सिमेंटिक वेब शब्द को 2001 की शुरुआत में सर टिम बर्नर्स-ली द्वारा तैयार किया गया था। के अंतर्गत “सेमांटिक वेब” उनका मतलब था कि मशीनों द्वारा संसाधित किया जा सकता डेटा का एक वेब.
यह मुख्य रूप से इसका मतलब है कि अलग-अलग HTML तत्वों के लिए उनकी विशिष्ट संरचनात्मक भूमिकाएँ होना आवश्यक है. डब्ल्यू 3 सी की परिभाषा के अनुसार “एक शब्दार्थ तत्व स्पष्ट रूप से ब्राउज़र और डेवलपर दोनों के लिए इसका अर्थ बताता है”.
HTML5 से पहले शब्दार्थ तत्व
एचटीएमएल 5 से पहले भी सिमेंटिक तत्व मौजूद थे, ज्यादातर मामलों में डेवलपर्स को इसकी जानकारी नहीं थी उनके द्वारा उपयोग किए गए कुछ टैग वास्तव में शब्दार्थ थे. बस के बारे में सोचो या
उनकी भूमिकाएं हमारे और उपयोगकर्ता एजेंट दोनों के लिए स्पष्ट हैं: बस एक रूप होता है, जैसे
आदेश दिया तथा अनियंत्रित सूची, पैराग्राफ, h1-h6 शीर्षक टैग सभी अर्थ तत्व हैं जो HTML5 से पहले थे.
गैर-शब्दार्थ तत्व
गैर-अर्थ तत्वों का कोई विशेष अर्थ नहीं है, उनके बीच के पदानुक्रमित संबंध केवल भ्रम हैं। गैर-शब्दार्थ HTML टैग्स के सबसे व्यापक रूप से उपयोग किए जाने वाले उदाहरण हैं और यह टैग.
यदि आपकी साइट कभी भी भयानक बीमारी को पकड़ लेती है divitis, आपको पता है मैं क्या कह रहा हुँ। हां। तलाक जरूरी गलत नहीं है, लेकिन divitis अगर हमें बनाए रखने योग्य, मॉड्यूलर और सार्थक HTML कोड लिखना है तो संघर्ष करना होगा.
मुंहतोड़ पत्रिका खूबसूरती से बताती है कि अत्यधिक और अनुचित उपयोग के साथ वास्तविक समस्या क्या है दोनों के बीच कोई संबंध नहीं है, जैसे के मामले में अगर आपको अभी भी अटैचमेंट महसूस हो तो घबराएं नहीं HTML5 ने कई नए अर्थ तत्व प्रस्तुत किए हैं जो आसान सामग्री संगठन को संभव बनाते हैं। वे आपको पूरे दस्तावेज़ के स्तर पर सामग्री को व्यवस्थित करने में मदद नहीं करते हैं (अगले भाग में विवरण देखें), लेकिन इनलाइन टैग के रूप में, पाठ ब्लॉक के अंदर भी।. संभवतः सबसे लोकप्रिय पाठ-स्तरीय शब्दार्थ टैग हैं इस सूची को उन सभी पाठ-स्तरीय अर्थ तत्वों के लिए देखें जो वर्तमान में उपयोग में हैं. दस्तावेज़ की रूपरेखा एक HTML दस्तावेज़ की संरचना है। यह दिखाता है कि तत्व एक दूसरे से कैसे संबंधित हैं। दस्तावेज़ की रूपरेखा पूरी तरह से तत्वों की मैपिंग द्वारा बनाई गई है, जैसे शीर्षकों, तालिका शीर्षक, प्रपत्र शीर्षक और अन्य HTML के पुराने संस्करणों जैसे HTML4.01 और XHTML।. HTML5 में उल्लिखित एल्गोरिथ्म को नए सेक्शनिंग तत्वों द्वारा बढ़ाया गया है, अर्थात्: HTML5 में पाँचवाँ सेक्शनिंग तत्व है, लेकिन यह नया नहीं है, यह है यदि हम एक अच्छी तरह से संरचित दस्तावेज़ रूपरेखा तैयार करना चाहते हैं, तो हमें निम्नलिखित नियमों पर ध्यान देने की आवश्यकता है: 1. सबसे बाहरी सेक्शनिंग तत्व हमेशा होता है 2. HTML5 में सेक्शन को नेस्ट किया जा सकता है. 3. प्रत्येक सेक्शन की अपनी हेडिंग पदानुक्रम है। उनमें से प्रत्येक (यहां तक कि अंतरतम नेस्टेड अनुभाग) में ए हो सकता है 4. जबकि दस्तावेज़ की रूपरेखा को मुख्य रूप से 5 सेक्शनिंग तत्वों द्वारा परिभाषित किया गया है, इसके लिए प्रत्येक सेक्शन के लिए उचित शीर्षकों की भी आवश्यकता होती है. 5. यह हमेशा पहला हेडिंग एलिमेंट है (इसे h1 या लोअर रैंक हेडिंग टैग होने दें) जो दिए गए सेक्शन के हेडिंग को परिभाषित करता है। उसी अनुभाग के अंदर निम्नलिखित शीर्षक टैग को इसके सापेक्ष होना चाहिए। (यदि पहली हेडिंग एक सेक्शनिंग एलिमेंट के अंदर h3 है, तो उसके बाद h3 न डालें।) 6. द्वारा परिभाषित अनुभाग 7. प्रत्येक अनुभाग (शरीर, अनुभाग, लेख, एक तरफ, नौसेना) का अपना हो सकता है आइए एक स्पष्ट दस्तावेज़ की रूपरेखा के लिए एक उदाहरण देखें कि यह कैसे काम करता है। हमारा उदाहरण कोड निम्नलिखित दस्तावेज़ संरचना में परिणाम देगा: और यहाँ उचित अर्थ सेक्शनिंग वाला कोड है: यहां हमारा लोगो और नारा है. पहले खंड में अनुच्छेद 1 पहले खंड में अनुच्छेद २ दूसरे खंड में अनुच्छेद 1 दूसरे खंड में अनुच्छेद 2 यदि आप ऊपर दिए गए कोड स्निपेट पर एक नज़र डालते हैं, तो आप देखेंगे कि हेडर और फुटर वैकल्पिक हैं, हम स्वतंत्र रूप से चुन सकते हैं कि हम उनका उपयोग करना चाहते हैं या नहीं, लेकिन यह हमेशा प्रत्येक अनुभाग के लिए एक शीर्षक शामिल करने की जोरदार सिफारिश की जाती है, अन्यथा अनुभाग होगा “शीर्षकहीन” दस्तावेज़ की रूपरेखा में. सौभाग्य से पूरे इंटरनेट में कई बेहतरीन उपकरण हैं जो हमें दस्तावेज़ की रूपरेखा की जांच करने की अनुमति देते हैं, इस बार हम HTML5.org के आउटलाइनर टूल का उपयोग करेंगे. यदि हम आउटलाइनर द्वारा प्रदान किए गए फॉर्म में अपना कोड स्निपेट सम्मिलित करते हैं, और क्लिक करें “इसकी रूपरेखा तैयार करें!” बटन, हम निम्नलिखित परिणाम देखेंगे: यह है हमारे नमूना कोड की दस्तावेज़ रूपरेखा, यह है कि खोज इंजन इसे कैसे देखते हैं, और स्क्रीन रीडर इसे अपने नेत्रहीन उपयोगकर्ताओं को पढ़ते हैं। यह शब्दार्थ है, अच्छी तरह से संरचित है, और कोई बुरा नहीं है “शीर्षकहीन” इसमें अनुभाग. यदि आप यह देखना चाहते हैं कि आउटलाइनर में एक शीर्षक रहित अनुभाग कैसा दिखता है, तो उदाहरण कोड में कुछ शीर्षक टैग हटा दें. सिमेंटिक HTML टैग और डॉक्यूमेंट की रूपरेखा वेब शब्दार्थ का एक छोटा सा हिस्सा है। एक वेब पेज की सामग्री को WAI-ARIA अभिगम्यता प्रोटोकॉल और संरचित डेटा की मदद से और भी अधिक सार्थक बनाया जा सकता है जिसे RDFa प्रोटोकॉल, माइक्रोडाटा, या JSON-LD मार्कअप के साथ प्रयोग किया जा सकता है. टैग जो ठीक उसी तरह काम करता है, जैसे कि इनलाइन स्तर पर.-हालांकि, के रूप में आपको उन्हें पूरी तरह से खोदने की ज़रूरत नहीं है. वे अभी भी स्टाइल प्रयोजनों के लिए और अन्य अंतिम रिसॉर्ट मामलों में सामग्री को समूहीकृत करने के लिए सबसे अच्छा विकल्प हैं. HTML5 में पाठ शब्दार्थ
तथा , लेकिन वे HTML5 से पहले भी मौजूद थे। नई इनलाइन अर्थ तत्वों के बीच हम उदाहरण के लिए पा सकते हैं , के लिए टैग मानव-पठनीय तिथि-समय, तथा के लिये पाठ पर प्रकाश डाला.HTML5 में दस्तावेज़ की रूपरेखा
के लिये एक विशिष्ट विषय के चारों ओर समूह के लिये पूर्ण या स्व-सम्मिलित रचनाएँ जैसे ब्लॉग पोस्ट या विजेट के लिये नेविगेशन ब्लॉक के लिये पूरक सामग्री जैसे साइडबार. टैग। टैग भी नए हैं, लेकिन वे एक दस्तावेज़ में नए खंड उत्पन्न नहीं करते हैं, वे सामग्री को अनुभागों के अंदर विभाजित करते हैं। इस का मतलब है कि हर सेक्शनिंग तत्व (शरीर, लेख, अनुभाग, नौसेना और एक तरफ) अपने स्वयं के हेडर और पाद लेख हो सकते हैं.युक्तियाँ संरचित रूप से संरचित सामग्री के लिए
टैग.h1 टैग., और यह टैग HTML दस्तावेज़ की मुख्य रूपरेखा से संबंधित नहीं हैं, वे आमतौर पर सहायक प्रौद्योगिकियों द्वारा शुरू में प्रदान नहीं किए जाते हैं. टैग, जो हेडर को परिभाषित करता है (जैसे कि लोगो, लेखक का नाम, दिनांक, मेटा जानकारी, आदि) और उस अनुभाग के पाद लेख (कॉपीराइट, नोट्स, लिंक आदि)।.उदाहरण: एक शब्दार्थ रूपरेखा
हमारी वेबसाइट पर आपका स्वागत है!
लेख का शीर्षक
लेख का उपशीर्षक
पहला तार्किक भाग (उदा। "सिद्धांत")
फर्स्ट सेक्शन में कुछ अन्य सबडिहाइडिंग
दूसरा तार्किक भाग (जैसे "अभ्यास")
वेब शब्दार्थ के अन्य पहलू
