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

• HTML में ऐसे tag names जो पहचाने नहीं जाते इस्तेमाल करने पर भी browser उन्हें सामान्य elements की तरह प्रोसेस करता है
• CSS में उन tag names को selector के रूप में देकर styling और display control किया जा सकता है
• नाम में hyphen(-) शामिल करने से भविष्य के HTML standards के साथ टकराव से बचा जा सकता है
• <div> या <span> की जगह अर्थपूर्ण custom tags इस्तेमाल करने से code readability बेहतर होती है
• जटिल nested structures में भी सिर्फ tag names से structure समझना आसान होता है, जिससे maintenance आसान हो जाती है

---

custom HTML tags का उपयोग

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

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

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

  • उदाहरण: <main-article>, <quote-body> आदि

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

• <div> या <span> की जगह अर्थपूर्ण नाम वाले tags इस्तेमाल करने से code समझना आसान हो जाता है
  • उदाहरण के लिए <div class="article-header"> की जगह <article-header> इस्तेमाल किया जा सकता है
• nested <div> structure में closing tag की स्थिति समझना कठिन हो सकता है, लेकिन स्पष्ट tag names इस्तेमाल करने पर structure साफ हो जाता है
  • <main-article> के अंदर <article-header>, <article-quote> आदि रखने से DOM structure समझना intuitive हो जाता है

उदाहरण code

• पुराना तरीका

  <div class="cool-thing">
    Hello, World!
  </div>
  

• custom tag तरीका

  <cool-thing>
    Hello, World!
  </cool-thing>
  

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

निष्कर्ष

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