अध्याय 11: HTML5 का परिचय

HTML5 HTML का नवीनतम संस्करण है, जो वेब डेवलपमेंट में कई सुधार और नए फीचर्स लेकर आया है। यह संस्करण वेब पेजों को और अधिक संरचित, अर्थपूर्ण और इंटरैक्टिव बनाने में मदद करता है। इस अध्याय में हम HTML5 के नए एलिमेंट्स, एट्रिब्यूट्स और फॉर्म एन्हांसमेंट्स के बारे में जानेंगे।

HTML5 के नए एलिमेंट्स

HTML5 में कई नए एलिमेंट्स जोड़े गए हैं जो वेब पेजों की संरचना और सामग्री को और अधिक अर्थपूर्ण बनाते हैं।

1. <header>:
   • विवरण: यह टैग डॉक्युमेंट या अनुभाग के शीर्षलेख को परिभाषित करता है।
   • उदाहरण:
     <header>
<h1>मेरा वेबसाइट</h1>
<nav>
<ul>
<li><a href="#home">होम</a></li>
<li><a href="#about">परिचय</a></li>
<li><a href="#contact">संपर्क करें</a></li>
</ul>
</nav>
</header>

2. <footer>:
   • विवरण: यह टैग डॉक्युमेंट या अनुभाग के फूटर्स को परिभाषित करता है।
   • उदाहरण:
     <footer>
<p>© 2024 मेरा वेबसाइट</p>
</footer>

3. <article>:
   • विवरण: यह टैग स्वतंत्र रूप से वितरित करने योग्य या पुन: प्रयोज्य सामग्री को परिभाषित करता है।
   • उदाहरण:
     <article>
<h2>HTML5 का परिचय</h2>
<p>HTML5 HTML का नवीनतम संस्करण है...</p>
</article>

4. <section>:
   • विवरण: यह टैग एक सामान्य विषय पर सामग्री के अनुभाग को परिभाषित करता है।
   • उदाहरण:
     <section>
<h2>हमारे सेवाएं</h2>
<p>हम वेब डेवलपमेंट सेवाएं प्रदान करते हैं...</p>
</section>

5. <nav>:
   • विवरण: यह टैग नेविगेशन लिंक के सेट को परिभाषित करता है।
   • उदाहरण:
     <nav>
<ul>
<li><a href="#home">होम</a></li>
<li><a href="#services">सेवाएं</a></li>
<li><a href="#contact">संपर्क करें</a></li>
</ul>
</nav>

6. <aside>:
   • विवरण: यह टैग मुख्य सामग्री के साइडबार या अन्य अतिरिक्त जानकारी को परिभाषित करता है।
   • उदाहरण:
     <aside>
<h2>साइडबार</h2>
<p>यहां अतिरिक्त जानकारी है...</p>
</aside>

7. <figure> और <figcaption>:
   • विवरण: <figure> टैग का उपयोग चित्र, चार्ट, या अन्य चित्रित सामग्री के लिए किया जाता है, और <figcaption> टैग इसका कैप्शन प्रदान करता है।
   • उदाहरण:
     <figure>
<img src="image.jpg" alt="उदाहरण चित्र">
<figcaption>उदाहरण चित्र का विवरण</figcaption>
</figure>

HTML5 के नए एट्रिब्यूट्स

HTML5 में कई नए एट्रिब्यूट्स जोड़े गए हैं जो वेब पेजों की कार्यक्षमता और इंटरैक्टिविटी को बढ़ाते हैं।

1. placeholder:
   • विवरण: यह एट्रिब्यूट इनपुट फील्ड में एक संकेतक टेक्स्ट प्रदर्शित करता है।
   • उदाहरण:
     <input type="text" placeholder="अपना नाम दर्ज करें">

2. required:
   • विवरण: यह एट्रिब्यूट फील्ड को आवश्यक बनाता है, और फॉर्म को सबमिट करने से पहले इसे भरा जाना चाहिए।
   • उदाहरण:
     <input type="email" required>

3. autofocus:
   • विवरण: यह एट्रिब्यूट पेज लोड होने पर फील्ड को स्वचालित रूप से फोकस करता है।
   • उदाहरण:
     <input type="text" autofocus>

4. pattern:
   • विवरण: यह एट्रिब्यूट एक रेगुलर एक्सप्रेशन निर्दिष्ट करता है जो इनपुट डेटा को मान्य करने के लिए उपयोग किया जाता है।
   • उदाहरण:
     <input type="text" pattern="[A-Za-z]{3,}">


HTML5 फॉर्म एन्हांसमेंट्स

HTML5 में फॉर्म्स को और अधिक उपयोगकर्ता-अनुकूल बनाने के लिए कई सुधार किए गए हैं।

1. नई इनपुट प्रकार:
   • उदाहरण:
     <label for="email">ईमेल:</label>
<input type="email" id="email" name="email"><label for="date">जन्म तिथि:</label>
<input type="date" id="date" name="date"><label for="url">वेबसाइट:</label>
<input type="url" id="url" name="url"><label for="range">रेंज:</label>
<input type="range" id="range" name="range" min="0" max="100">


2. डेटा वैलिडेशन:
   • HTML5 में डेटा वैलिडेशन को सीधे इनपुट फील्ड्स में एट्रिब्यूट्स के माध्यम से शामिल किया गया है, जैसे कि required, pattern, min, max, आदि।
3. अधिक इंटरैक्टिव इनपुट्स:
   • उदाहरण:
     <label for="color">पसंदीदा रंग:</label>
<input type="color" id="color" name="color"><label for="search">खोज:</label>
<input type="search" id="search" name="search">

निष्कर्ष

HTML5 ने वेब डेवलपमेंट में कई नए एलिमेंट्स, एट्रिब्यूट्स और फॉर्म एन्हांसमेंट्स जोड़े हैं जो वेब पेजों को अधिक संरचित, अर्थपूर्ण और उपयोगकर्ता-अनुकूल बनाते हैं। इन नए फीचर्स का सही उपयोग करके आप अपने वेब पेजों की कार्यक्षमता और इंटरैक्टिविटी को बढ़ा सकते हैं। अगले अध्याय में हम और अधिक HTML टैग्स और उनके उपयोगों के बारे में जानेंगे।