बेहतर वेब विकास के लिए 8 सामान्य HTML गलतियाँ जिनसे आपको बचना चाहिए

आप जैसे पाठक MUO का समर्थन करने में मदद करते हैं। जब आप हमारी साइट पर लिंक का उपयोग करके खरीदारी करते हैं, तो हम संबद्ध कमीशन अर्जित कर सकते हैं। और पढ़ें।

हर वेबसाइट की नींव HTML है—यह वेब पेजों पर सामग्री की संरचना और प्रस्तुति के लिए प्राथमिक भाषा है।

हालांकि, यहां तक कि अनुभवी HTML कोडर साधारण त्रुटियां कर सकते हैं जिसके परिणामस्वरूप खराब अनुकूलित वेबसाइटें होती हैं। और इस तरह की त्रुटियाँ प्रदर्शन, प्रयोज्यता और पहुँच के साथ समस्याएँ पैदा कर सकती हैं।

दिन का वीडियो सामग्री के साथ जारी रखने के लिए स्क्रॉल करें

उनसे बचने में मदद के लिए, निम्नलिखित सामान्य HTML त्रुटियों का अध्ययन करने का प्रयास करें और उन्हें रोकने के तरीकों की खोज करें।

मैं जेपीईजी के फ़ाइल आकार को कैसे कम करूं?

1. पदावनत HTML तत्वों का उपयोग करना

पदावनत html तत्वों के उपयोग को दर्शाने वाला स्क्रीनशॉट

HTML समय के साथ बदल गया है, इसलिए कुछ तत्व और विशेषताएँ अब बेमानी हैं। आधुनिक ब्राउज़र बहिष्कृत तत्वों और विशेषताओं का समर्थन नहीं करते हैं, और उनका उपयोग आपकी वेबसाइट की गति को नकारात्मक रूप से प्रभावित कर सकता है।

<केंद्र> पाठ केंद्रित करने के लिए टैग, <फ़ॉन्ट> पाठ को स्वरूपित करने के लिए टैग, और <हड़ताल> स्ट्राइकथ्रू टेक्स्ट के लिए टैग सबसे अधिक उपयोग किए जाने वाले बहिष्कृत HTML तत्वों में से कुछ हैं। आपको इन घटकों के लिए आधुनिक समकक्षों का उपयोग करना चाहिए।

उदाहरण के लिए, आप कर सकते हैं सामग्री को केंद्र में रखने के लिए CSS का उपयोग करें , इसके बजाय <केंद्र> उपनाम। इसके अतिरिक्त, आप के बजाय CSS का उपयोग करके फ़ॉन्ट शैली सेट कर सकते हैं <फ़ॉन्ट> उपनाम।

2. ऑल्ट टेक्स्ट शामिल नहीं है

कोड का उदाहरण दिखाने वाला स्क्रीनशॉट जिसमें छवियों के लिए ऑल्ट टेक्स्ट शामिल नहीं है

जबकि छवियां ऑनलाइन डिज़ाइन का एक महत्वपूर्ण घटक हैं, दृष्टिबाधित दर्शक उन्हें नहीं देख सकते हैं। ऐसे में आपको जोड़ना चाहिए वर्णनात्मक वैकल्पिक पाठ तस्वीरों के लिए उन्हें और अधिक सुलभ बनाने के लिए।

ऑल्ट टेक्स्ट टेक्स्ट-टू-स्पीच इंजन को उपयोगकर्ताओं को छवि विवरण पढ़ने की अनुमति देता है। हालांकि, यह केवल स्क्रीन-पाठकों के लिए नहीं है; ऑल्ट टेक्स्ट से सर्च इंजन ऑप्टिमाइजेशन को फायदा हो सकता है। यदि छवि लोड होने में विफल रहती है तो अधिकांश ब्राउज़र ऑल्ट टेक्स्ट भी प्रदर्शित करेंगे।

3. HTML तत्वों की अनुचित नेस्टिंग

स्वीकार्य कोड और उचित वेबसाइट संचालन की गारंटी के लिए, HTML तत्वों को ठीक से नेस्ट करना चाहिए। अपर्याप्त नेस्टिंग के अप्रत्याशित प्रभाव हो सकते हैं, जिसमें टूटे हुए लेआउट, अनुपलब्ध सामग्री और टूटे हुए लिंक शामिल हैं।

उदाहरण के लिए, आपको नया खोलने से पहले प्रत्येक div टैग को बंद कर देना चाहिए। इसी तरह, आपको कभी नहीं करना चाहिए <वह> एक आदेशित या अनियंत्रित सूची के बाहर टैग करें।

4. div टैग का अत्यधिक उपयोग करना

स्क्रीनशॉट div टैग्स का अत्यधिक उपयोग दिखा रहा है।

'Div' टैग एक लचीला HTML तत्व है जिसका उपयोग सामग्री को समूहीकृत करने और स्टाइल करने के लिए किया जाता है। हालांकि, इस टैग के अत्यधिक उपयोग के परिणामस्वरूप खराब व्यवस्थित वेबसाइट हो सकती है और कोड रखरखाव मुश्किल हो सकता है।

आपको सिमेंटिक HTML तत्वों को नियोजित करना चाहिए जो हर चीज के लिए div टैग के बजाय सामग्री का अर्थ देते हैं। आप उपयोग कर सकते हैं <शीर्षलेख> एक div टैग के बजाय हेडर के लिए टैग करें। इसी तरह आपको इसका इस्तेमाल करना चाहिए <कोई नहीं> के स्थान पर एक नेविगेशन बार के लिए टैग <दिव> उपनाम।

5. सिमेंटिक HTML का उपयोग नहीं करना

सिमेंटिक तत्वों के उपयोग के बिना HTML कोड का स्क्रीनशॉट

सिमेंटिक तत्वों के उपयोग के बिना <शीर्षक>, <पाद>, <नेव>, <अनुभाग>, और <लेख> , वेबपेज अस्त-व्यस्त और असंगठित दिखाई दे सकता है, जिससे उपयोगकर्ताओं के लिए नेविगेट करना और उनके लिए आवश्यक जानकारी ढूंढना अधिक कठिन हो जाता है।

आप रास्पबेरी पाई के साथ क्या कर सकते हैं 2

आपकी वेबसाइट की रैंक भी नीचे हो सकती है खोज इंजन परिणाम पृष्ठ (SERPs) अगर सर्च इंजन को कंटेंट इंडेक्स करने में परेशानी होती है।

6. सीएसएस के बजाय इनलाइन स्टाइल्स का उपयोग करना

आप शैली विशेषता का उपयोग करके इनलाइन CSS शैलियों को सीधे HTML तत्व पर लागू कर सकते हैं। जबकि ये शैलियाँ त्वरित परिवर्तन करने में सहायक होती हैं, उनका अत्यधिक उपयोग कोड को बनाए रखने के लिए कठिन बना सकता है और वेबसाइट की दक्षता को नुकसान पहुँचा सकता है।

नतीजतन, आपको बाहरी सीएसएस फाइलों का उपयोग करना चाहिए जो इनलाइन शैलियों के बजाय विश्व स्तर पर वेबसाइट पर शैलियों को लागू करती हैं। वे ब्राउज़र को भेजे गए कोड को कम करके वेबसाइट के प्रदर्शन को बढ़ाते हैं और वे वेबसाइट के रखरखाव को भी आसान बनाते हैं।

7. उत्तरदायी डिजाइनों का उपयोग नहीं करना

एक गैर-उत्तरदायी वेबसाइट कोड कैसा दिख सकता है

उत्तरदायी डिज़ाइन एक वेब डिज़ाइन रणनीति है जो वेबसाइटों को विभिन्न स्क्रीन आकारों और उपकरणों में समायोजित करने में सक्षम बनाती है। के लिए यह तरीका जरूरी है वेबसाइट पहुंच में वृद्धि और उपयोगकर्ता अनुभव, मोबाइल उपकरणों के बढ़ते उपयोग को देखते हुए।

डिवाइस की स्क्रीन के आकार के आधार पर विभिन्न शैलियों को लागू करने के लिए आपको CSS मीडिया प्रश्नों का उपयोग करना चाहिए। यह उपयोगकर्ता के अनुभव को बेहतर बनाता है क्योंकि यह वेबसाइट को विभिन्न उपकरणों पर एक्सेस करने योग्य बनाता है।

8. HTML को मान्य करने में विफल

कोड त्रुटि मुक्त और वेब मानकों के अनुरूप है यह सुनिश्चित करने के लिए वेब विकास HTML सत्यापन के साथ शुरू होना चाहिए। अमान्य HTML के परिणामस्वरूप टूटे हुए लेआउट, लापता सामग्री, टूटी हुई लिंक और कई अन्य समस्याएं हो सकती हैं।

अपने कोड में गलतियों को खोजने और सुधारने के लिए आपको HTML सत्यापनकर्ताओं का उपयोग करना चाहिए। शुद्धता के अलावा, सत्यापन प्रदर्शन, पहुंच और खोज इंजन अनुकूलन में भी सुधार करता है।

आधुनिक HTML और CSS का उपयोग करना

क्षितिज पर नई सुविधाओं के साथ, HTML5 और CSS3 डेवलपर्स को आकर्षक वेबसाइट बनाने के लिए पहले से कहीं अधिक संसाधन दे रहे हैं। साथ ही, वेब एक्सेसिबिलिटी मानकों के विकास से विकलांग लोगों के लिए उपयोगकर्ता अनुभव में सुधार होगा।

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