HTML अपने आप `include` फीचर को सपोर्ट क्यों नहीं कर सकता?

 (frontendmasters.com)
2 पॉइंट द्वारा GN⁺ 2025-05-05 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • केवल HTML में ऐसा include फीचर नहीं है जो एक ही element को कई pages में शामिल कर सके
  • CSS, CSS को और JavaScript, JS को बुला सकते हैं, लेकिन HTML, HTML को नहीं ला सकता — यही सवाल है
  • इस समस्या को हल करने के लिए तरह-तरह के JavaScript, template languages, और static site generators इस्तेमाल किए जाते हैं
  • performance, security, rendering delay, circular include जैसी जटिल समस्याएँ इसके अपनाने में बाधा बनती हैं
  • कई developers HTML में शुद्ध declarative include फीचर चाहते हैं, लेकिन यह अभी तक web standards का हिस्सा नहीं बना है

HTML में Include फीचर न होने पर सवाल

समस्या क्या है

  • index.html, about.html, contact.html जैसी कई pages में common header को बार-बार जोड़ना असुविधाजनक होता है
  • developers चाहते हैं कि बिना duplication के, एक बार define किया गया header दोबारा इस्तेमाल किया जा सके

पहले से मौजूद वैकल्पिक तरीके

  • JavaScript के fetch API से बाहरी HTML लाकर उसे DOM में insert करने का तरीका
  • server-side include (SSI), PHP का include, static site generators, और template languages इसके समाधान के रूप में मौजूद हैं
  • <iframe> और <object> जैसे HTML elements से भी यह संभव है, लेकिन accessibility, performance, और style isolation की समस्याओं के कारण यह उपयुक्त नहीं है
  • अंततः HTML में खुद कोई सरल include syntax नहीं है

HTML में यह फीचर क्यों नहीं है?

  • CSS और JS में क्रमशः @import और import syntax मौजूद हैं, लेकिन HTML में ऐसा नहीं है
  • web standards आम तौर पर developers द्वारा व्यापक रूप से इस्तेमाल की जाने वाली सुविधाओं को अपनाते रहे हैं, लेकिन HTML include ऐसा मामला नहीं बन सका
  • उठाए गए संभावित कारण:
    • preload scanner के काम में बाधा पड़ सकती है
    • asynchronous loading के समय layout shift / flicker की समस्या
    • nested या circular include को संभालने की जटिलता
    • web hosting traffic बढ़ने को लेकर विरोध
    • security issues (CORS, CSP आदि) और document loading events के timing conflict
    • या फिर बस इसकी priority कम थी और कोई स्पष्ट proposal नहीं था

संबंधित चर्चा

  • GitHub के WHATWG issue thread #2791 में इस पर सक्रिय चर्चा चल रही है
  • पहले Chrome में HTML Imports एक समय मौजूद था, लेकिन दूसरे browsers के support न देने के कारण इसे हटा दिया गया
  • HTMX, Web Components, XSLT, SSI जैसी वैकल्पिक approaches भी साझा की जा रही हैं

कम्युनिटी प्रतिक्रिया का सार

  • HTML का विकास static markup-केंद्रित बना रहा, इसलिए logic जैसे फीचर्स को बाहर रखने की सोच अब भी मजबूत है
  • बहुत से लोग यह फीचर चाहते हैं, लेकिन standardization process में अपनी आवाज़ उठाना individual developers के लिए कठिन होता है
  • यह भी विश्लेषण है कि performance, security, rendering handling, circular prevention आदि जैसी जटिल design समस्याएँ सुलझाए बिना इसे लाना मुश्किल है
  • कुछ developers का मानना है कि include फीचर सिर्फ इसलिए नहीं आया क्योंकि HTML का काम केवल “result” दिखाना माना गया

निष्कर्ष

  • HTML में अब भी शुद्ध include फीचर मौजूद नहीं है, इसलिए इसके लिए अलग tools और languages का सहारा लेना पड़ता है
  • फिर भी कई developers अब भी सरल HTML-आधारित reusable structure की उम्मीद रखते हैं

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2025-05-05
Hacker News राय
  • ऐतिहासिक रूप से HTML, SGML का एक अनुप्रयोग था, और SGML include फीचर को सपोर्ट करता था. कोई नई "entity" define करके और "system" entity बनाकर उसे बाद में reference और replace किया जा सकता था
    • SGML की जटिलता के कारण HTML को सरल बनाने की कई कोशिशें हुईं, और उसी प्रक्रिया में यह फीचर हटा दिया गया
  • 90 के दशक के आख़िर में इस समस्या को हल करने की कोशिश की गई थी. Analog Science Fiction वेबसाइट के webmaster के रूप में, मैं बहुत सारे static pages बना रहा था जिनमें एक जैसा header और sidebar था. तब मुझे Apache server-side include फीचर मिला. DRY principle के बारे में जानने से पहले यही उसे maintain करने का तरीका था
    • यह समस्या बार-बार कई तरीकों से हल की जाती रही है. जो लोग कहते हैं कि iframe काफ़ी है, उनके लिए समस्या यह है कि iframe कंटेंट के अनुसार expand नहीं होता. server-side solutions के लिए server चाहिए. फिर कोई आसान client-side तरीका क्यों नहीं है? मुझे लगता है यह एक वैध सवाल है
  • HTML Imports नाम का एक फीचर प्रस्तावित किया गया था. इसे Web Components के हिस्से के रूप में बनाया गया था
    • HTML Imports, एक HTML document को दूसरे HTML document में include और reuse करने का तरीका था
    • Google ने Blink में प्रस्तावित spec को implement किया था, लेकिन दूसरी कंपनियों ने अलग-अलग कारणों से इसका विरोध किया. Mozilla को implementation की complexity, security concerns, और ES6 modules के साथ duplication को लेकर चिंता थी. vendor support न मिलने के कारण यह proposal आधिकारिक रूप से बंद कर दिया गया
  • Netscape 4 में inflow layers नाम का एक फीचर था
    • इस फीचर का नाम transclusion है. यह Project Xanadu का हिस्सा था, और मूल hypertext की एक महत्वपूर्ण capability माना जाता था
    • MediaWiki transclusion का व्यापक रूप से उपयोग करता है. कभी-कभी wiki, hypertext के असली रूप जैसी लगती है
  • एक सही frameset (iframe नहीं) को बहुत पहले ही इस तरह की functionality देने के लिए बनाया गया था. कम से कम auto-resize अच्छी तरह काम करता था और user उसे resize भी कर सकता था
    • frames पर बहुत आलोचना हुई, लेकिन Java API documentation जैसी उपयोगी चीज़ों में इसे सफलतापूर्वक deploy किया गया
    • मेरा मानना है कि frameset इसलिए नहीं टिक पाया क्योंकि वह designers को काफ़ी flexibility नहीं देता था. आज के mobile पर भी frameset शायद ठीक से काम नहीं करेगा
  • "Includes" फीचर को server-side माना जाता है, और इसे web browser के बाहर process किया जाता है. HTML client-side है, और यह programming language नहीं बल्कि सिर्फ़ एक simple markup syntax है
    • यह समस्या अब solved problem है. "Includes" की समस्या ही वह चीज़ है जिसके ज़रिए लगभग हर web design student PHP सीखता है. ज़्यादातर CMS में "Includes", "template parts" बन जाते हैं, और documentation में सबसे पहले समझाई जाने वाली चीज़ों में से एक होते हैं
    • सिर्फ़ HTML से "Includes" इस्तेमाल करने की ज़रूरत नहीं है. HTML एक presentation format है, और CSS व JS के बिना यह कोई खास दिलचस्प काम नहीं करता
  • HTML include functionality में कई समस्याएँ हैं
    • अगर main.html, child/include1.html को include करता है, और child/include1.html में src="include2.html" लिंक है, तो user के क्लिक करने पर कहाँ जाना चाहिए? अगर include2.html पर जाए, तो उस page में बाकी सब चीज़ें गायब होंगी. अगर main.html पर जाए, तो फिर यह कैसे specify होगा कि इस बार include1.html की जगह include2.html इस्तेमाल करना है?
    • दूसरी ओर, article1.html, article2.html, article3.html आदि में से हर एक header.html, footer.html, navi.html को include कर सकता है. लेकिन अगर हर article में comments.html जोड़ना हो, तो सभी articles edit करने पड़ेंगे. अंत में template के आधार पर articles generate करना ज़्यादा व्यावहारिक हो जाता है, और browser को includes सपोर्ट करने की ज़रूरत ही नहीं रहती
    • अगर header को title जानना हो, या footer को next/previous links चाहिए हों, तो includes के बीच यह जानकारी पास करने का कोई तरीका चाहिए होगा. अंततः page generate करना ही पड़ता है, और include इसका समाधान नहीं है
    • ज़्यादातर use cases में HTML includes व्यावहारिक रूप से बेकार साबित होंगे
  • WHATWG में इस विषय पर एक public issue मौजूद है
    • HTML में client-side include functionality
  • HTML में include जैसी functionality थी, लेकिन वह लोकप्रिय नहीं रही
    • असली "include" शब्द XML फीचर से आता है, और लेख जिस functionality की बात कर रहा है वह वही है. HTML के पास XML से पहले एक वैकल्पिक तरीका था, और वह था frames. frames, XML include से ज़्यादा functionality देते थे, इसलिए HTML को अलग से यह फीचर नहीं मिला. लेकिन misuse, security, accessibility और कई अन्य समस्याओं के कारण frames लोकप्रिय नहीं रहे