HTML में हालिया रुझान
यह लेख HTML में हालिया रुझानों को समझाता है।
यह उन टैग्स को स्पष्ट करता है जो हाल ही में HTML5 में जोड़े गए हैं।
YouTube Video
HTML में हालिया रुझान
<template>
टैग
Hello, this is a reusable template!
1<template id="myTemplate">
2 <div>
3 <p>Hello, this is a reusable template!</p>
4 </div>
5</template>
6<button onclick="useTemplate()">Use Template</button>
7<div id="container"></div>
8<script>
9 function useTemplate() {
10 const template = document.getElementById('myTemplate');
11 const clone = template.content.cloneNode(true);
12 document.getElementById('container').appendChild(clone);
13 }
14</script>
-
<template>
टैग का उपयोग पुन: प्रयोज्य HTML खंडों को परिभाषित करने के लिए किया जाता है, जो तब तक छिपे रहते हैं जब तक कि उन्हें जावास्क्रिप्ट के माध्यम से सक्रिय न किया जाए। -
टैग का उपयोग करके, आप कार्ड या सूची आइटम जैसे पुन: प्रयोज्य UI घटक गतिशील रूप से बना सकते हैं। यह बड़े पैमाने के अनुप्रयोगों में कोड दोहराव को कम करने और अनुरक्षणीयता में सुधार करने में भी मदद करता है।
-
इस उदाहरण में, 'Use Template' बटन पर क्लिक करने से
<template>
टैग की सामग्री प्रदर्शित होती है।
<slot>
टैग
Header Content
Footer Content
1<template id="myElementTemplate">
2 <slot name="header">Default Header</slot>
3 <main>Default Content</main>
4 <slot name="footer">Default Footer</slot>
5</template>
6<my-element>
7 <p slot="header">Header Content</p>
8 <p slot="footer">Footer Content</p>
9</my-element>
10<script>
11 class MyElement extends HTMLElement {
12 constructor() {
13 super();
14 const shadow = this.attachShadow({ mode: 'open' });
15 shadow.innerHTML = document.getElementById('myElementTemplate').cloneNode(true).innerHTML;
16 }
17 }
18 customElements.define('my-element', MyElement);
19</script>
<slot>
टैग एक प्लेसहोल्डर के रूप में कार्य करता है जो पैरेंट तत्व से पास की गई सामग्री को प्रदर्शित करता है।- यदि किसी स्लॉट के लिए कोई सामग्री प्रदान नहीं की गई है, तो फॉलबैक सामग्री (डिफ़ॉल्ट सामग्री जो सीधे
<slot>
टैग के अंदर लिखी गई है) प्रदर्शित की जाएगी।
- यदि किसी स्लॉट के लिए कोई सामग्री प्रदान नहीं की गई है, तो फॉलबैक सामग्री (डिफ़ॉल्ट सामग्री जो सीधे
- इस उदाहरण में, नामित स्लॉट्स (
header
औरfooter
) को<template>
तत्व के भीतर परिभाषित किया गया है। <my-element>
एक उपयोगकर्ता-परिभाषित कस्टम HTML तत्व है। इस तत्व के अंदर<p>
टैग परslot
विशेषता स्लॉट नाम और उसमें डाली जाने वाली सामग्री को निर्दिष्ट करती है।
<dialog>
टैग
1<dialog id="exampleDialog">
2 <p>This is a dialog box.</p>
3 <button id="closeButton">Close</button>
4</dialog>
5
6<button id="openButton">Open Dialog</button>
7
8<script>
9 const dialog = document.getElementById('exampleDialog');
10 const openButton = document.getElementById('openButton');
11 const closeButton = document.getElementById('closeButton');
12
13 openButton.addEventListener('click', () => dialog.showModal());
14 closeButton.addEventListener('click', () => dialog.close());
15</script>
-
<dialog>
टैग का उपयोग इंटरैक्टिव खिड़कियों जैसे कि मोडल्स या पॉप-अप्स को परिभाषित करने के लिए किया जाता है। आप जावास्क्रिप्ट का उपयोग करके खोलने और बंद करने को नियंत्रित कर सकते हैं। -
इस उदाहरण में, 'Open Dialog' बटन पर क्लिक करने से संवाद बॉक्स प्रदर्शित होता है।
<input>
टैग की inputmode
विशेषता
1<label for="phone">Phone Number:</label>
2<input type="text" id="phone" inputmode="tel" placeholder="Enter your phone number">
<input>
टैग कीinputmode
विशेषता टच डिवाइस पर प्रदर्शित वर्चुअल कीबोर्ड के प्रकार को निर्दिष्ट करती है और उपयोगकर्ता अनुभव को बढ़ाती है। उदाहरण के लिए,inputmode="tel"
फ़ोन नंबर इनपुट के लिए एक संख्यात्मक कीबोर्ड प्रदर्शित करता है।inputmode
विशेषता केवल वर्चुअल कीबोर्ड डिस्प्ले को समायोजित करने के लिए है और इनपुट सामग्री को मान्य नहीं करती है। इनपुट प्रतिबंध लगाने के लिए, आपकोtype
विशेषता या JavaScript सत्यापन का उपयोग करना होगा।- चूंकि सभी ब्राउज़र और डिवाइस इसको पूरी तरह से समर्थित नहीं करते हैं, इसलिए उपयुक्त फॉलबैक तैयार करना सबसे अच्छा होता है।
inputmode
विशेषता निम्नलिखित मान ले सकती है। प्रत्येक मान विशिष्ट इनपुट प्रकार या वर्चुअल कीबोर्ड को प्रदर्शित करने के लिए उपयोग किया जाता है।
मान | विवरण |
---|---|
none |
none वर्चुअल कीबोर्ड को छुपा देता है। |
text |
text एक मानक टेक्स्ट इनपुट वर्चुअल कीबोर्ड प्रदर्शित करता है। |
tel |
tel फ़ोन नंबर इनपुट के लिए एक संख्यात्मक कीबोर्ड प्रदर्शित करता है। |
url |
url URL इनपुट के लिए एक वर्चुअल कीबोर्ड प्रदर्शित करता है। |
email |
email ईमेल पता इनपुट के लिए एक वर्चुअल कीबोर्ड प्रदर्शित करता है। |
numeric |
‘न्यूमेरिक’ केवल संख्यात्मक इनपुट के लिए एक आभासी कीबोर्ड प्रदर्शित करता है। |
decimal |
‘डेसिमल’ संख्यात्मक इनपुट के लिए एक आभासी कीबोर्ड प्रदर्शित करता है। |
search |
‘सर्च’ खोज इनपुट के लिए एक आभासी कीबोर्ड प्रदर्शित करता है। |
<meta>
टैग का ‘थीम-कलर’ गुण
1<meta name="theme-color" content="#4CAF50">
2<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
3<meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">
<meta>
टैग का ‘थीम-कलर’ गुण संगत मोबाइल ब्राउज़रों में एड्रेस बार और यूआई के रंग को अनुकूलित करने के लिए उपयोग किया जाता है।- उदाहरण के लिए, यह
मीडिया
गुण का उपयोग करके डार्क मोड और लाइट मोड के बीच स्विच कर सकता है।
ये टैग और गुण HTML5 के उन्नत संस्करण हैं और आधुनिक वेब विकास में आवश्यक तत्व बन गए हैं। इन्हें उपयोग करते समय विशिष्ट ब्राउज़र समर्थन और अनुकूलता की जांच करने की सिफारिश की जाती है।
आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।