आप HTML टैग सीधे बनाकर इस्तेमाल कर सकते हैं

 (maurycyz.com)
3 पॉइंट द्वारा GN⁺ 2025-12-30 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • HTML में ऐसे tag names जो पहचाने नहीं जाते इस्तेमाल करने पर भी browser उन्हें सामान्य elements की तरह प्रोसेस करता है
  • CSS में उन tag names को selector के रूप में देकर styling और display control किया जा सकता है
  • नाम में hyphen(-) शामिल करने से भविष्य के HTML standards के साथ टकराव से बचा जा सकता है
  • या की जगह अर्थपूर्ण custom tags इस्तेमाल करने से code readability बेहतर होती है
  • जटिल nested structures में भी सिर्फ tag names से structure समझना आसान होता है, जिससे maintenance आसान हो जाती है

custom HTML tags का उपयोग

  • browser अनजान tags को सामान्य block elements की तरह render करता है

    • यह HTML standard में निर्दिष्ट सामान्य व्यवहार है, और CSS में styles देकर इसे दृश्य रूप से नियंत्रित किया जा सकता है
    • उदाहरण के लिए `` जैसा tag परिभाषित करके CSS में cool-thing { ... } के रूप में सजाया जा सकता है

  • tag name में hyphen(-) शामिल करने पर भविष्य में HTML standard में जुड़ने की संभावना नहीं रहती, इसलिए टकराव का जोखिम नहीं होता

    • उदाहरण: , आदि

readability और structure में सुधार

  • या की जगह अर्थपूर्ण नाम वाले tags इस्तेमाल करने से code समझना आसान हो जाता है
    • उदाहरण के लिए की जगह इस्तेमाल किया जा सकता है
  • nested `` structure में closing tag की स्थिति समझना कठिन हो सकता है, लेकिन स्पष्ट tag names इस्तेमाल करने पर structure साफ हो जाता है
    • के अंदर, `` आदि रखने से DOM structure समझना intuitive हो जाता है

उदाहरण code

  • पुराना तरीका 
    
  Hello, World!
  • custom tag तरीका 
    
  Hello, World!
    • CSS में cool-thing { display: block; font-weight: bold; text-align: center; ... } के रूप में styling की जा सकती है

निष्कर्ष

  • HTML standard द्वारा अनुमति दी गई लचीली tag definition capability का उपयोग करने पर, ज़्यादा readable structural markup लिखा जा सकता है
  • हालांकि, अगर पहले से कोई परिभाषित अर्थपूर्ण tag मौजूद हो, तो उसी मौजूदा tag का उपयोग प्राथमिकता होनी चाहिए

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

1 टिप्पणियां

 
GN⁺ 2025-12-30
Hacker News की रायें

  • यह ज़ोर दिया गया कि कोई अनपहचाना टैग नहीं है अपने [ब्लॉग पोस्ट](https://dashed-html.github.io) का परिचय देते हुए बताया गया कि को WHATWG द्वारा नया element जोड़े जाने तक HTMLUnknownElement माना जाता है, लेकिन एक **वैध HTMLElement** है, इसलिए layout और styling में उपयोगी है JavaScript Custom Elements API से upgrade करने पर यह **defined custom element** बन जाता है यह सभी browsers में standard behavior है, और W3C HTML Validator भी dash वाले custom elements को HTMLElement मानता है हालांकि default UA stylesheet का `[hidden]{display:none}` नियम inherit नहीं होता, इसलिए इसे अलग से सेट करना पड़ता है का default रूप से display:block होना भी UA stylesheet की वजह से है, इसलिए custom elements के लिए display property खुद सेट करनी चाहिए CSS के :defined और :not(:defined) selectors से defined और undefined elements में फर्क किया जा सकता है Declarative Shadow DOM(``) भी इसी तरह undefined custom elements बनाता है

    • Chromium के हिसाब से यह UA stylesheet की समस्या नहीं, बल्कि इसलिए है क्योंकि hidden एक HTML presentation attribute है UA stylesheet custom elements पर भी वैसे ही लागू होती है, और [hidden] नियम मौजूद नहीं है hidden ऐसा उदाहरण है जिसमें attribute खुद style की तरह interpret होता है, जैसे align="right"
    • अफसोस जताया गया कि अगर dash(-) की जगह colon(:) इस्तेमाल किया जा सकता, तो XML namespaces को स्वाभाविक रूप से integrate किया जा सकता था यह भी कहा गया कि nginx या apache में colon को hyphen में बदलना संभव होता “1999 में वापस नहीं जा सकते” कहकर बात को यादों भरे अंदाज़ में खत्म किया गया
    • सवाल उठाया गया कि यह तरीका default practice क्यों नहीं है

  • उदाहरण के nesting को बहुत ज़्यादा बताया गया सुझाव दिया गया कि, , जैसे semantic tags का इस्तेमाल अधिक उपयुक्त होगा

    • यह बताया गया कि custom tags, class attributes के विपरीत, सिर्फ एक नाम रख सकते हैं classes कई हो सकती हैं और उनका क्रम मायने नहीं रखता, लेकिन nested custom elements क्रम को मजबूर करते हैं, इसलिए वही अभिव्यक्ति करना मुश्किल हो जाता है
    • विश्लेषण किया गया कि “div soup” खुद बुरी चीज़ नहीं है, बल्कि HTML के structure और style को मज़बूती से जोड़ देने वाले design decision का परिणाम है 1996 में यह उचित रहा होगा, लेकिन अब नहीं

  • 3~4 साल तक custom elements इस्तेमाल करने का अनुभव साझा किया गया विचार चतुर है, लेकिन व्यावहारिक काम में पेचीदा बहुत ज़्यादा custom tags इस्तेमाल करने पर readability गिरती है, और block/inline का फर्क समझना मुश्किल हो जाता है एक संतुलित तरीके के रूप में, base tags वैसे ही रखे जाते हैं और या जैसे component-type elements के लिए ही custom tags इस्तेमाल किए जाते हैं नीचे के subcomponents को `` की तरह slot attribute से अलग किया जाता है classes को केवल modification और customization के लिए सीमित रखने, और structure को slot से व्यक्त करने का तरीका पसंद किया गया

    • संतुलित web component approach में रुचि जताते हुए examples या toolkit मांगा गया अपने बनाए Good.HTML का परिचय देते हुए बताया गया कि यह autohook, template literal आधारित interpolation, और सुसंगठित component structure को support करता है यह भी जोड़ा गया कि < !app-header /> जैसे self-closing custom elements को comment node trick से implement किया गया
    • पूछा गया कि CSS में slot attribute के आधार पर select करने के लिए div[slot="hero-blurb"] जैसा लिखना सही होगा क्या
    • कहा गया कि यह pattern BEM की block–element structure की याद दिलाता है

  • मूल रूप से custom tags `` की तरह behave करते हैं जरूरत हो तो Custom Element API के जरिए behavior define किया जा सकता है

    • बताया गया कि 2014 में custom elements का व्यापक उपयोग किया था, और React के dominant हो जाने पर अफसोस जताया गया उनका मानना था कि अधिकतर users के लिए SPA की तुलना में HTML + custom elements का संयोजन बेहतर होता
    • कहा गया कि semantic elements को प्राथमिकता देनी चाहिए और custom elements केवल जरूरत पड़ने पर ही इस्तेमाल करने चाहिए अपने Hypalink उदाहरण को साझा करते हुए, Web Components के कम आंके जाने की बात कही गई

  • बताया गया कि नाम का custom tag बनाकर का उल्टा behavior लागू किया गया JS disabled होने पर किसी खास क्षेत्र को छिपाया जा सकता है project link साझा किया गया

    • सुझाव दिया गया कि CSS के @media (scripting) feature से सिर्फ pure CSS से भी वही प्रभाव पाया जा सकता है MDN दस्तावेज़ का संदर्भ लिंक भी दिया गया

  • अतीत में browser से हटाए जा चुके `` tag को खुद दोबारा बनाने का अनुभव साझा किया गया इसे jQuery और visibility manipulation से implement किया गया था, और यह देखकर हैरानी हुई कि browser मनमाने tags को allow करता है code करीब 10 lines का था इसलिए उसे publish नहीं किया, लेकिन अंदाज़ा लगाया गया कि ऐसे प्रयास और भी बहुत होंगे

    • समझाया गया कि वास्तव में ज्यादातर browsers ने `` को कभी implement ही नहीं किया, और सिर्फ Firefox और Opera ने 2013 तक support किया
    • Flash के गायब होने पर अब भी अफसोस जताया गया
    • कहा गया कि CSS से भी `` effect बनाया जा सकता है, और example code साझा किया गया .blink की जगह blink selector इस्तेमाल करने पर यह सीधे tag पर लागू हो जाता है
    • कहा गया कि `` जैसा behavior साधारण HTML element के रूप में देने के लिए बहुत बड़ा अर्थ रखने वाला feature था, इसलिए उसके हटने का स्वागत किया गया

  • यह बताया गया कि , जैसे examples को असली HTML tags से बदला जा सकता है , , `` का उपयोग अधिक उचित है

    • यह भी जोड़ा गया कि predefined HTML tags इस्तेमाल करने पर browser की default styling का लाभ भी मिलता है

  • custom tags मूल रूप से `` की तरह inline render होते हैं, लेकिन CSS से default display property सेट की जा सकती है पहले namespace issues की वजह से इससे बचा जाता था, लेकिन standard में hyphen(-) की अनुमति मिलने के बाद conflict का जोखिम खत्म हो गया यह CSS selectors में भी बिना समस्या काम करता है, और querySelector से भी access किया जा सकता है महसूस किया गया कि Vue जैसे framework के बिना भी सिर्फ modern HTML से काफी कुछ व्यक्त किया जा सकता है

    • यह भी जोड़ा गया कि hyphen वाले non-standard elements को HTMLUnknownElement नहीं बल्कि HTMLElement के रूप में handle किया जाता है यह इस तरह design किया गया है कि भविष्य में upgrade होने पर prototype chain स्वाभाविक रूप से extend हो सके

  • सभी custom elements के लिए default styling देनी हो तो यह तरीका इस्तेमाल किया जा सकता है

    :where(:not(:defined)) {
  display: block;
}
    • कहा गया कि वे इसी तरीके की तलाश में थे, और हैरानी व धन्यवाद व्यक्त किया गया

  • याद किया गया कि पुराने IE HTML5 tags को पहचान नहीं पाते थे, इसलिए 2010 के आसपास इसे अपने बनाए script से हल किया गया था JS से tag को एक बार create कर देने पर IE उसे पहचानने लगता था, और बाद में delete कर देने पर भी समस्या नहीं होती थी इसी तरह यह समझ आया कि मनमाने tags भी render किए जा सकते हैं उस समय की ब्लॉग पोस्ट भी साझा की गई

    • यह भी जोड़ा गया कि लोकप्रिय html5shim भी इसी तरीके से काम करता था