लोड हो रहा है...

HTML टेम्पलेट तत्व

HTML का <template> तत्व एक विशेष और शक्तिशाली HTML तत्व है जिसका उपयोग आप पृष्ठ पर पूर्वनिर्धारित HTML संरचनाएँ (structures) बनाने के लिए करते हैं, जो तब तक दिखाई नहीं देतीं जब तक उन्हें JavaScript के माध्यम से सक्रिय (activate) न किया जाए। यह तत्व पृष्ठ पर ऐसे हिस्से बनाने में मदद करता है जिन्हें बार-बार उपयोग किया जा सकता है, लेकिन बिना दोहराए गए HTML को लिखे।
कल्पना कीजिए कि आप एक पुस्तकालय (library) का आयोजन कर रहे हैं — आप हर किताब को शेल्फ़ पर तुरंत नहीं रखते, बल्कि पहले एक सूची और स्थान तय करते हैं। ठीक उसी तरह <template> तत्व आपको वेबपेज की संरचना को तैयार करने देता है, परंतु उसे तुरंत नहीं दिखाता।
इसका उपयोग पोर्टफोलियो वेबसाइट पर प्रोजेक्ट कार्ड्स, ब्लॉग में पोस्ट टाइल्स, ई-कॉमर्स साइट में प्रोडक्ट लिस्टिंग, न्यूज़ साइट पर हेडलाइन्स और सोशल प्लेटफॉर्म पर यूज़र पोस्ट जैसी चीज़ों के लिए किया जा सकता है।
इस संदर्भ में आप सीखेंगे:

<template> तत्व क्या है और यह क्यों उपयोगी है
JavaScript से इसे DOM में कैसे प्रस्तुत किया जाता है
वास्तविक परिदृश्यों में इसका प्रयोग कैसे करें
सर्वोत्तम अभ्यास और सामान्य गलतियाँ क्या हैं
यह तत्व उन डेवलपर्स के लिए आवश्यक है जो उच्च प्रदर्शन, मॉड्यूलर और इंटरैक्टिव वेबपेज बनाना चाहते हैं।

मूल उदाहरण

html

HTML Code

<!-- User card template -->
<template id="user-template">
<div class="user-card">
<h2 class="username">नाम</h2>
<p class="bio">संक्षिप्त जानकारी</p>
</div>
</template>

ऊपर दिए गए कोड में हमने एक HTML टेम्पलेट बनाया है जिसका उपयोग एक उपयोगकर्ता कार्ड (user card) बार-बार दिखाने के लिए किया जा सकता है। <template> टैग के अंदर जो HTML है वह पेज लोड होते समय DOM में नहीं दिखता। यह केवल तब ही प्रदर्शित होता है जब हम JavaScript का उपयोग करके इसे DOM में डालते हैं।
प्रत्येक भाग का विश्लेषण:

<template>: यह एक container है जो ब्राउज़र को बताता है कि इसके अंदर की सामग्री डिफ़ॉल्ट रूप से प्रदर्शित नहीं की जाएगी।
id="user-template": इस ID से हम JavaScript के माध्यम से इस टेम्पलेट को चुन सकते हैं।
<div class="user-card">: यह पूरी यूज़र प्रोफ़ाइल की बाहरी बॉक्स को दर्शाता है।
<h2> और <p>: ये UI के टेक्स्ट क्षेत्र हैं, जिन्हें JavaScript द्वारा बाद में बदला जा सकता है।
यह टेम्पलेट तब उपयोगी होता है जब आपको समान डिजाइन को कई बार दोहराना होता है, जैसे एक यूज़र सूची या प्रोडक्ट लिस्ट। एक आम शुरुआती सवाल होता है: "यह दिखाई क्यों नहीं दे रहा?" क्योंकि <template> का कंटेंट पेज पर तभी आता है जब JavaScript से उसे क्लोन और ऐड किया जाता है।
जैसे हम किसी लेटर का ड्राफ्ट पहले तैयार करते हैं और बाद में ज़रूरत के अनुसार भेजते हैं, वैसे ही <template> तत्व UI के लिए ड्राफ्ट्स तैयार करता है।

व्यावहारिक उदाहरण

html

HTML Code

<template id="post-template">
<article class="post">
<h3 class="title"></h3>
<p class="snippet"></p>
</article>
</template>

<section id="blog-container"></section>

<script>
const posts = [
{ title: "HTML गहराई से", snippet: "टेम्पलेट्स का परिचय।" },
{ title: "JavaScript और DOM", snippet: "डायनामिक UI कैसे बनाएं।" }
];

const template = document.getElementById("post-template");
const container = document.getElementById("blog-container");

posts.forEach(post => {
const clone = template.content.cloneNode(true);
clone.querySelector(".title").textContent = post.title;
clone.querySelector(".snippet").textContent = post.snippet;
container.appendChild(clone);
});
</script>

सर्वोत्तम अभ्यास और सामान्य गलतियाँ
सर्वोत्तम अभ्यास:

सेमांटिक HTML का प्रयोग करें: टेम्पलेट में <article>, <section>, आदि का उपयोग करना SEO और एक्सेसिबिलिटी में मदद करता है।
साफ-सुथरी संरचना रखें: टेम्पलेट में कोई इनलाइन स्टाइल नहीं होनी चाहिए, केवल क्लासेस और IDs का उपयोग करें।
टेम्पलेट में विशिष्ट IDs से बचें: अगर आप एक टेम्पलेट को कई बार क्लोन कर रहे हैं, तो IDs डुप्लिकेट नहीं होनी चाहिए।
टेम्पलेट को केवल ज़रूरत पड़ने पर क्लोन करें: इससे पेज लोड तेज़ रहता है और उपयोगकर्ता का अनुभव बेहतर होता है।
आम गलतियाँ:
.content का उपयोग नहीं करना: <template> के अंदर की सामग्री तक पहुंचने के लिए .content आवश्यक है।
DOM में दिखने की अपेक्षा करना: <template> का कंटेंट कभी अपने आप प्रदर्शित नहीं होता।
JavaScript से सही तरह से क्लोन न करना: cloneNode(true) का प्रयोग नहीं करने से DOM अधूरा रह जाता है।
नैस्टिंग की गलतियाँ: <template> के अंदर कोई <script> या <style> टैग न डालें।
डिबगिंग सुझाव:

Console में template.content और cloneNode चेक करें।
Chrome DevTools में DOM देखें — <template> का कंटेंट दिखेगा लेकिन रेंडर नहीं होगा।
JavaScript errors (जैसे null access) का समाधान करें।
अनुशंसाएँ:
हमेशा टेम्पलेट्स को अच्छी तरह से कमेंट करें।
बड़ी वेब ऐप्स में मॉड्यूलर टेम्पलेट आर्किटेक्चर अपनाएं।
Web Components और Shadow DOM के साथ प्रयोग करें।

📊 त्वरित संदर्भ

Property/Method	Description	Example
template.content	टेम्पलेट की सामग्री का DocumentFragment	template.content.cloneNode(true)
cloneNode(true)	पूरे टेम्पलेट कंटेंट की कॉपी बनाता है	const clone = tpl.content.cloneNode(true)
querySelector()	क्लोन में तत्व खोजता है	clone.querySelector(".title")
appendChild()	टेम्पलेट क्लोन को DOM में जोड़ता है	container.appendChild(clone)
id	टेम्पलेट को JavaScript से पहचानने के लिए	document.getElementById("user-template")
DocumentFragment	अस्थायी DOM संरचना, प्रदर्शन तेज करता है	let frag = template.content

सारांश और अगले कदम
इस ट्यूटोरियल में आपने जाना कि HTML का <template> तत्व कैसे एक शक्तिशाली और लचीला टूल है जो आपको स्केलेबल और मॉड्यूलर UI बनाने में मदद करता है। यह DOM में हल्का होता है, SEO-फ्रेंडली होता है और जावास्क्रिप्ट के साथ मिलकर अत्यंत प्रभावी UI तैयार करता है।
मुख्य बिंदु:

<template> DOM का हिस्सा होते हुए भी रेंडर नहीं होता।
JavaScript से आप इसे क्लोन और प्रदर्शित कर सकते हैं।
यह UI की पुनः प्रयोज्यता को आसान बनाता है।
CSS और JavaScript से संबंध:
टेम्पलेट में मौजूद HTML तत्वों को CSS से स्टाइल किया जा सकता है, एक बार DOM में डालने के बाद।
JavaScript का प्रयोग करके आप इन टेम्पलेट्स को इंटरेक्टिव और डेटा-ड्रिवन बना सकते हैं।
अगले अध्ययन विषय:
Web Components और Shadow DOM
फ्रेमवर्क-आधारित टेम्पलेटिंग जैसे Handlebars, Lit
DOM APIs जैसे insertAdjacentHTML(), replaceChild()
प्रैक्टिकल सलाह:
आपकी अगली वेबसाइट परियोजना में <template> का उपयोग करें — विशेष रूप से तब जब आपको एक जैसी सामग्री को बार-बार प्रस्तुत करना हो। टेम्पलेट्स से न केवल आपका कोड क्लीन होता है, बल्कि परफॉर्मेंस भी बेहतर होती है।

🧠 अपने ज्ञान की परीक्षा करें

शुरू करने के लिए तैयार

अपना ज्ञान परखें

व्यावहारिक प्रश्नों के साथ इस विषय की अपनी समझ का परीक्षण करें।

❓

प्रश्न

🎯

70%

पास करने के लिए

♾️

∞

समय

🔄

∞

प्रयास

📝 निर्देश

हर प्रश्न को ध्यान से पढ़ें
हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
आपकी प्रगति शीर्ष पर दिखाई जाएगी

भाषा