वे ज़रूरी टैग जो HTML को उम्मीद के मुताबिक काम करने देते हैं

• वेबपेज को ब्राउज़र में उम्मीद के मुताबिक दिखाने के लिए कुछ बेसिक HTML टैग शामिल करना ज़रूरी है
• `` standards mode rendering सुनिश्चित करता है और layout calculation की गलतियों को रोकता है
• `` भाषा जानकारी देकर accessibility, search, और translation quality को बेहतर बनाता है
• और क्रमशः character encoding और mobile display scale को नियंत्रित करते हैं
• ये टैग सिर्फ़ formalities नहीं हैं, बल्कि web standards और user experience की consistency बनाए रखने वाले मुख्य घटक हैं

---

HTML की बुनियादी संरचना और ज़रूरी टैग्स का अवलोकन

• यह लेख Alex Petros की प्रस्तुति “Incantations that make HTML work correctly” से प्रेरित है
  • लेखक ने वह basic snippet संक्षेप में बताया है जिसे ब्राउज़र में HTML फ़ाइल सीधे खोलते समय हमेशा शामिल करना चाहिए
  • उदाहरण के तौर पर दी गई बुनियादी संरचना यह है

• हर टैग ब्राउज़र को HTML को मानक तरीके से समझने और दिखाने में मदद करता है
  • इनमें से कुछ छूट जाएँ तो ब्राउज़र non-standard mode (quirks mode) में जा सकता है, या text garbling, मोबाइल स्क्रीन पर shrink होना जैसी समस्याएँ आ सकती हैं

`` — standards mode की घोषणा

• `` वह declaration है जो ब्राउज़र को standards mode में render करने के लिए कहती है
  • यह declaration न हो तो ब्राउज़र quirks mode में चला जाता है और पुराने non-standard HTML behavior को emulate करता है
  • इसका नतीजा यह होता है कि layout, size, और alignment calculation बदल जाते हैं और display में अनपेक्षित गड़बड़ियाँ आ सकती हैं
• case-sensitive नहीं है, इसलिए या `` जैसी किसी भी form में पहचाना जाता है
  • लेखक मज़ाक में कहते हैं, “अगर आप 1998-स्टाइल markup लिखना चाहते हैं, तो इसे uppercase में लिख सकते हैं”

`` — दस्तावेज़ की भाषा तय करना

• `` वह टैग है जो दस्तावेज़ की default language को स्पष्ट करता है
  • इस जानकारी का उपयोग ब्राउज़र, search engine, screen reader और कई अन्य tools करते हैं
• इसके प्रमुख उपयोग
  • screen reader सही pronunciation और voice tone चुन सकता है
  • search engine indexing और translation accuracy बेहतर कर सकता है
  • spell check जैसे locale-based features लागू किए जा सकते हैं
• language attribute छोड़ देने पर स्क्रीन पर शायद कोई समस्या न दिखे, लेकिन आसपास के tools गलत व्यवहार कर सकते हैं
  • इसलिए इसे HTML में साफ़ तौर पर लिखना बेहतर है
• भाषा की जानकारी server response header से भी दी जा सकती है, लेकिन local file को सीधे खोलते समय HTML के अंदर इसे देना ज़्यादा सुरक्षित है
  • उदाहरण कोड

    return new Response(
        "Hello world
    
    

", { status: 200, headers: { "Content-Type": "text/html; charset=utf-8" }, } ); ```

`` — character encoding बताना

• `` ब्राउज़र को दस्तावेज़ की character encoding पहचानने देता है
  • इससे é, ü, ñ, ©, ™, ®, …, 👍 जैसे non-ASCII characters सही ढंग से दिखते हैं
• यह टैग न हो तो दस्तावेज़ में special characters या smart quotes टूटे-फूटे दिख सकते हैं
  • लेखक अपने ब्लॉग में “smart quotes” के बिगड़ने का उदाहरण देते हैं
• उदाहरण तुलना
  • `` न होने पर: special characters और emoji बिगड़ जाते हैं
  • होने पर: सभी characters सामान्य रूप से दिखते हैं
• ब्लॉग में इन दोनों स्थितियों की तुलना करती हुई screenshot images भी जोड़ी गई हैं

`` — mobile viewport सेटिंग

• यह टैग mobile browser में screen scale और zoom ratio को नियंत्रित करता है
  • यह न हो तो mobile device पर page छोटा होकर सिकुड़ा हुआ दिखाई दे सकता है
• लेखक एक उदाहरण देते हैं: “desktop पर सब ठीक दिखता है, लेकिन mobile में खोलते ही सब कुछ छोटा दिखता है” — यानी meta viewport टैग भूल जाने का मामला
  • बाएँ (टैग नहीं) और दाएँ (टैग है) screenshot comparison के ज़रिए अंतर को दिखाया गया है
• इसलिए एक साधारण prototype में भी यह टैग शामिल होना चाहिए, ताकि उम्मीद के मुताबिक layout ratio बना रहे

समापन — HTML की असली बुनियाद

• अंत में लेखक मज़ाक में कहते हैं, “मैं सबसे महत्वपूर्ण snippet भूल गया था”
  • उदाहरण के तौर पर वे यह कोड दिखाते हैं

• यह आधुनिक web development में अक्सर दिखने वाली JavaScript-आधारित app structure पर एक व्यंग्यात्मक इशारा है
• कुल मिलाकर, लेख इस बात पर ज़ोर देता है कि HTML के बुनियादी टैग web standards के मुताबिक व्यवहार सुनिश्चित करने वाले मुख्य तत्व हैं

[ahwjdekf]

अगर ये ज़रूरी हैं, तो फिर ये डिफ़ॉल्ट रूप से काम क्यों नहीं करते? खैर, वेब वाकई काफ़ी अजीब है। इसका सोचने का तरीका ही अलग है।

[dongho42]

शायद backward compatibility की वजह से? अगर वे बस default behavior ही बदल दें, तो जो चीज़ें पहले से ठीक चल रही थीं वे टूट सकती हैं।

[GN⁺]

Hacker News राय

• दिलचस्प बात यह है कि HN और paulgraham.com दोनों बिना DOCTYPE declaration के हैं, इसलिए Quirks Mode में render होते हैं इसे developer tools में document.compatMode से जांचा जा सकता है मैं एक userscript इस्तेमाल करता हूँ ताकि hover किए गए element का text आसानी से copy कर सकूँ, लेकिन Quirks Mode में यह अस्थिर तरीके से काम करता है document.write("" + document.documentElement.innerHTML) से इसे ज़बरदस्ती बदला जा सकता है, लेकिन इससे पूरा document reset हो जाता है और समस्याएँ पैदा होती हैं मैं सोच रहा हूँ कि user के नज़रिए से Standards Mode को force करने का कोई और ज़्यादा साफ़ तरीका है या नहीं
  • अच्छा होगा अगर dang HN की usability थोड़ी सुधार दे default font size लगभग 12px है, जो ज़्यादातर आधुनिक devices पर बहुत छोटा दिखता है लगता है CSS भी लगभग 13 साल पहले public हुई पुरानी code जैसी ही है
  • इसे uBlock filter से हल किया जा सकता है उदाहरण: `||news.ycombinator.com/*$replace=/