HTML 5.1 की 10 नई विशेषताएँ और उन्हें IRL का उपयोग कैसे करें

HTML विनिर्देशन को मिला बड़ा बदलाव कुछ हफ़्ते पहले जब W3C ने इसका प्रकाशन किया था नया HTML 5.1 अनुशंसा नवंबर 2016 में। अपने हालिया ब्लॉग पोस्ट में, W3C ने नई प्रमुख रिलीज़ को बुलाया सोने के मानक, जैसे कि HTML 5.1 हमें नए तरीके प्रदान करता है कि कैसे हम अधिक लचीले वेब अनुभव बनाने के लिए HTML का उपयोग कर सकते हैं.

इस लेख में, हम इसकी नई विशेषताओं पर एक नज़र डालने जा रहे हैं जिनका आप उपयोग कर सकते हैं जावास्क्रिप्ट को छूने के बिना, हालाँकि, जावास्क्रिप्ट पृष्ठभूमि के सुधार भी उल्लेखनीय हैं, क्योंकि आप इसे देख सकते हैं आधिकारिक परिवर्तन लॉग.

ध्यान दें कि वर्तमान में सभी ब्राउज़र इन सभी सुविधाओं का समर्थन नहीं करते हैं, इसलिए भूल न करें ब्राउज़र समर्थन की जाँच करें इससे पहले कि आप उन्हें उत्पादन में उपयोग करें। यदि आप में रुचि रखते हैं HTML मानक का और विकास, आप HTML 5.2 के कार्य मसौदे को भी देख सकते हैं.

1. उत्तरदायी डिजाइन के लिए कई छवि संसाधनों को परिभाषित करें

HTML 5.1 में, आप उपयोग कर सकते हैं साथ मिलकर टैग करें srcset बनाने की विशेषता उत्तरदायी छवि चयन मुमकिन। टैग एक का प्रतिनिधित्व करता है छवि कंटेनर डेवलपर्स को अनुमति देता है विभिन्न छवि संसाधनों की घोषणा करें आदेश में अनुकूल करने के लिए यूएके व्यूपोर्ट का आकार, स्क्रीन पिक्सेल घनत्व, स्क्रीन प्रकार, और अन्य मापदंडों में उपयोग किया जाता है प्रभावी डिजाइन.

टैग ही कुछ भी प्रदर्शित नहीं करता है, यह केवल के रूप में कार्य करता है एकाधिक छवि संसाधनों के लिए संदर्भ. आपको घोषित करने की आवश्यकता है डिफ़ॉल्ट छवि संसाधन के मान के रूप में src की विशेषता टैग, और वैकल्पिक छवि संसाधन भीतर जाओ srcset की विशेषताएँ तथा तत्वों.

कोड उदाहरण:

2. अतिरिक्त जानकारी दिखाना या छिपाना

उसके साथ

तथा

टैग, आप कर सकते हैं विस्तारित जानकारी जोड़ें एक सामग्री के टुकड़े के लिए। अतिरिक्त जानकारी डिफ़ॉल्ट रूप से नहीं दिखाया गया है, लेकिन अगर उपयोगकर्ता रुचि रखते हैं, तो वे देख लेने का विकल्प है. आपके कोड में, आपको माना जाता है इसे रखो

अंदर टैग करें

. के बाद

टैग आप कर सकते हैं अतिरिक्त जानकारी जोड़ें आप छिपाना चाहते हैं.

कोड उदाहरण:

 
 
त्रुटि संदेश
 
 
हम इस वीडियो को डाउनलोड करना समाप्त नहीं कर सके.
 
 
फ़ाइल का नाम:
yourfile.mp4
 
फाइल का आकार:
100 एमबी
 
अवधि:
00:05:27
 
 
 
 

यह कोड उदाहरण फ़ायरफ़ॉक्स 50.0.2 में कैसा दिखता है:

3. ब्राउज़र के संदर्भ मेनू में कार्यक्षमता जोड़ें

उसके साथ तत्व और उसके type = "संदर्भ" विशेषता, आप कर सकते हैं कस्टम कार्यक्षमता जोड़ें को ब्राउज़र का संदर्भ मेनू. आपको असाइन करने की आवश्यकता है के बच्चे तत्व के रूप में

टैग। आईडी का तत्व की जरूरत है के रूप में एक ही मूल्य ले संदर्भ की विकल्प - सूची गुण जिस तत्व को हम संदर्भ मेनू में जोड़ना चाहते हैं (जो है) नीचे दिए गए उदाहरण में तत्व).

कोड उदाहरण:

राइट क्लिक करें

टैग कर सकते हैं तीन अलग-अलग प्रकार हैं, "चेकबॉक्स", "आदेश" (जिस पर आपको जावास्क्रिप्ट के साथ एक क्रिया जोड़ने की आवश्यकता है), और रेडियो. हालाँकि संदर्भ मेनू में एक से अधिक मेनू आइटम जोड़ना संभव है ब्राउज़र का समर्थन इस सुविधा के लिए है अभी तक बहुत अच्छा नहीं है. Chrome 54 इसका समर्थन नहीं करता है, और फ़ायरफ़ॉक्स 50 केवल एक अतिरिक्त संदर्भ मेनू की उपस्थिति की अनुमति देता है। नीचे आप देख सकते हैं कि फ़ायरफ़ॉक्स 50 में कोड उदाहरण कैसे काम करता है.

4. नेस्ट हेडर और फुटर

HTML 5.1 आपको अनुमति देता है घोंसला हेडर और पाद यदि प्रत्येक स्तर है सेक्शनिंग सामग्री के भीतर निहित. नीचे नोट W3C डॉक्स से एक स्क्रीनशॉट है, और डेवलपर्स को हेडर और फुटर नेस्टिंग के सही तरीके के बारे में सलाह देता है.

यदि आप जोड़ना चाहते हैं तो यह सुविधा उपयोगी हो सकती है अर्थिंग सेक्शनिंग तत्वों के लिए विस्तृत हेडर, जैसे कि

तथा

. नीचे दिया गया कोड उदाहरण हेडर के अंदर एक साइडबार बनाता है,