← Back to HTML Course | Chapter 10: Reference & Interview Prep | Lesson 18 of 20

HTML वैलिडेशन

Browsers हैरान करने वाली हद तक माफ़ करने वाले होते हैं। unclosed tags या missing attributes जैसी गलतियों से भरा HTML भी आमतौर पर screen पर कुछ न कुछ render कर ही देता है, जिससे यह मान लेना आसान हो जाता है कि code ठीक है जबकि असल में नहीं होता। HTML validation आपके markup को भाषा के official rules के खिलाफ चेक करती है और हर उस जगह को flag करती है जहाँ वे टूटते हैं, भले ही page visually सही दिख रहा हो। इन issues को जल्दी पकड़ लेने से वे subtle bugs रुकते हैं जो सिर्फ कुछ खास browsers, screen readers, या devices पर ही सामने आते हैं। W3C Markup Validator इसके लिए standard free tool है, और किसी cookiescursor.com tool page जैसे page को इससे गुज़ारने में बस कुछ ही seconds लगते हैं।

In this page:

  1. HTML वैलिडेशन क्यों ज़रूरी है
  2. W3C Markup Validator इस्तेमाल करना
  3. आम वैलिडेशन एरर्स
  4. डॉकटाइप और डॉक्यूमेंट स्ट्रक्चर एरर्स
  5. एक्सेसिबिलिटी के लिए वैलिडेट करना

HTML वैलिडेशन क्यों ज़रूरी है

चूँकि browsers टूटे हुए markup से भी gracefully recover करने की कोशिश करते हैं, invalid HTML फिर भी एक सामान्य दिखने वाला page render कर सकता है, जिससे structural problems छिपे रह जाते हैं जो शायद किसी दूसरे browser, screen reader, या future update में ही सामने आएँ।

Note: publish करने से पहले नए pages को validator से गुज़ारें, ठीक वैसे ही जैसे आप ship करने से पहले tests चलाते हैं।
Warning: कोई page जो "ठीक दिखता है" यह साबित नहीं करता कि उसका HTML valid है; visual correctness और markup correctness दो अलग चीज़ें हैं।

उदाहरण: Why HTML Validation Matters

markup 
<p>Unclosed paragraph
<div>Nested incorrectly</div>

W3C Markup Validator इस्तेमाल करना

W3C Markup Validator, जो validator.w3.org पर उपलब्ध है, किसी page को तीन तरीकों से चेक कर सकता है: live URL से, HTML file upload करके, या raw code सीधे एक text box में paste करके।

Note: जब तक किसी page को locally draft किया जा रहा हो, यानी उसका कोई public URL न हो, तब तक "direct input" option इस्तेमाल करें।
Warning: किसी URL को validate करने पर सिर्फ वही HTML चेक होता है जो असल में browser तक पहुँचाया गया, बाद में JavaScript द्वारा generate किया गया कोई भी markup नहीं।

उदाहरण: Using the W3C Markup Validator

markup 
<!-- Paste this code into validator.w3.org to check it -->
<!DOCTYPE html>
<html>
</html>

आम वैलिडेशन एरर्स

ज़्यादातर validation errors कुछ दोहराई जाने वाली categories में आते हैं: unclosed tags, गलत क्रम में nested elements, duplicate IDs, और ऐसे attributes जो किसी particular element पर नहीं होने चाहिए।

Note: validator की report में सबसे ऊपर से errors ठीक करना शुरू करें, क्योंकि एक शुरुआती unclosed tag नीचे कई unrelated-सी दिखने वाली errors की झड़ी लगा सकता है।
Warning: Duplicate id values एक आम लेकिन आसानी से miss हो जाने वाली error है, क्योंकि browsers इनके बारे में warn नहीं करते, भले ही ये id-based CSS और JavaScript targeting को तोड़ दें।

उदाहरण: Common Validation Errors

markup 
<div id="box">First</div>
<div id="box">Duplicate id causes a validation error</div>

डॉकटाइप और डॉक्यूमेंट स्ट्रक्चर एरर्स

एक missing या malformed doctype browsers को "quirks mode" में डाल देता है, जो एक पुराना compatibility mode है जो CSS और layout के calculate होने का तरीका बदल देता है, और यह validator द्वारा सबसे पहले चेक की जाने वाली चीज़ों में से एक है।

Note: हर HTML document को हमेशा आधुनिक, सरल doctype से शुरू करें: <!DOCTYPE html>।
Warning: कोई पुराना या गलत spelled doctype चुपचाप quirks mode trigger कर सकता है, जिससे ऐसे layout differences आते हैं जिनका आपकी CSS से कोई लेना-देना नहीं होता।

उदाहरण: Doctype and Document Structure Errors

markup 
<!DOCTYPE html>
<html lang="en">
</html>

एक्सेसिबिलिटी के लिए वैलिडेट करना

सिर्फ syntax से आगे, validators और dedicated accessibility checkers missing alt text, unlabeled form fields, और खराब heading order जैसे issues को फ्लैग करते हैं, जो यह प्रभावित करते हैं कि कोई page screen readers के साथ कितनी अच्छी तरह काम करता है।

Note: एक ज़्यादा पूरी तस्वीर के लिए W3C Markup Validator को किसी dedicated accessibility checker के साथ जोड़ें, क्योंकि हर accessibility issue कोई सख्त HTML syntax error नहीं होता।
Warning: कोई page पूरी तरह valid HTML होते हुए भी inaccessible हो सकता है, क्योंकि accessibility सिर्फ syntax पर नहीं, बल्कि meaningful alt text और logical heading order जैसी चीज़ों पर भी निर्भर करती है।

उदाहरण: Validating for Accessibility

markup 
<img src="photo.jpg">
<!-- Missing alt attribute flagged by accessibility checkers -->
Live Example
Related Topics

HTML इनपुट वैलिडेशन · HTML ब्राउज़र DevTools · HTML क्विज़ · HTML इमेज मैप्स

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
🔒

Chapter Quiz — Complete all 20 topics to unlock

0/20 topics done

Complete these topics first:

← Previous Lesson HTML Browser DevTools Next Lesson → HTML Quiz

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.