सोचिए आप किसी formal event में suit पहनकर जा रहे हैं। HTML एक relaxed dress code की तरह है—आप अपनी tie ढीली कर सकते हैं, अपनी sleeves roll up कर सकते हैं, या अपनी jacket को unbutton छोड़ सकते हैं, और कोई आपको जाने को नहीं कहेगा। Browser फिर भी आपका page display करने की पूरी कोशिश करेगा, भले ही आप typos करें या tags भूल जाएं।
दूसरी तरफ, XHTML एक strict military uniform की तरह है। हर button fasten होना चाहिए, आपकी tie बिल्कुल सीधी होनी चाहिए, और आपके जूते polished होने चाहिए। अगर आप XHTML में एक भी typo करते हैं या कोई tag भूल जाते हैं, तो browser आपका page load करना पूरी तरह बंद कर देगा और एक blank error screen दिखाएगा।
इन दोनों standards के बीच के अंतर को समझना साफ, robust, और modern web code लिखने के लिए जरूरी है।
XHTML (Extensible HyperText Markup Language) एक strict,
XML-based markup language है जिसे HTML की जगह लेने के लिए डिज़ाइन किया गया था। यह यह सुनिश्चित करने के लिए strict formatting rules लागू करता है कि webpages किसी भी system द्वारा साफ तरीके से parse किए जा सकें।
Note:
XHTML 2000 के दशक की शुरुआत में लोकप्रिय था, लेकिन modern projects ज्यादा flexible HTML5 standard को पसंद करते हैं।
Warning:
XHTML documents पूरी तरह errors से मुक्त होने चाहिए, क्योंकि एक भी syntax mistake page को load होने से रोक देगी।
Standard HTML में, कुछ elements (जैसे paragraphs) पर closing tags optional होते हैं, और self-closing tags (जैसे images) को closing slash की जरूरत नहीं होती।
XHTML में, हर एक element का एक corresponding closing tag होना चाहिए, और self-closing tags एक trailing slash के साथ खत्म होने चाहिए।
Note:
अपने कोड को साफ, पढ़ने लायक, और HTML5 व XHTML दोनों standards के साथ compatible रखने के लिए हमेशा अपने tags को close करें।
Warning:
XHTML में self-closing tag पर closing slash छोड़ देने से syntax error आएगी और आपका page crash हो जाएगा।
Standard
HTML case-insensitive है, यानी आप अपने tags uppercase या lowercase में लिख सकते हैं। XHTML पूरी तरह case-sensitive है और सभी tag और attribute names को lowercase में लिखना जरूरी है।
Note:
modern web development में best practice के रूप में अपने सभी tags और attributes को lowercase में लिखें।
Warning:
XHTML में uppercase tags का उपयोग करने से XML parsing errors आएंगी और page render नहीं होगा।
उदाहरण: Case Sensitivity and Lowercase Tags
markup
<p>Correct XHTML: lowercase tags</p>
Strict Attribute Value Rules
Standard HTML में, आप disabled या readonly जैसे shorthand attributes बिना values के लिख सकते हैं, और single-word attribute values के चारों ओर quotes छोड़ सकते हैं।
XHTML attribute shorthand को मना करता है और सभी attribute values को lowercase में लिखा और double quotes में wrap किया जाना जरूरी करता है।
Note:
attribute shorthand इस्तेमाल करने से बचें और हमेशा अपने attribute values को double quotes में wrap करें।
Warning:
XHTML में attribute shorthand का उपयोग करना (जैसे disabled="disabled" की जगह सिर्फ disabled लिखना) syntax error trigger करेगा और page crash कर देगा।
उदाहरण: Strict Attribute Value Rules
markup
<input type="checkbox" disabled="disabled">
Nesting Constraints और Overlapping
HTML nesting errors के साथ काफी उदार है और overlapping tags को अपने-आप ठीक करने की कोशिश करता है। XHTML पूरी तरह structured है और सभी elements को उसी उल्टे क्रम में बंद करना जरूरी करता है जिस क्रम में वे खोले गए थे।
Note:
tags को nested boxes की तरह सोचें: बाहरी box बंद करने से पहले आपको अंदर वाला box बंद करना होगा।
Warning:
अपने HTML tags को गलत nesting order में overlap करना XHTML page validation को तोड़ देगा।
उदाहरण: Nesting Constraints and Overlapping
markup
<div>
<p>Correctly nested and closed in reverse order</p>
</div>
{# 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. #}