🖐️ 👎🏼 ⬇️ HTML5 मार्कअप में आम गलतियों से बचें 💌 🤷 👩‍⚕️

प्रिय Khabrovites, मैं आपके लिए लेख का एक मुफ्त अनुवाद प्रस्तुत करता हूं जो सामान्य एचटीएमएल 5 त्रुटियों से बचा रहा है। यहां हम शब्दार्थों के संदर्भ में HTML5 मार्कअप में सामान्य गलतियों को देखते हैं, और उनसे कैसे बचें।

HTML5 साइट गैलरी में साइटें देखना और उपयोगकर्ता के सवालों का जवाब देना, मैंने HTML5 मार्कअप वाली कई साइटें देखीं। इस लेख में, मैं आपको कुछ गलतियों और बुरे मार्कअप प्रथाओं को दिखाऊंगा, जिनका मैंने अक्सर सामना किया है और समझाता हूं कि उनसे कैसे बचा जाए।

स्टाइल के लिए रैपर के रूप में <अनुभाग> टैग का उपयोग न करें।

सबसे आम समस्याओं में से एक मैंने देखा है HTML5 संरचनात्मक तत्वों के साथ विशेष रूप से <div> का अनुभागीय प्रतिस्थापन है। यानी जब XHTML या HTML4 में क्या दिखता है:

<!--    HTML 4 --> <div id="wrapper"> <div id="header"> <h1>My super duper page</h1> <!--   --> </div> <div id="main"> <!--   --> </div> <div id="secondary"> <!--   --> </div> <div id="footer"> <!--   --> </div> </div>

निम्नानुसार फिर से लिखें:

 <!--    !  ! --> <section id="wrapper"> <header> <h1>My super duper page</h1> <!--   --> </header> <section id="main"> <!--   --> </section> <section id="secondary"> <!--   --> </section> <footer> <!--   --> </footer> </section>

यह बस गलत है: <अनुभाग> एक आवरण नहीं है। इस तत्व का अर्थ है आपकी सामग्री का शब्दार्थ ब्लॉक, जिसका उपयोग " दस्तावेज़ रूपरेखा " बनाने के लिए किया जाता है, और इसमें शीर्षक होना चाहिए। यदि आपको लपेटने के लिए एक तत्व की आवश्यकता है, तो चारों ओर जाने की कोशिश करें <body> (क्रोक कैमेन के पास कुछ देने के लिए है) यदि यह अतिरिक्त रैपर की आवश्यकता की समस्या को हल नहीं करता है, तो अच्छे पुराने <div> 's का उपयोग करें। HTML5 के आगमन के साथ, <div> के मृत नहीं हैं , और यह है कि वे इस मामले में महान हैं।

उपरोक्त सभी को देखते हुए, इस तरह HTML5 का उपयोग करके उपरोक्त उदाहरण को चिह्नित करना अच्छा होगा:

 <body> <header> <h1>My super duper page</h1> <!--   --> </header> <div role="main"> <!--   --> </div> <aside role="complementary"> <!--   --> </aside> <footer> <!--   --> </footer> </body>

यदि आप सुनिश्चित नहीं हैं कि किस तत्व का उपयोग करना है, तो मैं आपको सलाह देता हूं कि एक तत्व ( अनुवादक के नोट: प्रविष्टि के बहुत नीचे देखें) का चयन करने के लिए हमारे फ़्लोचार्ट का उपयोग करें।

केवल आवश्यकता होने पर <शीर्ष लेख> और <hgroup> का उपयोग करें

यह कोड लिखने के लिए कोई मतलब नहीं है अगर यह आवश्यक नहीं है, है ना? काश, मैं अक्सर <शीर्ष लेख> और <hgroup> निरीक्षण करता हूँ जहाँ उनकी आवश्यकता नहीं है। आप <शीर्ष लेख> और <hgroup> तत्वों के बारे में अधिक पढ़ सकते हैं, लेकिन मैं मुख्य बिंदुओं को संक्षेप में बताऊंगा :

<शीर्ष लेख> तत्व परिचयात्मक या नेविगेशनल एड्स के एक समूह का प्रतिनिधित्व करता है और आमतौर पर एक अनुभाग शीर्षक होता है
<Hgroup> तत्व समूह तत्वों का एक समूह <h1> - <h6> है, यदि यह कई स्तरों (सबहेडिंग, वैकल्पिक हेडिंग इत्यादि) के अनुभाग हेडिंग का प्रतिनिधित्व करता है।

अतिरिक्त <शीर्ष लेख> तत्व

मुझे यकीन है कि आप अच्छी तरह जानते हैं कि किसी दस्तावेज़ में <हैडर> तत्व का कई बार उपयोग किया जा सकता है। इसलिए, यह अक्सर पाया जाता है:

 <!--    !  header  ! --> <article> <header> <h1>My best blog post</h1> </header> <!--   --> </article>

यदि आपके <शीर्ष लेख> में केवल एक हेडर तत्व है, तो इसकी आवश्यकता नहीं है। इस मामले में, <लेख> तत्व पहले से ही गारंटी देता है कि शीर्षक "दस्तावेज़ रूपरेखा" में शामिल किया जाएगा, और चूंकि <शीर्ष लेख> में कई तत्व (परिभाषित नहीं) हैं, इसलिए इसे सुरक्षित रूप से हटाया जा सकता है। बस इतना काफी है:

 <article> <h1>My best blog post</h1> <!--   --> </article>

<Hgroup> का दुरुपयोग

और फिर से हेडर के बारे में: मैं अक्सर <hgroup> तत्व का गलत उपयोग देखता हूं। अगर <हेडर> के साथ <hgroup> का उपयोग न करें:

केवल एक शीर्षक मौजूद है
<hgroup> अपने आप पर अच्छा है (यानी, बिना <शीर्ष लेख>)।

पहला मामला:

 <!--    !  hgroup   --> <header> <hgroup> <h1>My best blog post</h1> </hgroup> <p>by Rich Clark</p> </header>

इस स्थिति में, बस hgroup निकालें।

 <header> <h1>My best blog post</h1> <p>by Rich Clark</p> </header>

दूसरा मामला किसी तत्व का अनावश्यक रूप से उपयोग करने का एक और उदाहरण है।

 <!--    !  header   --> <header> <hgroup> <h1>My company</h1> <h2>Established 1893</h2> </hgroup> </header>

यदि एकमात्र बच्चा <हैडर> है और यह <hgroup> है, तो <हेडर> की आवश्यकता क्यों है? यदि आपके पास <शीर्ष लेख> की (यानी बहन से <hgroup>) अतिरिक्त तत्व नहीं हैं, तो बस <शीर्षक> हटा दें।

 <hgroup> <h1>My company</h1> <h2>Established 1893</h2> </hgroup>

यहां <hgroup> तत्व के बारे में और पढ़ें।

सभी लिंक को <nav> में फ्रेम न करें

एचटीएमएल 5 ने हमें संरचित और सार्थक मार्कअप बनाने में सक्षम करने के लिए 30 नए तत्व पेश किए। लेकिन किसी को नए अर्थ तत्वों का दुरुपयोग नहीं करना चाहिए। दुर्भाग्य से, यह वास्तव में <nav> के साथ होता है। विनिर्देशन का वर्णन इस तरह से है:

नौसेना तत्व एक पृष्ठ के एक भाग का प्रतिनिधित्व करता है जो इसे अन्य पृष्ठों या वर्तमान पृष्ठ के कुछ हिस्सों (नेविगेशन लिंक के साथ एक अनुभाग) से जोड़ता है।

नोट: सभी लिंक समूहों को नौसेना तत्व में नहीं रखा जाना चाहिए। इसका इस्तेमाल बेसिक नेविगेशन के लिए होना चाहिए। अक्सर पाद लेख में साइट के विभिन्न पृष्ठों (गृह, सहायता, उपयोग की शर्तें, आदि ) के लिंक की एक छोटी सूची होती है। इस मामले में, एक पाद पर्याप्त होना चाहिए। यद्यपि आपको नौसेना का उपयोग करने से कुछ भी नहीं रोक रहा है, यह आवश्यक नहीं है।

WHATWG HTML कल्पना

मुख्य वाक्यांश "बुनियादी नेविगेशन" है। आप एक लंबे समय के लिए बहस कर सकते हैं कि मुख्य एक का क्या मतलब है, लेकिन मेरे लिए यह है:

प्राथमिक नेविगेशन
साइट खोज
द्वितीयक नेविगेशन (विवादास्पद)
इन-पेज नेविगेशन (उदाहरण के लिए एक लंबा लेख के अंदर)

हालांकि इस मामले में यह तय करना मुश्किल है कि क्या सही है और क्या नहीं, मेरा मानना है कि यह <nav> में समाप्त होने लायक नहीं है:

पृष्ठ स्विचर
सामाजिक लिंक (हालांकि अपवाद उन मामलों में संभव है जहां सामाजिक लिंक मुख्य नेविगेशन हैं। उदाहरण के लिए, about.me या flavs.s. ) जैसी साइटें)
पोस्ट टैग
पोस्ट श्रेणियाँ
तृतीयक नेविगेशन
वॉल्यूमेट्रिक पाद

यदि आप सुनिश्चित नहीं हैं कि लिंक की सूची को <nav> में फ़्रेम करें, तो अपने आप से सवाल पूछें: "क्या यह मुख्य नेविगेशन है?"। निम्नलिखित पर विचार करें:

"अगर आपको लगता है कि <nav> का उपयोग नहीं करते हैं, तो हेडिंग के साथ <section> <h x > भी करेंगे" - HixC
शायद आपको सुविधा के लिए एक "गो" जोड़ना चाहिए?

यदि इन प्रश्नों का उत्तर "नहीं" है, तो यह स्पष्ट रूप से <nav> के लिए जगह नहीं है।

<आंकड़ा> तत्व का उपयोग करने में सामान्य त्रुटियां

आह, <आंकड़ा>। इस तत्व के उचित उपयोग के साथ-साथ इसके साथी <figcaption> से निपटना आसान नहीं है। आइए इस आइटम के बारे में कुछ सामान्य त्रुटियों पर एक नज़र डालें।

हर छवि <आंकड़ा> नहीं

इससे पहले, मैंने आपको सलाह दी कि आप आवश्यकता से अधिक कोड न लिखें। यहां भी ऐसी ही स्थिति है। मैं उन साइटों से मिला जहाँ प्रत्येक चित्र को <आंकड़ा> में फंसाया गया था। आपको केवल अधिक मार्कअप का उपयोग करने के लिए अधिक मार्कअप का उपयोग करने की आवश्यकता नहीं है। आप बस अपने लिए और अधिक काम पैदा करते हैं, लेकिन अपनी सामग्री के विवरण में सुधार नहीं करते हैं।

विनिर्देशन वर्णन करता है <आंकड़ा> "स्टैंड-अलोन सामग्री के रूप में, संभवतः एक शीर्षक और आमतौर पर एक अलग प्रवाह तत्व के साथ।" यहां यह है, सभी सुंदरता <आंकड़ा> - तत्व को मुख्य सामग्री से आसानी से स्थानांतरित किया जा सकता है, उदाहरण के लिए, साइडबार पर।

उपरोक्त तत्व चयन फ़्लोचार्ट आपको <आंकड़ा> से निपटने में मदद करेगा।

यदि कोई चित्र केवल एक प्रस्तुति लोड करता है और दस्तावेज़ में कहीं भी संदर्भित नहीं है, तो यह निश्चित रूप से एक <आंकड़ा> नहीं है। अन्यथा, अपने आप से सवाल पूछें: "क्या यह छवि समझने के लिए वर्तमान संदर्भ में आवश्यक है?" यदि नहीं, तो यह स्पष्ट रूप से एक <आंकड़ा> नहीं है (संभवतः <एक तरफ>)। यदि हां, तो अपने आप से पूछें, "क्या मैं इसे एप्लिकेशन में स्थानांतरित कर सकता हूं?"। यदि दोनों प्रश्नों का उत्तर हां है, तो शायद <आंकड़ा> करेंगे।

आपका लोगो <आंकड़ा> नहीं है

वही लोगो के लिए जाता है। अक्सर मैं इस एप्लिकेशन को देखता हूं:

 <!--    !  ! --> <header> <h1> <figure> <img src="/img/mylogo.png" alt="My company" class="hide" /> </figure> My company name </h1> </header>

 <!--    !  ! --> <header> <figure> <img src="/img/mylogo.png" alt="My company" /> </figure> </header>

जोड़ने के लिए कुछ भी नहीं है। यह बस सच नहीं है। आप इस बारे में लंबे समय तक तर्क दे सकते हैं कि लोगो <h1> में होना चाहिए, लेकिन हम अभी उस बारे में बात नहीं कर रहे हैं। वास्तविक गलती <आंकड़ा> तत्व का दुरुपयोग है। जब आप किसी डॉक्यूमेंट में इसे लिंक करते हैं तो <आंकड़ा> का उपयोग किया जाना चाहिए। यह संभावना नहीं है कि आप कभी भी अपने लोगो को कहीं भी संदर्भित करेंगे। पर्याप्त:

 <header> <h1>My company name</h1> <!--  - --> </header>

<आंकड़ा> केवल एक छवि से अधिक हो सकता है

<आंकड़ा> तत्व की गलतफहमी का एक और सामान्य मामला यह धारणा है कि इसका उपयोग केवल चित्रों के लिए किया जा सकता है। लेकिन ऐसा है नहीं। एक <आंकड़ा> वीडियो, ऑडियो, ग्राफिक्स (एसवीजी में, उदाहरण के लिए), एक उद्धरण, एक तालिका, एक कोड ब्लॉक, एक कविता या उपरोक्त के किसी भी संयोजन को शामिल कर सकता है। केवल चित्रों के साथ <आंकड़ा> का उपयोग करने के लिए खुद को सीमित न करें। वेब मानकों के पालन के रूप में हमारा लक्ष्य हमारे मार्कअप की सामग्री का वर्णन करना है।

बहुत पहले नहीं मैंने अधिक विवरण में <आंकड़ा> तत्व के बारे में लिखा था । मैं आपको सलाह देता हूं कि यदि आप बेहतर समझना चाहते हैं या अपनी यादों को ताज़ा करना चाहते हैं।

अनावश्यक प्रकार की विशेषता का उपयोग न करें

यह शायद HTML5 गैलरी में सामने आया सबसे आम मुद्दा है। हालांकि यह कोई गलती नहीं है, मेरा मानना है कि इससे बचना बेहतर है।

HTML5 में, <script> और <style> तत्वों के लिए टाइप विशेषता निर्दिष्ट करने की आवश्यकता नहीं है। हालाँकि, यदि वे आपके CMS द्वारा स्वचालित रूप से जोड़े जाते हैं, तो उन्हें निकालना मुश्किल हो सकता है, लेकिन अगर आप इसे स्वयं लिखते हैं या आप टेम्पलेट प्रबंधित कर सकते हैं, तो उन्हें कोड में शामिल करने का कोई मतलब नहीं है। क्योंकि सभी ब्राउज़र, डिफ़ॉल्ट रूप से, यह मानते हैं कि सभी स्क्रिप्ट जावास्क्रिप्ट में लिखे गए हैं, और शैलियों सीएसएस हैं, ऐसे मार्कअप बेमानी हो जाते हैं:

 <!--    !   ! --> <link type="text/css" rel="stylesheet" href="css/styles.css" /> <script type="text/javascript" src="js/scripts"></script>

इसके बजाय, आप बस लिख सकते हैं:

 <link rel="stylesheet" href="css/styles.css" /> <script src="js/scripts"></script>

अन्य बातों के अलावा, आप एन्कोडिंग को निर्दिष्ट करने पर खर्च किए गए कोड की मात्रा को भी कम कर सकते हैं। एचटीएमएल 5 में डाइव में मार्क पिलग्रिम के शब्दार्थ अध्याय इन सभी प्रथाओं का वर्णन करता है।

प्रपत्र विशेषताओं का गलत उपयोग

आपको पहले से ही पता होना चाहिए कि HTML5 में कई नए रूप विशेषता पेश किए गए हैं। हम निकट भविष्य में उन पर विचार करेंगे, अब मैं आपको संक्षेप में बताऊंगा कि यह कैसे करना है इसके लायक नहीं है।

तार्किक विशेषताएं

मल्टीमीडिया तत्वों और कुछ अन्य लोगों के लिए भी तार्किक विशेषताएं हैं। मेरे द्वारा वर्णित नियम उन पर लागू होते हैं।

नए फॉर्म के कुछ गुण तार्किक हैं, अर्थात मार्कअप में उनकी उपस्थिति तत्वों के व्यवहार को निर्धारित करती है। इसमें शामिल हैं:

ऑटोफोकस
स्वत: पूर्ण
अपेक्षित

मैं शायद ही कभी उन्हें देखता हूं, लेकिन आवश्यकता के मामले में, मैंने यह देखा:

 <!--    !  ! --> <input type="email" name="email" required="true" />

 <!--     --> <input type="email" name="email" required="1" />

अंतत: इससे किसी चीज के खराब होने का खतरा नहीं होता है। क्लाइंट HTML पार्सर मार्कअप में आवश्यक विशेषता को पूरा करेगा और संबंधित नियमों को लागू करेगा। लेकिन क्या होगा अगर आप इसे अलग तरह से करते हैं और आवश्यक लिखते हैं = "झूठा"?

 <!--    !  ! --> <input type="email" name="email" required="false" />

पार्सर अभी भी आवश्यक विशेषता को देखेगा और उचित व्यवहार को लागू करेगा, इस तथ्य के बावजूद कि आपने इसे निर्देश दिया था। जाहिर है, यह वह नहीं है जो आप चाहते थे।

तार्किक मान तीन तरीकों से लागू किया जा सकता है: (दूसरा और तीसरा XHTML के लिए विशेषता है)

अपेक्षित
आवश्यक = ""
आवश्यक = "आवश्यक ="

जैसा कि ऊपर हमारे उदाहरण पर लागू होता है, हम इसे (HTML में) लिख सकते हैं:

 <input type="email" name="email" required />

HTML5 मार्कअप में आम गलतियों से बचें